Block background color styles: an overview

[tellthemachines]

Description

When we add a background color to a block, padding also gets added to it. This comes from the base styles for the blocks themselves (so the style.scss file for each block in the block library).

There are a bunch of issues already open about this behaviour:

• Feedback: It is confusing that adding background color also adds padding. #30725
• Full Site Editor: Applying background color also updates content padding #36586
• Block Styles: Layout changes when selecting background colors. #36971

And other issues are being affected by it:

• Spacing presets: add editor UI support #42173 (comment)
• Root padding is doubled on child blocks #43095 (comment)

Additionally, setting a child of a block with background color to full width doesn't work:

(This is with Empty theme; other themes may have added custom styles to work around this problem. But they shouldn't have to.)

The main reason I'm opening a new one is, firstly, to consolidate all the reports in one place, and secondly in hope that we can find a way forward.

The styles in question already have very low specificity, so they are easy to override, but the main problem in a block theme scenario is that because they come from a stylesheet, we have no way of knowing their value, so we're unable to take them into account when exposing padding controls (which is the problem in #42173) or when generating alignment styles (the problem with the full width block above).

Ideally, we wouldn't output these styles at all, at least for block themes. One idea would be to move them to a classic-only stylesheet.

Ideas and concerns appreciated!

(I'm labelling this as a bug because it causes buggy behaviour in some circumstances, though it is a known "feature".)

Step-by-step reproduction instructions

1. Using Empty theme
2. Add a Group block to a post and set a background color on it
3. Set the Group layout to use theme content width (this enables its children to be full width)
4. Add an Image inside the Group and set it to full width
5. Verify that the Image doesn't stretch to full width of its parent.

Also check the reproduction scenarios on the linked issues!

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[jasmussen]

These rules came at a time when custom padding controls didn't exist, to ensure the color experience was nevertheless considered. I agree they provide a challenge in todays landscape.

Ideally we can reach a point where this can be solved in a grander way. For example where any default padding that’s applied, whether on a paragraph with a background or otherwise, has that applied because Global Styles tells it to, and has values you can customize globally or locally, either by the step multiplier or on a per block basis. I still think it might be a good default to have, that adding a background also adds padding. But the precise behavior should be entirely configurable, by theme and editor.

The biggest near-term challenge as I see it, is that content exists out there which relies on this behavior. So if we're going to change it, we need some way to provide those old behaviors to existing or old themes/content. A split between classic and block themes may be a path forward, but even block themes might rely on this behavior; perhaps Global Styles needs to be able to handle the default behavior first, before the fallback is removed? Curious about creative ideas on this one.

Add an Image inside the Group and set it to full width
Verify that the Image doesn't stretch to full width of its parent.

I recall a "global padding" conversation we had around TwentyTwentyTwo and the way it provided some full-width top level patterns that were meant to still be able to have full width content inside.

The challenge there was to be able to provide a default padding for content inside that wasn't full-width.

I wonder if this same "global padding" value could be leveraged for has-background contexts, and then have this known padding be compensated for by full-width elements (via negative margins or otherwise)?

[chrisrhymes]

Just wondering if you can you override the .has-background class styles in the theme.json? This way, theme developers can decide if they want the .has-background class to add padding or not, as well as adjust the values.