Cover Block missing margin in dimensions panel

[bradhogan]

Description

The cover block has padding, but not margin. It's helpful to eliminate the margin above and/or below a cover block in certain design cases. For example, if you have multiple cover blocks in a row with different background colors, it looks odd if you have the default theme blockgap in between each. For now, I add a class mt-0 or mb-0 but would love to see Margin added to the Dimensions panel.

Thanks!

Step-by-step reproduction instructions

1. Add cover block with a black background
2. Add second cover block right after with a red background
3. Notice space in between with no way to remove the margin

Screenshots, screen recording, code snippet

Environment info

• WP 6.0
• Gutenberg 13.4.0
• Mac
• Chrome

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

[akasunil]

Block dimension are used to manipulate block inner design, we cant set margin around the block with block setting. it should be handled by custom class as you have did.

[bradhogan]

@sunil25393 Headings have a margin option as well which is not an inner design. I have to imagine I'm not the only designer who uses consecutive cover blocks and while it's easy for me to add a class like mt-0 or mb-0 in the Advanced panel, it's not intuitive for an end-user without design/dev experience to do so.

[HILAYTRIVEDI]

I think it's an easy feature addition as in the latest versions of the Gutenberg by only adding the support for the Gutenberg in the block.json file will do the work. I tested that.

"spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true }, "margin": true }

This will do the work.

[akasunil]

@bradley2083 please check 33835 for more details.

[bradhogan]

@HILAYTRIVEDI can you share your full block.json code? Where are you placing that, just in the main theme directory along with theme.json?

[bradhogan]

@sunil25393 Yes, it seems as those multiple people were in favor of adding margin, then it got put on hold. Again, this is a UI issue when adding multiple / consecutive cover blocks. Most modern designs include this at some point in a design so it's odd that we wouldn't want to give WordPress creators an easy solution to preventing an odd margin between two heros/covers.

[ramonjd]

Hi folks!

As @sunil25393 mentioned, there was a previous PR to implement margins for cover block. There was, however, some uncertainty with how it would co-operate with the UI controls.

@jasmussen What do you think? Are those concerns still valid? Or does the benefit of controlling the top and bottom margins of cover blocks outweigh them at this stage?

It looks like the visualizer is looking better since #40505

I've optimistically added a PR to add it back in #41963 😄

[bradhogan]

Definitely not ideal, but here's what I'm adding to my theme for the time being until this gets added (fingers crossed).

.wp-block-cover + .wp-block-cover {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}