-
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
Styles: try wrapping with :root to fix reset styles #61638
Changes from 1 commit
15a2337
d92a459
6994969
898ee0e
4d0b150
04cb931
3f07cf7
177bd01
4b43232
b278d7f
e617223
f14f4c1
92b680c
23c538a
9f6226d
3781d7e
089a9b4
497ef7d
545ead6
6f12810
f010443
46a95c3
58daed1
5b079e4
cff5380
66cb8f3
362d2ae
06f8857
da3b222
b73cffe
01c33e3
df10d13
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
…-1-0 specificity
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,6 @@ | |
@include caption-style-theme(); | ||
} | ||
|
||
:root :where(.wp-block-audio) { | ||
.wp-block-audio { | ||
margin: 0 0 1em 0; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,6 @@ | |
@include caption-style-theme(); | ||
} | ||
|
||
:root :where(.wp-block-embed) { | ||
.wp-block-embed { | ||
margin: 0 0 1em 0; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,6 @@ | ||
// Adding `figure` to the selector increases the specificity above the global | ||
// styles specificity, which is levelled at 0-1-0. We should figure out why | ||
// `figure` is needed. | ||
:root :where(figure.wp-block-gallery) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I just added |
||
// Override the default list style type _only in the editor_ | ||
// to avoid :not() selector specificity issues. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,6 @@ | |
@include caption-style-theme(); | ||
} | ||
|
||
:root :where(.wp-block-image) { | ||
.wp-block-image { | ||
margin: 0 0 1em 0; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,7 @@ | ||
// Same as the group block styles. | ||
:root :where(.wp-block-template-part) { | ||
&.has-background { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems we previously did have some specificity left here. We should make sure it tests well now. |
||
// Matches paragraph Block padding | ||
padding: $block-bg-padding--v $block-bg-padding--h; | ||
margin-top: 0; | ||
margin-bottom: 0; | ||
} | ||
:root :where(.wp-block-template-part.has-background) { | ||
// Matches paragraph Block padding | ||
padding: $block-bg-padding--v $block-bg-padding--h; | ||
margin-top: 0; | ||
margin-bottom: 0; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,6 @@ | |
@include caption-style-theme(); | ||
} | ||
|
||
:root :where(.wp-block-video) { | ||
.wp-block-video { | ||
margin: 0 0 1em 0; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should the
.wp-block-embed figcaption
rule at the top of this file have lowered specificity?Rather than adding
:root
to each individual rule or removing:where
, I thought it might be better to do something like this:This way everything is consistent.
I realize it's the same specificity as just a classname, but it makes it easier for anyone modifying the css to maintain the same specificity.
In the future if we ever need to implement layers, we can replace the
:root
with@layer name
, or if we want to reduce specificity to zero we remove the:root {}
wrapper.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd say so. A rough rule could be "anything that is configurable via global styles should be".
At a glance that mixin touches
color
andfont-size
rules and captions are now a configurable element in Global Styles.Sounds good to me. I'm still working through the impacts this PR will have on #61032 and haven't gone through all the block styles yet.
My understanding is this PR has only tweaked what was changed in the original zero-specificity PRs which has proven to be somewhat incomplete. There was some discussion that we needed a complete audit of all the block styles once everything settled.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One possible issue with the suggested approach to nesting
:root
and:where
like that is it might encourage people to think they can still just nest the next selector within the:where
when they really have to define the entire selector or make the nested selector chain another:where()
e.g.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, it gets a bit much doesn't it. 😬
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had a look at this suggestion, but it becomes convoluted with some of the more complex selectors, so probably best to keep it simple right now.