Appender interferes vertical alignment in Editor

[iamtakashi]

Describe the bug
Consider this pattern that uses Buttons block. The column block there is set to Vertically Align Middle, but it's clearly not working as expected because of the appenders in the Buttons block.

Screenshots

Apart from this particular example, we need a new approach to show appenders because

• They also interfere alignments horizontally. Buttons block: center-aligned buttons aren't exactly centered in the editor due to (invisible) appender #21805
• Too many appenders show up with nested blocks

Expected behaviour
The elements there being vertically aligned middle as the option says.

To reproduce
Feel free to use the markup to test.

<!-- wp:group {"align":"full","backgroundColor":"accent","textColor":"background"} -->
<div class="wp-block-group alignfull has-background-color has-accent-background-color has-text-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":28,"lineHeight":"1.2"}}} -->
<p style="line-height:1.2;font-size:28px"><strong>Date:<br></strong>May 28, 2021</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":28,"lineHeight":"1.2"}}} -->
<p style="line-height:1.2;font-size:28px"><strong>Time:<br></strong>12:00 PM(UTC)</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":28,"lineHeight":"1.2"}}} -->
<p style="line-height:1.2;font-size:28px"><strong>Duration:<br></strong>60 Minutes</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":3,"style":{"color":{"text":"#ffffff"}},"backgroundColor":"primary"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-primary-background-color has-text-color has-background" style="border-radius:3px;color:#ffffff">Register now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

Theme:
Twenty Twenty

Editor version:

• WordPress version: 5.4.2
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 8.6.1

Desktop:

• OS: Mac
• Browser: Chrome
• Version: 84.0.4147.89

[iamtakashi]

Related:

• Inserter: Reveal surrounding block inserters on block hover/selected states #22867
• Overhaul sibling inserter to only appear after a selected block #13571

[ellatrix]

Hi @iamtakashi! Yes, in-content appenders have been a headache for a while now. Ideally we need to place them at the right position with a popover, so it doesn't push down any content. I've been working on a PR for this, but it still needs some polish.