'Block spacing' term is unclear - could be clearer to indicate it effects spacing between blocks inside element.

[uniquesolution]

Description

Block spacing setting for group block is not working in block editor in wordpress 5.9 RC1 version

When we provide a value in block spacing field of settings panel of a group block, it should follow that gap value and put top margin accordingly, but instead its not adding any css inline or through class, instead its using the default value of "blockGap" provided in the theme.json file.

It should overwrite the theme.json value and use the value we provide in "Block spacing" field.

Step-by-step reproduction instructions

1. In a page add a group block, then add another group block through insert after. You can also give different background color to each group to differential it from each other
2. Now check the page in frontend you will see a gap between the two group, the group gap is defined by the css generated by wordpress, that we define in theme.json using "blockGap" value, for example .wp-container-61d7f03e905db > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }
3. Now in the sidebar settings panel of the second group block, put the value 0 for "Block spacing" field, see this screenshot for example https://prnt.sc/26b0h0k
4. Now again look in frontend, the margin-top value should be now 0, but it still remain the same, because nothing overwriting css is being added. I have created a sample page to understand what kind of issue we get due to this problem https://uniquesweb.co.in/betatguten/testing-gap/, you can see in the grid I created using groups, and after first box, every box is getting a bit lower and are not aligned to each other.

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress version 5.9 RC1, with default theme twenty twenty two.

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

[andrewserong]

Thanks for opening up this issue @uniquesolution! The block spacing control is designed to control the spacing of the blocks within the group block rather than the space or margin surrounding the group block (margin support has been discussed previously in #37105 and #37344). In #37360 @youknowriad merged a fix for an outstanding issue raised in #36521 where adjusting the block spacing/gap did also affect the block's margin, which had unintended side effects.

In the link in https://uniquesweb.co.in/betatguten/testing-gap/ it looks like there's some other column-like styling at play there that's outside of the styling provided by Gutenberg? The group block currently uses the default layout that expects children to be stacked vertically, so that could be part of the reason for the styling conflict there.

If you need to override the margins for all children to be 0, one way to do it could be to wrap all of your group blocks in another group block and then set the spacing to 0. In the following screengrab, here's a quick demo of how the feature appears to be working currently for me on trunk:

Kapture.2022-01-11.at.16.24.09.mp4

Notes:

• Setting block spacing for a group block to any value has no effect on the space surrounding the block
• Setting block spacing adjusts the spacing between blocks that are children of the group block
• If we wrap all of our group blocks in another group block and then select the parent, we can adjust the spacing between all of the group blocks

Please let me know if I've missed anything in the scenario you've described!

[carolinan]

For the group block, I don't think that it is clear from the text label "block spacing" that this setting is for inner blocks,
compared to the buttons block where you already have an inner placeholder button.

[uniquesolution]

Yes @carolinan , you are right, the correct word should be "Inner block spacing" I think. In this particular case of group block.

[andrewserong]

"Inner block spacing" is an interesting idea. I'm also wondering if some of the dimension controls could benefit from an (i) icon / hover or help text to explain their usage in an unobtrusive way 🤔. Just linking another issue where consistent dimension controls across blocks is being discussed / tracked: #28356