Gutenberg - Margin controls on any block that involves layout

[nagpai]

What

Blocks like Cover block, Media and text block , do not have the provision to adjust margins ( especially top and bottom margins ) . That leads to awkward white gaps in layouts

Blocks seem to have padding controls, but not margin.

Why

Without this control user has to depend on CSS which defeates the purpose of Gutenberg / FSE making things code free.

context : 35742471-hc

How

Try adding two cover blocks one below other and check the gap between the two.

[kerrynicl]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Updated main description of report - No

📌 FINDINGS/SCREENSHOTS/VIDEO

📌 ACTIONS

• Marked as Triaged for Quality Squad review
• Feature request kept

[nagpai]

35898535-hc

Group blocks and paragraph blocks seem to have margin that cannot be controlled. Leading to awkward white spaces

[nagpai]

#35897506-hc

[carinapilar]

This seems to be similar to this other issue: https://github.com/Automattic/wp-calypso/issues/62782

As mentioned in the above comment, this also happens with Paragraph blocks, there's a gap on the top when using a paragraph with an image on the left (or on the right), for example:

This doesn't happen with older themes. The above was with Twenty Twenty-Two, but it works with Hemingway Rewritten.

And the issue is with that same margin-block-start: var( --wp--style--block-gap ); mentioned on the GH link above.

[daria2303]

One of the interactions about it: 5335066-zd-woothemes, had more in the past

[jordesign]

It looks as though this is related to the block_gap functionality Gutenberg - but if I'm honest - I can't tell if/where it is being worked on and/or if this is a core issue - or something Themes need to opt in to.

@annezazu can you provide any insight to if the issue mentioned here is something being addressed in core? Potentially related issues I see are:

• https://github.com/WordPress/gutenberg/issues/36797
• https://github.com/WordPress/gutenberg/issues/34716
• https://github.com/WordPress/gutenberg/issues/27315
• https://github.com/WordPress/gutenberg/issues/28356

[annezazu]

👋🏼 Hey hey!

Blocks like Cover block, Media and text block , do not have the provision to adjust margins ( especially top and bottom margins ) . That leads to awkward white gaps in layouts

This specifically relates to Consistent Dimension controls . Going a step further though, alongside the dimensions, the problem remains that there needs to be an easier way to reset block gap (as you can see discussed in this issue about adding margin support to the group block).

Can you all gather a few more examples/share more here @jordesign? From there, I can see about opening an overall adjacent issue to the consistent dimension controls one as adding controls is just one piece of this.

[SaxonF]

Some adjacent thinking and exploration surrounding a more complete set of layout tools here

[jeherve]

36074196-hc

Workaround - CSS

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5335066-zen
• [ ] 5502805-zen
• [ ] 5759835-zen

[annezazu]

@jordesign wanted to loop back on the above examples to see if we had a list of a few (3-4 ideally). No rush! Just looping back.

[devNigel]

I can see the similar gap between Group blocks, Headers and Footers. It is not possible to get rid of this space using editor features.

The gap is introduced by this CSS:

.wp-site-blocks > * + * {
    margin-block-start: 1.5rem;
}

Screenshot:

User report: 36590943-hc

• [ ] Follow up: 5502805-zd-woothemes

[Robertght]

@annezazu we might've lost this between the different channels. I've shared a list of my findings regarding similar experiences, but I'd say they don't all share the same factors here: pc4f5j-2dU-p2#comment-2805

https://github.com/Automattic/themes/issues/6197 https://github.com/Automattic/themes/issues/5578 https://github.com/Automattic/themes/issues/3453 - > https://github.com/WordPress/gutenberg/issues/28647 https://github.com/Automattic/themes/issues/3159 https://github.com/Automattic/themes/issues/5895

I'm not quite sure about this either, but looping in @pbking and @jeffikus for a second opinion on this.

[jordesign]

@annezazu - it's been tricky to find interactions around this - as the wording/description of the issue when dealing with users is pretty varied and generic (around gaps between blocks) but anecdotally I know I've run into it...

A specific case (from empathy testing) is in the home page of Pe8rBq-2-p2 where there is no way to close the gap between Cover blocks within the Query/Loop of the layout.

[annezazu]

Thank you all for trying to gather more of these! Let's keep this open and see if more items/specific use cases come up for a feedback style issue. For now, there's far more momentum around consistent dimension controls that should help resolve the original issue described here: https://github.com/WordPress/gutenberg/issues/43241 You can see what's planned for margin and blocks specifically here: https://github.com/WordPress/gutenberg/issues/43243

[cuemarie]

Thanks for weighing in on this @annezazu and @jordesign ! Based on the advice above, I'm marking this as triaged to keep open and on our radar for now. Thanks!

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[happychait]

User report 5759835-zen

[carinapilar]

This issue makes it impossible to create nice site sections with Cover blocks, which is a bummer. I was looking to create a shadow effect using 2 Cover blocks, to have a nice transition between blocks like this (example from a third-party theme not using Gutenberg):

Since this result isn't possible to achieve with one Cover block and its Gradient option, using 2 Cover blocks also isn't possible because of this gap issue, since this would be the result:

I would expect that adding zero to the blocks' padding would remove that space, but that doesn't happen.

[miksansegundo]

+1 for adding margin controls on template part blocks too because that would allow us to reset the global block gap as suggested in the issue https://github.com/WordPress/gutenberg/issues/47637.

See how the template part block gets the global block gap and cannot be removed because of the lack of margin controls:

For context, the padding controls were removed in Remove color, spacing, and layout options for Template Part block.