-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Reduce specifity of social link icon specific colors #63049
Reduce specifity of social link icon specific colors #63049
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
@talldan Using Playground, I just tested to see if the removal of !Important leaves the social icons styled as expected. Confirmed, and works! Possible we get this into RC2? |
Size Change: +37 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
Here’s a video of me removing the 3 instances of !important in CSS generated by theme.json: Screen.Recording.2024-07-02.at.5.50.42.AM.mp4 |
I just cherry-picked this PR to the wp/6.6 branch to get it included in the next release: 8520507 |
Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: bgardner <bgardner@git.wordpress.org>
What?
Reduces the specificity of the social links block background and foreground colors to 0,1,0.
Why?
This allows colors defined in the theme.json block
css
property to override the default block css.How?
Wraps the selector in
:where
which results in the generated css having selectors like:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-behance
compared to the previous output of.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-behance
.Testing Instructions
styles.blocks
object:Screenshots or screencast
In trunk (no silver background or red icon):
![Screenshot 2024-07-02 at 6 36 04 pm](https://cdn.statically.io/img/private-user-images.githubusercontent.com/677833/344987702-3fd0ac23-6e8b-45ad-a7d2-4ccaaae8680c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5MTQ2NTUsIm5iZiI6MTcyMjkxNDM1NSwicGF0aCI6Ii82Nzc4MzMvMzQ0OTg3NzAyLTNmZDBhYzIzLTZlOGItNDVhZC1hN2QyLTRjY2FhYWU4NjgwYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwNlQwMzE5MTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MGFkNDg0MzExM2NlZTg2MmNkNjFmYjU1MjE2ODdkZGQ5Y2RlMTI0MDE5ZmNmOGZmMjJjODQ2YmZlZDhkMDA4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.9p16lHZuVk6gEsyyaCG2IgLlJzfIG0Ht6K2PLCrL_2A)
In this PR (silver background and red icon):
![Screenshot 2024-07-02 at 6 35 39 pm](https://cdn.statically.io/img/private-user-images.githubusercontent.com/677833/344987810-0845d3eb-cfb6-49c0-81d7-794daf80a725.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5MTQ2NTUsIm5iZiI6MTcyMjkxNDM1NSwicGF0aCI6Ii82Nzc4MzMvMzQ0OTg3ODEwLTA4NDVkM2ViLWNmYjYtNDljMC04MWQ3LTc5NGRhZjgwYTcyNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwNlQwMzE5MTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01MzRjZmYxZmE0MzAzZWI0MTU0MjYyNTEwNGJiYjc0MDg2OGNkOTRhNmFkNWY5ZDkyOGM5ZTA4YWVjNmNiMjc5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.kR4dJf9vKIOtle-BzGAJfe6fb-AmY_8qz1nZHVfXMDo)