-
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
File, Search Blocks: Lower CSS specificity #41393
Conversation
Size Change: -701 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
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.
This works for me when using emptytheme and those theme.json settings 👍 I think the use of :where
works well here too.
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.
🧇 great! @MaggieCabrera can we add a comment for
* + .wp-block-file__button
and :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper)
explaining how we want to lower specificity and for what reason? Given someone may come back to this months later it's easy to no understand what's up with this solution.
Similar to how we do here in the paragraph
block.
I´m not changing |
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.
LGTM 🚢
Could the Search block's wrapper have a higher specificity? As noted on Trac 60164, the old CSS reset removed border and padding on any Using two elements could be enough:
|
What?
Lowers the CSS specificity for the File and Search Block selectors
Why?
The high specificity of these selectors are overriding the newest addition to the elements API (the buttons), pointed out here and here.
How?
I'm trying to remove unneeded selectors and used :where when I wasn't sure about what I could remove without breaking other stuff
Testing Instructions
I've tested this using emptytheme, with the following markup:
And in the theme.json file I have this:
Screenshots or screencast
With the theme.json changes:
Without the theme.json changes:
/cc @WordPress/block-themers