Skip to content

Theme Previews: Style card: Add support for themes that don't set colors in theme.json#391

Closed
ryelle wants to merge 1 commit intoWordPress:trunkfrom
ryelle:theme-preview/update/style-cards
Closed

Theme Previews: Style card: Add support for themes that don't set colors in theme.json#391
ryelle wants to merge 1 commit intoWordPress:trunkfrom
ryelle:theme-preview/update/style-cards

Conversation

@ryelle
Copy link
Contributor

@ryelle ryelle commented Oct 2, 2024

See WordPress/wporg-theme-directory#154 — Some block themes set the page background color not by setting the styles.color.background property, but instead by adding a top-level wrapper block. When done this way, the background is not picked up by the style variation card view. This PR attempts to pull out any relevant classes from the first wrapper element it sees, and applies those to the style card container.

I think these themes are technically doing it wrong— the colors and other base styles should be set in theme.json, not as settings on blocks— but providing this workaround will at least display slightly better. It's not perfect though, you can see in the screenshots below that the font color for Danva is still incorrect (which leads to the all-black image). This is, again, because the text color is set on each individual element, not the body tag. The fonts are also not correct, same reason.

Screenshots

Before After
TT4 default before-theme-twentytwentyfour-default theme-twentytwentyfour-default
TT4 blue before-theme-twentytwentyfour-blue theme-twentytwentyfour-blue
Creativium default before-theme-creativium-default theme-creativium-default
Creativium amethyst before-theme-creativium-amethyst theme-creativium-amethyst
Danva default before-theme-danva-default theme-danva-default
Danva blue before-theme-danva-blue theme-danva-blue

To test:

@ryelle ryelle requested a review from StevenDufresne October 2, 2024 21:12
@ryelle ryelle self-assigned this Oct 2, 2024
@bazza bazza closed this in 0081dc5 Oct 28, 2024
@ryelle ryelle deleted the theme-preview/update/style-cards branch October 30, 2024 20:54
StevenDufresne pushed a commit to StevenDufresne/wordpress.org that referenced this pull request Nov 14, 2024
…ors in theme.json

Some block themes set the page background color not by setting the styles.color.background property, but instead by adding a top-level wrapper block. When done this way, the background is not picked up by the style variation card view. This PR attempts to pull out any relevant classes from the first wrapper element it sees, and applies those to the style card container

Fixes WordPress/wporg-theme-directory#154.
Closes WordPress#391.



git-svn-id: https://meta.svn.wordpress.org/sites/trunk@14151 74240141-8908-4e6f-9713-ba540dce6ec7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

1 participant