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.

Sign up for GitHub

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

Jump to bottom

Featured Image: CSS set in theme.json is overwritten by gutenberg #64453

Closed
2 tasks done
dsas opened this issue Aug 12, 2024 · 0 comments · Fixed by #64463
Closed
2 tasks done

Featured Image: CSS set in theme.json is overwritten by gutenberg #64453

dsas opened this issue Aug 12, 2024 · 0 comments · Fixed by #64463
Assignees
@dsas
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Type] Bug An existing feature does not function as intended

Comments

@dsas
Copy link
Contributor

dsas commented Aug 12, 2024

Description

The core/post-featured-image block has some styles which out specify CSS set in theme.json / the site editor.

I'd expect those CSS rules to be scoped with less specificity, so themes and users can override them when necessary.

Step-by-step reproduction instructions

  1. Add a post with a featured image
  2. Activate the Luminance theme which includes some custom css as a block style
    • Happy to laboriously explain how to do the same thing manually in TT4 if necessary!
  3. View the front-end of the site, the image will look all broken and misaligned.

Screenshots, screen recording, code snippet

Screenshot 2024-08-12 at 18 40 10

Environment info

WP Version: 6.6.1
GB Version: Repro'd on trunk (9c96970) and GB 18.9.0

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes
@dsas dsas added [Type] Bug An existing feature does not function as intended [Block] Post Featured Image Affects the Post Featured Image Block labels Aug 12, 2024
This was referenced Aug 12, 2024
Closed
Merged
@dsas dsas self-assigned this Aug 13, 2024
dsas added a commit to Automattic/themes that referenced this issue Aug 19, 2024
@dsas
Luminance: Fix display of featured images
d3fd305 
The featured images in Luminance were completely misaligned due to
changes in how Gutenberg has changed the specifity of style rules.
Rather than the custom block-specific CSS for the core/featured-image
block taking priority, the default block library styles did.

The problem has been reported upstream
(WordPress/gutenberg#64453) but in the
meantime, using the theme-wide custom CSS fixes the problem.
@dsas dsas mentioned this issue Aug 19, 2024
Merged
alaczek pushed a commit to Automattic/themes that referenced this issue Aug 20, 2024
@dsas
Luminance: Fix display of featured images (#8023)
48a0cb2 
The featured images in Luminance were completely misaligned due to
changes in how Gutenberg has changed the specifity of style rules.
Rather than the custom block-specific CSS for the core/featured-image
block taking priority, the default block library styles did.

The problem has been reported upstream
(WordPress/gutenberg#64453) but in the
meantime, using the theme-wide custom CSS fixes the problem.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dsas dsas

Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Featured Image Block: Reduce CSS specificity WordPress/gutenberg
1 participant
@dsas