Fix: Duotone handle block style variations - #78229
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
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. |
|
I am happy to backport this to Core after the review 😇 |
What?
Closes #77539
This PR ensures that duotone filters applied to block style variations in Global Styles (e.g., a "Rounded" variation of an Image block) are correctly rendered on the frontend and take precedence over the base block's duotone settings.
Why?
Previously, the
WP_Duotone_Gutenbergclass only checked for duotone settings applied to the base block type. If a user styled a specific variation with a different duotone, the frontend would either fallback to the base block's filter or apply no filter at all. This occurred because the logic did not account for the variations path intheme.jsonand didn't check the block'sclassNameforis-style-{variation}triggers during render.How?
get_all_global_style_block_namesto iterate through block variations in the theme.json data. It now stores variation-specific duotones using the key formatblockName:variationName.render_duotone_supportto parse the block'sclassNameattribute. If anis-style- classis found that matches a stored variation, that duotone is prioritized.enqueue_global_styles_presetbefore falling back to the default block duotone.Testing Instructions
Screenshots or screencast
Before:
style-variation-duotone.mov
After:
style-variation-duotone-fix.mov
Use of AI Tools
I used Gemini 3 Flash to help draft the PR description and structure the summary based on my code changes. And Deepseek v4 Flash (via OpenCode) for initial PR review.