Group Block: Missing default block gap when they are inside other blocks

[iamtakashi]

Description

It seems the default block gap is missing when they are inside other blocks such as a Column, a Media & Text, and a Cover block. I expected to have the same gap regardless of the location.

This is happening in both the editor and the front of the site. I've tested with Twenty Twenty Two and Blockbase and it doesn't seem related to the themes.

Step-by-step reproduction instructions

1. Add a few group blocks
2. Add some paragraphs inside the group blocks
3. (Bonus) Add a border to each group block to help see the issue
4. Copy all the group blocks and put them in a column block

Feel free to use the snippet to test the case.

Screenshots, screen recording, code snippet

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

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

<!-- wp:paragraph -->
<p>Even before the advent of printing, the visual appearance of poetry often added meaning or depth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:paragraph -->
<p>Even before the advent of printing, the visual appearance of poetry often added meaning or depth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:paragraph -->
<p>Even before the advent of printing, the visual appearance of poetry often added meaning or depth.</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 {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1646904043595-5c3f6b0fe13b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2848&amp;q=80" alt=""/></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">Groups inside a column</h2>
<!-- /wp:heading -->

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

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Even before the advent of printing, the visual appearance of poetry often added meaning or depth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:paragraph -->
<p>Even before the advent of printing, the visual appearance of poetry often added meaning or depth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:paragraph -->
<p>Even before the advent of printing, the visual appearance of poetry often added meaning or depth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Editor

Front of the site

Environment info

• V5.9.1.
• With the Gutenberg 12.8.0-rc.1
• Twenty Twenty Two, Blockbase
• Chrome, Mac

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Smit2808]

Hi @iamtakashi

I reproduce this issue and yes it's happening. But it is only happening in theme Twenty Twenty-Two. It is not happening in any other themes and there is one variable named vertical-spacing for top margin in Twenty Twenty-One theme. This variable is not present in Twenty Twenty-Two theme and this variable is present in other themes like Twenty Twenty-One. So the issue is happening just because it has no margin-top with variable vertical spacing.

So I think is not a Gutenberg issue. This is an issue of theme so this should be reported in the wp core tickets list.

[iamtakashi]

Hi @Smit2808

Thank you so much for the info! I can confirm the issue isn't happening with Twenty Twenty-One. It seems indeed the issue with the themes I tested. I'll report this accordingly.

[ocean90]

@iamtakashi This is/was actually an issue with Gutenberg which is now also fixed by #39422 as it enables the layout setting for the column block. That setting also ensures that the gaps are set between the blocks.

With the current trunk version of Gutenberg you now get this:

[iamtakashi]

Hi @ocean90!

Thanks for the info. I was actually scratching my head as I was no longer able to reproduce the bug with those themes. The mystery was solved. Thank you so much again.