Fix duotone filter not applying on style variation switch#77229
Fix duotone filter not applying on style variation switch#77229andrewserong merged 2 commits intoWordPress:trunkfrom
Conversation
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @prachigarg19! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @UtsavYadav1. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
My guess is this was a simple oversight in #49239, and this change makes sense to me. Just to be sure, I'll have @scruffian and @andrewserong confirm.
andrewserong
left a comment
There was a problem hiding this comment.
My guess is this was a simple oversight in #49239, and this change makes sense to me.
Yes, that looks like it to me, everywhere else it's svgs 👍
Nice catch @prachigarg19 and thanks for the fix!
LGTM 🚀
|
Great find, thank you @prachigarg19 |
What?
Closes #69847
Fix duotone filter not applying when switching style variations in the Site Editor for template parts.
Why?
When switching to a style variation that includes a duotone filter (e.g. the "Midnight" variation in Twenty Twenty-Five theme), the duotone effect was not applied to blocks inside template parts (such as the Site Logo in the header) until the page was manually refreshed.
The root cause was a type string mismatch in the global styles pipeline. In packages/global-styles-engine/src/core/render.ts, the SVG filter assets were tagged with __unstableType: 'svg', but EditorStyles in packages/block-editor/src/components/editor-styles/index.js filters for __unstableType === 'svgs' (with an s). Because of this mismatch, the globally generated duotone preset SVG filter definitions were silently dropped and never injected into the DOM, so the CSS filter: url(#wp-duotone-midnight-filter) rule had nothing to reference.
How?
Changed __unstableType: 'svg' to __unstableType: 'svgs' in generateGlobalStyles inside packages/global-styles-engine/src/core/render.ts to match the value that EditorStyles expects.
This is a one-character fix. The SVG filters were already being correctly generated for all style variations via generateSvgFilters (including non-active variations via getThemeVariationSettingsNodes), but were never consumed by EditorStyles due to this typo.
No other code in the codebase reads __unstableType === 'svg' — confirmed by grep. All other writers of __unstableType for SVGs already use 'svgs', so this change brings render.ts in line with the rest of the codebase.
Testing Instructions
Testing Instructions for Keyboard
This PR does not change any UI interactions. The fix is purely in the styles pipeline. No keyboard-specific testing is required.
Screenshots or screencast
Use of AI Tools
None