Site Editor: Can't remove group block margins

[jeyip]

Description

When adding group blocks to the site editor, there's always an accompanying top margin. There doesn't appear to be an obvious way to remove it.

I stumbled across this issue while building a test site for the editor. I wanted add group blocks to the top level document to organize my page layout, but the margins kept introducing unwanted white space.

Step-by-step reproduction instructions

1. Enable full site editing by activating the Gutenberg plugin and an FSE enabled theme (Ex. Quadrat)
2. Navigate to the site editor
3. Add a group block
4. Add content into the group block for easier manipulation and visibility
5. Verify from the dev console that there is an additional top margin added to the block
6. Navigate to the site's frontend
7. Verify from the dev console that there is also an additional top margin for the group block

Screenshots, screen recording, code snippet

Frontend

Site Editor

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

[carolinan]

Are you confident that this is not the blockGap?

[jeyip]

@carolinan If you're describing classname styling, then you're completely right. I do see a top gap described as --wp--style--block--gap.

If you're talking about using the block gap settings feature, from my understanding, it handles the spacing between items within a block. https://wp.me/p2AvED-nIl

From what I can tell, the margins described in this issue are appearing on the group block itself, and not a result of its children. I'm also unable to find a block gap settings option for the group block.

[carolinan]

BlockGap adds spacing both on top of a block and horisontal spacing between inner blocks, if inner block support has been added, like with the columns.

https://github.com/WordPress/gutenberg/pull/33812/files#diff-324697e41855298e2f2c74b078f174e0cbc9075cef736ce9c1e2c169bf64652eR66

A while back I opened an issue about adding documentation for blockGap because it is confusing -Nobody was able to pick that up so I started a PR myself.
-I did not see until now that it was merged yesterday:
#36558
If it is not correct it needs to be updated. I think @youknowriad would be the best person to answer about blockGap?

[jeyip]

Thanks for the context Carolina!

[youknowriad]

If that group block is a top level item, than it's expected, the gap between blocks is added using margins (top margins) because there's no "gap" support in regular divs (no flex or grid).

That said, we do have a related that is being worked on here #36680

[ndiego]

A little later to the party here, but as @youknowriad mentioned, this is due to blockGap. I believe the simplest solution is to just add margin control to the Dimensions UI for Group blocks. Then blockGap can be easily overridden as needed. blockGap is awesome most of the time, but not always 😉

[annezazu]

This came up in the eleventh call for testing for the FSE Outreach Program:

The biggest issue I hit was with the Group block. By default, the Twenty Twenty-Two theme adds an 8rem (that’s pretty big) bottom margin to one of the Groups within the header area. That pushes everything on the page after it down. The trouble is that there is no way to customize that space because the block still does not support margins. I ended up adding an intro section to balance out all of the whitespace between the header and content areas.

Noting here as a more explicit +1 to Nick's suggestion to add this to the Dimensions UI for the Group block!

[ndiego]

@annezazu I just created #37344 that adds margin support for Group blocks 😉

[annezazu]

Noting that a recent PR was closed related to this experience: #37105 TLDR: the spacer block is seen as the interim solution for now. Going to leave this open to revisit in the future though.

[gingerling]

Hi, just wanted to add that this is a confusing and difficult issue for people who wish to add contrasting colour blocks or have two blocks with different colours next to each other, for example.

I was quite confused at first because it seems in the editor like this white line is just the gap where you're to click to add a new block

But on the font end we get this:

Where there is a white line between our colour blocks. (Messing about with colours, not an actual design folks!)

So if a designer wanted to have different colour blocks together, perhaps mixing pale and dark colours, they would have this white line interruption.

I did find that changing

"spacing": {
"blockGap": "1.5rem"
},

in the .json file in the theme folder to 0.rem effectively solves the issue, but I was expecting something a little less technical and also in a way it's also ugly as the gap adds space and room and is pleasant, it just needs to be the same colour as the block (below, I guess?)