Try: Mitigate CSS inheritance from wp-block auto margins #28878
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jasmussen
added
[Block] Buttons
6 tasks
|
Size Change: +10 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
7 tasks
|
@youknowriad is this one obsolete with some of the inheritance work, or FSE alignment refactoring that you are doing? |
|
yes, I think this is not needed anymore with the FSE alignments PR. |
|
Thank you, closing this one in favor of the new stuff 💯 |
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently this CSS is output in the editor:
It was added a long time ago to help enable a centered column, by combining automatic left and right margins, with a max-width, enabling wide and fullwide in the process. It has since (#21971) been tweaked.
But in an editor that supports any level of nesting, it is increasingly problematic that every block, regardless of level, is born with automatic left/right margins.
In other words, the way it's being handled currently, is to override and add specificity where a margin other than
autois needed. But it's not intuitive, and it's building up a little technical debt.In this PR, I tried to keep the spirit of the initial code, but both reduce the specificity and mitigate some of the overriding. Specifically this PR keeps the auto margin, but with lower specificity, and then overrides that to
initialfor nested blocks.I believe blocks still have to override the margin if they want a margin other than the default one elements come with, but it should require less specificity to do so.
Another option I pondered was this one:
... but that would have added even more specificity, even if only for the top level blocks. So ultimately I went with the softer solution.
I have a feeling that the longer term and better solution is to address #20650, and to abstract away the centered column into a product of CSS classes that can be toggled by themes. But in the mean time, is this a good holdover?
If yes, the next step I'd take is to reduce and unify some of the CSS written for the Navigation Menu Item, so we don't have to repeat the margin in 3 places for example. The margin rules for Buttons could potentially also be relaxed, and it will no doubt benefit Social Links.
To test:
Something to look for in particular, are blocks that use
display: flex;, where auto margins cause magical things to happen. So test Buttons, Navigation, Social Links.Any block that is nested should look the same, but it's worth testing. So group, media & text and others.
Because this touches somewhat sensitive code, it would be good to get a lot of eyes on it.
Checklist: