-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Block background color styles: an overview #43110
Comments
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.
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)? |
Just wondering if you can you override the |
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:
And other issues are being affected by it:
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
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
The text was updated successfully, but these errors were encountered: