Block is merged into next block in editor

  • Resolved whipkey

    (@whipkey)


    4 years, 3 months ago

    I have created a new block with a text field floating left as a label and a textarea floating right next to it. I have created a preview template and styles for it. All of that is working. Displays properly on the front end and also in the editor. However, after I finish filling out the custom block and move away the new block seems to absorb the block immediately below. If I try to click on my custom block to change it I see the block controls for the below block with the outline completely surrounding both of them… but I am never able to actually click on my custom block again.

    An example from the source when you switch to code editor:

    <!-- wp:block-lab/exhibitions {"mm-year":"2018","mm-exhibitions":"TYPOLOGIES    John Molloy Gallery, New York\nWall. Text.   Mural for Phoenix Art Museum     Phoenix, AZ\nMatt Magee:   *\u003e][\u003c’.’’-,}.*|     Phoenix Art Museum    Phoenix, AZ"} /-->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

    The block template looks like this:

    <div class="mm-year"><?php block_field( 'mm-year' ); ?></div>
<div class="mm-exhibition"><?php block_field( 'mm-exhibitions' ); ?></div>

    Block css looks like this:

    .mm-year {
    float: left;
    margin-right: 30px;
    clear: both;
    width: 10%;
}

.mm-exhibition {
    float: left;
    width: 80%;
}

    Any ideas as to what is causing this? One thing I’m noticing is that there is no HTML in the custom block viewed in code editor. Perhaps the WP editor is unable to determine it as a separate field if there is no HTML tag?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Ryan Kienstra

    (@ryankienstra)

    Hi @whipkey,
    Thanks for letting us know about that, it sounds frustrating ??

    Would you be able to open a bug report?

    https://github.com/getblocklab/block-lab/issues/new?template=bug_report.md

    You gave a great description of the bug here.

    It’d be great if you could also add a screenshot or video of:

    1. Before clicking away, when the blocks look good
    2. After clicking away, when the custom block no longer appears

    Thread Starter whipkey

    (@whipkey)

    I was able to resolve it. I had to place the previous HTML in the template inside of a container div. After that the container had no height because the child elements were floating, which causes any sibling element to be relative to it at the same position. So I also had to add a clearfix hack to that container:

    .mm-exhibition-container:after {
  content: " ";
  display: block;
  clear: both;
}
    Plugin Author Ryan Kienstra

    (@ryankienstra)

    Ah, great to hear you figured it out!

    Thanks a lot for using Block Lab, have a great rest of the week.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Block is merged into next block in editor’ is closed to new replies.