-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Layout: Reduce specificity of flex and grid margin overrides #50825
Layout: Reduce specificity of flex and grid margin overrides #50825
Conversation
Size Change: 0 B Total Size: 1.4 MB ℹ️ View Unchanged
|
This appears to mostly be working, except for a conflict with |
Flaky tests detected in cbf2d0c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5042499887
|
Thanks for spinning up this PR so quickly @andrewserong 🚀 I can confirm it does fix the original issue flagged via #45196 (review).
The catch with the If we can't lower the specificity of the classic margin auto styles, could we reintroduce the layout styles at a higher specificity in Something to explore perhaps, what do you think? |
Thanks for taking a look, Aaron! 🙇
Worth trying, especially since this is all about just a single rule! I have a few other tasks to focus on this week, so might not have much time to immediately work on this PR, but I'll come back to it 👍 |
Understood, I'm in the same boat. FWIW I've given the following snippet a quick run by appending it to I don't think I have a full grasp on all the ins and outs of the layout support styles so there's every chance I've missed something. I'll happily wait until you have a chance to revisit this, then I can test and review again. /**
* Layout Styles
*/
.editor-styles-wrapper {
.is-layout-grid > *,
.is-layout-flex > * {
margin: 0;
}
} |
Related: Trac 60080 |
This PR is pretty old now, and there are specificity reduction efforts happening elsewhere, so I'll close this PR out for now. |
In Classic themes, the
classic.css
file includesmargin-left: auto
andmargin-right: auto
rules. Reducing the specificity of the margin overrides for flex rules causes an issue in the block editor for the social icons block — the individual social icons blocks with this PR applied have margin rules applied that override the now reduced rule. Here's a screenshot of how it currently looks:What?
Reduce the specificity of the
flex
andgrid
layout type margin overrides, for consistency with theflow
andconstrained
layout types.This resolves an issue where flex and grid layout types have margin override specificity that interferes with setting margins at the block level in global styles.
Why?
As reported in #45196 (review) the flow and constrained layouts currently allow block-level-in-global-styles rules to override general layout styles. However,
flex
andgrid
don't have that lower level of specificity for theirmargin: 0
rules. From a little digging, it appears that the solution back in #47858 was to reduce specificity for thespacingStyles
rules for each layout type. However, theflex
andgrid
layouts had their overrides inbaseStyles
, which doesn't include the extra:where()
rule to lower the specificity. The fix is to move the margin overrides for these two layout types over tospacingStyles
.How?
margin: 0
override rules forflex
andgrid
layout types over tospacingStyles
so that they receive the lower specificity rules introduced in Try reducing specificity of layout margin rules #47858.The difference in output of rules is:
Becomes:
Testing Instructions
50px
A question / note to the reviewer: the
flex
andgrid
rules, in contrast to flow/constrained, do not do anything about resetting margins for first/last items. I think that's likely preferable due to how these layout types work, but I'm curious what folks think. Is the change in this PR the desired approach for these layout types?Testing Instructions for Keyboard
Screenshots or screencast
Prior to this PR, the margins would only look correct in the site editor, but not on the site frontend. So for these before/after screenshots, we're looking at the site front end: