Blockbase: Inconsistent vertical margin for group block

[iamtakashi]

Steps to replicate

• Add a few group blocks
• Add some paragraphs inside the group blocks
• Bonus: Add a border to each group block to help to see the issue
• Copy all the group blocks and put them in a column block

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0px"}}}} -->
<h2 style="margin-top:0px">Menu</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"border":{"width":"1px"}},"borderColor":"vivid-red"} -->
<div class="wp-block-group has-border-color has-vivid-red-border-color" style="border-width:1px"><!-- wp:paragraph -->
<p><strong>Chicken Sandwich</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Cajun chicken breast with lettuce and tomato on a freshly toasted bun.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>$8.00</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px"}},"borderColor":"vivid-red"} -->
<div class="wp-block-group has-border-color has-vivid-red-border-color" style="border-width:1px"><!-- wp:paragraph -->
<p><strong>Veggie Burger</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A delicious, soy, boca patty, served on a freshly toasted, whole-wheat bun.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>$8.00</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px"}},"borderColor":"vivid-red"} -->
<div class="wp-block-group has-border-color has-vivid-red-border-color" style="border-width:1px"><!-- wp:paragraph -->
<p><strong>Awesome Burger</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The burger that made us famous. 100% pure lean beef grilled to perfection.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>$8.00</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":150,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://patternboilerplates.files.wordpress.com/2022/03/max-van-den-oetelaar-t3urjucymg-unsplash-landscape-portrait.jpg?w=683" alt="" class="wp-image-150"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0px"}}}} -->
<h2 style="margin-top:0px">Menu inside a column</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"border":{"width":"1px"}},"borderColor":"vivid-red"} -->
<div class="wp-block-group has-border-color has-vivid-red-border-color" style="border-width:1px"><!-- wp:paragraph -->
<p><strong>Chicken Sandwich</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Cajun chicken breast with lettuce and tomato on a freshly toasted bun.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>$8.00</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px"}},"borderColor":"vivid-red"} -->
<div class="wp-block-group has-border-color has-vivid-red-border-color" style="border-width:1px"><!-- wp:paragraph -->
<p><strong>Veggie Burger</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A delicious, soy, boca patty, served on a freshly toasted, whole-wheat bun.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>$8.00</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px"}},"borderColor":"vivid-red"} -->
<div class="wp-block-group has-border-color has-vivid-red-border-color" style="border-width:1px"><!-- wp:paragraph -->
<p><strong>Awesome Burger</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The burger that made us famous. 100% pure lean beef grilled to perfection.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>$8.00</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Result

The group blocks inside a column block don't have any gap between them. This is seen in both the editor and the front of the site.

Expected

Consistent behaviour regardless of where the group blocks are.

TT2 also has the same issue, and it's probably better to be standardised in the plugin. If I imagine themes do different things about that, it can get very messy. If this needs to be reported in the plugin, let me know and feel free to close this.

[pbking]

I see that the margin-top: var( --wp--style--block-gap ); that should be present for children of the column is missing. It seems to be applied to the wp-block-columns element (the parent containing the columns) but not the wp-block-column elements themselves.

This is a gap in the Gutenberg plugin (pun intended) and should be addressed there.

[iamtakashi]

@pbking Thanks for confirming! I'll report this there.

[iamtakashi]

After reporting this in the Gutenberg repo, it turned out an issue with Blockbase and Twenty Twenty-Two. I can confirm the issue is not happening with Twenty Twenty-one.

I'll report the issue in Trac for TT2, but I'll also reopen this as a Blockbase issue. let me know if there is anything that I can help.

[iamtakashi]

Spoke too soon. I can't now reproduce the issue with TT2 or Blockbase. I'm not entirely sure what has happened but it's all good now :)