Custom block CSS from theme.json is not updated when you switch theme style variations

[carolinan]

Description

If a theme has several theme style variations ( alternative theme.json files) where each variation applies different custom CSS to a block, the CSS is not updated or reset correctly when you switch variations.

Picture that theme.json adds CSS to set the border radius to 3rem, and the theme style variation sets the border radius to 4 pixels.

When you go to Appearance > Editor > Styles, the block has the correct 3rem border radius. When you select the variation, the preview shows that the block has the correct 4px border radius. But when you click on the default style variation again, the block still has 4px border radius, when it should have 3rem.

Step-by-step reproduction instructions

You need two .json files in your block theme to test this. Or, you can try https://github.com/WordPress/twentytwentyfive/pull/525

---

Add this to styles > blocks in theme.json.

"core/search": {
"css": "& .wp-block-search__input{border-radius:3.125rem;padding-left:1.5625rem;padding-right:1.5625rem;border-color:var(--wp--preset--color--accent-6);}",
},

Add this to styles > blocks in the second json file, the alternative theme style variation. Please read this documentation if you are not sure how to create the variation: https://developer.wordpress.org/themes/global-settings-and-styles/style-variations/#adding-custom-style-variations

"core/search": {
"css": "& .wp-block-search__input{border-radius:4px;border-color:var(--wp--preset--color--accent-6);}",
},

Go to Appearance > Editor Insert a search block Go to Appearance > Editor > Styles Switch between the different variations and double check which of the custom CSS that is being applied.

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/d46dc45e-be88-4e53-a359-355f82915bfe

Environment info

WordPress 6.7 Beta 3 current nightly When testing this, I have define( 'WP_DEVELOPMENT_MODE', 'theme' ); set in the wp-config file.

With and without Gutenberg trunk

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

• [x] Yes

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

• [x] Yes

[carolinan]

After saving the style selection, the wrong CSS is also applied on the front of the website.

[carolinan]

I have tested it on WordPress 6.6 and confirm it happens on that version too, so it is not a 6.7 regression.