Skip to content
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

Merged
merged 32 commits into from
May 28, 2024
Merged
Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
15a2337
Styles: try wrapping with :root to fix reset styles
ellatrix May 14, 2024
d92a459
Adjust based on #59457
ellatrix May 14, 2024
6994969
Fix php unit tests
ellatrix May 14, 2024
898ee0e
Fix js tests
ellatrix May 14, 2024
4d0b150
Add a basic test for overriding reset styles
ellatrix May 14, 2024
04cb931
Add test for global styles override
ellatrix May 14, 2024
3f07cf7
Don't add :root :where for single classes, because they are already 0…
ellatrix May 14, 2024
177bd01
Try adding :root to layout stykes
aaronrobertshaw May 22, 2024
4b43232
Reduce block style variation selector specificity to 0-1-0
aaronrobertshaw May 23, 2024
b278d7f
Update block style variation selectors in global styles hook
aaronrobertshaw May 23, 2024
e617223
Try applying :root :where selectors for custom css
aaronrobertshaw May 23, 2024
f14f4c1
Add backport log entry
ellatrix May 23, 2024
92b680c
Move block style variation styles to after block styles
aaronrobertshaw May 24, 2024
23c538a
Update button styles
aaronrobertshaw May 23, 2024
9f6226d
Update image styles
aaronrobertshaw May 23, 2024
3781d7e
Update pullquote styles
aaronrobertshaw May 23, 2024
089a9b4
Update separator styles
aaronrobertshaw May 23, 2024
497ef7d
Fix separator dots style
aaronrobertshaw May 23, 2024
545ead6
Update site logo styles
aaronrobertshaw May 23, 2024
6f12810
Update social link styles
aaronrobertshaw May 23, 2024
f010443
Add comment explaining table selector
aaronrobertshaw May 23, 2024
46a95c3
Update tag cloud styles
aaronrobertshaw May 23, 2024
58daed1
Fix Cover styles blocking global styles
aaronrobertshaw May 24, 2024
5b079e4
Fix image caption styles
aaronrobertshaw May 24, 2024
cff5380
Fix latest posts padding styles
aaronrobertshaw May 24, 2024
66cb8f3
Fix list block's has-background padding
aaronrobertshaw May 24, 2024
362d2ae
Fix paragraph block's has-padding style
aaronrobertshaw May 24, 2024
06f8857
Fix site title link colors
aaronrobertshaw May 24, 2024
da3b222
Revert "Fix paragraph block's has-padding style"
aaronrobertshaw May 27, 2024
b73cffe
Revert "Fix list block's has-background padding"
aaronrobertshaw May 27, 2024
01c33e3
Fix additional issues with latest posts padding
aaronrobertshaw May 28, 2024
df10d13
Fix enforcement of no borders or background for dots separator
aaronrobertshaw May 28, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Don't add :root :where for single classes, because they are already 0…
…-1-0 specificity
  • Loading branch information
ellatrix authored and aaronrobertshaw committed May 26, 2024
commit 3f07cf76ffb48f96eb33d9b4304fd3897c313397
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/theme.scss
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;
}
8 changes: 2 additions & 6 deletions packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
:root :where(.wp-block-cover-image, .wp-block-cover) {
min-height: 430px;
padding: 1em;
}

.wp-block-cover-image,
.wp-block-cover {
min-height: 430px;
padding: 1em;
position: relative;
background-position: center center;
display: flex;
2 changes: 1 addition & 1 deletion packages/block-library/src/embed/theme.scss
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 {
Copy link
Contributor

@talldan talldan May 23, 2024

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:

:root {
    :where(.wp-block-embed) {
        // ...
    }
}

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.

Copy link
Contributor

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?

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 and font-size rules and captions are now a configurable element in Global Styles.

Rather than adding :root to each individual rule or removing :where, I thought it might be better to do something like this:

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.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw May 23, 2024

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.

:root {
    :where(.wp-block-button) {
        // ...
        &:where(> .wp-block-button__link) {
            // ...
        }
    }
    :where(.wp-block-button > .wp-block-button__link) {
        // ...
    }
}

Copy link
Contributor

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. 😬

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:root {
:where(.wp-block-embed) {
// ...
}
}

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.

margin: 0 0 1em 0;
}
3 changes: 3 additions & 0 deletions packages/block-library/src/gallery/editor.scss
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) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just added :root as a precaution here to make sure this overrides any reset styles.

// Override the default list style type _only in the editor_
// to avoid :not() selector specificity issues.
2 changes: 1 addition & 1 deletion packages/block-library/src/image/theme.scss
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;
}
4 changes: 1 addition & 3 deletions packages/block-library/src/pullquote/theme.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
:root :where(.wp-block-pullquote) {
.wp-block-pullquote {
border-top: 4px solid currentColor;
border-bottom: 4px solid currentColor;
margin-bottom: 1.75em;
color: currentColor;
}

.wp-block-pullquote {
cite,
footer,
&__citation {
2 changes: 1 addition & 1 deletion packages/block-library/src/quote/theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:root :where(.wp-block-quote) {
.wp-block-quote {
border-left: 0.25em solid currentColor;
margin: 0 0 1.75em 0;
padding-left: 1em;
2 changes: 1 addition & 1 deletion packages/block-library/src/social-links/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:root :where(.wp-block-social-links) {
.wp-block-social-links {
// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;

6 changes: 2 additions & 4 deletions packages/block-library/src/table/theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.wp-block-table {
margin: 0 0 1em 0;

td,
th {
word-break: normal;
@@ -8,7 +10,3 @@
@include caption-style-theme();
}
}

:root :where(.wp-block-table) {
margin: 0 0 1em 0;
}
12 changes: 5 additions & 7 deletions packages/block-library/src/template-part/theme.scss
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 {
Copy link
Member Author

Choose a reason for hiding this comment

The 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;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/video/theme.scss
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;
}