Skip to content

Fix duotone filter not applying on style variation switch#77229

Merged
andrewserong merged 2 commits intoWordPress:trunkfrom
prachigarg19:fix/69847-duotone-style-variation
Apr 13, 2026
Merged

Fix duotone filter not applying on style variation switch#77229
andrewserong merged 2 commits intoWordPress:trunkfrom
prachigarg19:fix/69847-duotone-style-variation

Conversation

@prachigarg19
Copy link
Copy Markdown
Contributor

@prachigarg19 prachigarg19 commented Apr 10, 2026

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

  1. Activate the Twenty Twenty-Five theme.
  2. Open the Site Editor (Appearance → Editor).
  3. Navigate to Header and edit it.
  4. Add a Site Logo block to the header.
  5. Save.
  6. Open the Styles panel in Editor.
  7. Click Browse styles and switch from Default to Midnight.
  8. Observe that the duotone filter is now applied to the site logo immediately without requiring a page refresh.

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

Before After
Duotone filter not visible after switching to Midnight variation until page refresh Duotone filter applied immediately upon switching to Midnight variation
image image

Use of AI Tools

None

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 10, 2026
@github-actions
Copy link
Copy Markdown

👋 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.

@prachigarg19 prachigarg19 marked this pull request as ready for review April 10, 2026 14:00
@github-actions
Copy link
Copy Markdown

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 props-bot label.

Unlinked Accounts

The 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.

Unlinked contributors: UtsavYadav1.

Co-authored-by: prachigarg19 <prachigarg19@git.wordpress.org>
Co-authored-by: snehapatil2001 <snehapatil02@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: alexcu21 <alexcu21@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: amjadr360 <amjadr360@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Apr 11, 2026
Copy link
Copy Markdown
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

image

LGTM 🚀

@andrewserong andrewserong merged commit 2b05783 into WordPress:trunk Apr 13, 2026
50 of 51 checks passed
@github-actions github-actions bot added this to the Gutenberg 23.0 milestone Apr 13, 2026
@carolinan
Copy link
Copy Markdown
Contributor

Great find, thank you @prachigarg19

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Duotone Filter Not Updating on Style Variation Change in Site Editor for Template Part

4 participants