Featured Image Block: Reduce CSS specificity #64463
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The core/post-featured-image block has some styles which out specify CSS set in theme.json / the site editor. This breaks existing themes and makes overriding the styles confusing for people making new themes or using the site editor. This change reduces the specificity of all of the default featured-image block style rules.
dsas
added
CSS Styling
|
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. |
|
Size Change: +3.23 kB (+0.18%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
12 tasks
talldan
reviewed
Aug 14, 2024
|
Flaky tests detected in 0054b3e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10403114269
|
vcanales
requested review from
aaronrobertshaw,
andrewserong,
ramonjd and
talldan
aaronrobertshaw
approved these changes
Aug 23, 2024
There was a problem hiding this comment.
Thank you for iterating and your patience here @dsas 🙇
As noted in #64463 (comment), wrapping the block's class in :where() might still be reducing the specificity too far.
In the interests of getting a fix into WP 6.6.2, I've taken the liberty of pushing a small tweak here to align the specificity with Global Styles and its 0-1-0 specificity.
In addition to that alignment, it also might help as a guide for others when addressing internal element styles in the future. This is just a minor tweak and achieves the same result as seen below.
| Before (Editor) | Editor | Frontend |
|---|---|---|
aaronrobertshaw
added
the
Backport to WP Minor Release
bph
pushed a commit
to bph/gutenberg
that referenced
this pull request
Aug 31, 2024
Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
vcanales
pushed a commit
that referenced
this pull request
Sep 4, 2024
Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
talldan
added a commit
that referenced
this pull request
Sep 4, 2024
* Fix canvas issues by removing VisualEditor’s height (#63724) Unlinked contributors: wp-seopress. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> * Post Editor: Prevent popover from being hidden by metabox (#63939) * Post Editor: Prevent popover from being hidden by metabox * Use `.interface-interface-skeleton__content` instead of `.interface-interface-skeleton__body` Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> * Global Styles: Fix block custom CSS pseudo element selectors (#63980) Unlinked contributors: harlet. Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> * Avoid errors for post types without a 'menu_icon' (#64015) Unlinked contributors: karan4official. Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> * Data Views: Don't render action modal when there are no eligible items (#64250) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> * Post editor: apply space below content using a pseudo-element instead of padding-bottom (#64639) Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: PC888 <kracked888@git.wordpress.org> * Featured Image Block: Reduce CSS specificity (#64463) Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> * Inserter: use lighter grammar parse to check allowed status (#64902) Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> * Prepare JSON schemas for Draft 7 update (#63582) Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> * Fix missing ref support for textAlign and textColumns in theme.json schema (#63625) * Add missing ref support for textAlign and textColumns * Update the theme.json reference docs Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> * Don't allow duplicating template parts in non-block-based themes (#64379) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org> * Fix bumped specificity for layout styles in non-iframed editor (#64076) * Fix too specific layout styles in non-iframed editor * Ensure first/last child rules take precedence * Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing * Update tests * Update client side layout selectors to match theme json * Add backport changelog ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * Revert "Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)" This reverts commit 53a370e. * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * Post Editor: fix click space after post content to append (#64992) * Fix minimally * Revise comment * Stop propagation and don’t prevent default * Insert default block if no blocks are present * re-build package lock to match format * Revert "Inserter: use lighter grammar parse to check allowed status (#64902)" This reverts commit 9b9bbe8. --------- Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: PC888 <kracked888@git.wordpress.org> Co-authored-by: Dean Sas <dean@deansas.org> Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/trunk@58988 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: http://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: https://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58989 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/branches/6.6@58989 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58385 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #64453
What?
Reduces the specificity of all of the default featured-image block style rules.
Why?
The core/post-featured-image block has some styles which out specify CSS set in theme.json / the site editor. This breaks existing themes and makes overriding the styles confusing for people making new themes or using the site editor. This problem started with the CSS specificity changes introduced by WP6.6
#64453
How?
Lower the specificity of all of the core/featured-image styles in the same way that is done elsewhere - by using a
:whereto wrap the existing selector.Testing Instructions
To try the same thing on TT4, replace step Two above with:
0. Ensure TT4 is the active theme
.wp-block-post-featured-image img{vertical-align:top;width: auto;}Testing Instructions for Keyboard
Screenshots or screencast