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

[amjadr360]

Description

When switching style variations in the Site Editor, duotone filters applied to elements within template parts (e.g., the site logo inside the header/footer) do not update immediately. In the Twenty Twenty-Five theme, the “Midnight” style variation includes a duotone filter for the site logo. However, switching from the “Default” style variation to “Midnight” does not apply the duotone filter to the logo until the changes are saved and page is manually refreshed.

Expected behavior:
The duotone filter defined in the style variation should apply to the site logo (within a template part like the header) as soon as the variation is switched.

Actual behavior:
The filter only takes effect after refreshing the editor.

Step-by-step reproduction instructions

1. Activate the Twenty Twenty-Five theme.
2. Open the Site Editor (Appearance > Editor).
3. Add the site logo in the the header.
4. Open the Styles panel.
5. Switch from the “Default” style variation to the “Midnight” variation.
6. Observe that the duotone filter is not applied to the site logo.
7. Save the changes or refresh the page — the duotone filter is then applied as expected.

Additional Testing Notes:
I created unique duotone filters (same slug, different base and contrast colors) in multiple style variations. Switching between style variations doesn’t update the duotone filter for the logo in the template part until the page is refreshed.

Screenshots, screen recording, code snippet

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

Environment info

WordPress version: 6.7.2
Gutenberg version: N/A
Active theme: Twenty Twenty-Five
Browsers tested: Chrome (latest)
Device/OS: MAC OS 15.3.2

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[snehapatil2001]

Thank you @amjadr360 for reporting this issue!
I was able to successfully reproduce the behaviour you described in the Twenty Twenty-Five theme.
I found that this issue is noticeable only in the Midnight style, where both the icon colour and background are changing. This issue might exist in other styles as well, but since there's no icon styling applied there, the issue isn't visually apparent.

[carolinan]

I think this is a duplicate of #67459

[amjadr360]

I think this is a duplicate of #67459

I’m not sure, but it seems to me that this is a different issue. I think it’s related to SVG filter values not being updated when the style variation changes.

In the video below, you can see that I created another duotone filter in the Sunrise style variation using the same slug, but with different base and contrast colors. However, when switching between style variations, no changes are visible in the SVG filter values.

Duotone.Filter.Not.Updating-test-2.mp4

[karthikeya-io]

I can reproduce the issue, and it affects all the blocks in the midnight variation that apply the specific duotone style "duotone": "var:preset|duotone|midnight-filter".

The cause of the issue is that the following filter is not present when the styles are first applied but is only added after reloading the page. As a result, the styles are not visible initially.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;">
	<defs>
		<filter id="wp-duotone-midnight-filter">
			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="
					.299 .587 .114 0 0
					.299 .587 .114 0 0
					.299 .587 .114 0 0
					.299 .587 .114 0 0
				"></feColorMatrix>
			<feComponentTransfer color-interpolation-filters="sRGB">
				<feFuncR type="table" tableValues="0.26666666666667 0.47450980392157"></feFuncR>
				<feFuncG type="table" tableValues="0.2 0.95294117647059"></feFuncG>
				<feFuncB type="table" tableValues="0.65098039215686 0.69411764705882"></feFuncB>
				<feFuncA type="table" tableValues="1 1"></feFuncA>
			</feComponentTransfer>
			<feComposite in2="SourceGraphic" operator="in"></feComposite>
		</filter>
	</defs>
</svg>

I can see that some SVG filters are added initially for all the style variations.
One way to fix this is by using the filter that has already been added, using "duotone": "var:preset|duotone|midnight" instead of the one specified in the settings, "duotone": "var:preset|duotone|midnight-filter".
or I think we should load the SVG filters for all duotone settings registered in all variations initially.

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[alexcu21]

== Reproduction Report
This report validates that the issue can be reproduced.

=== Environment

• OS: macOS 15.5
• Web Server: Nginx
• PHP: 7.4.29
• WordPress: 6.8.2-RC1
• Browser: Chrome 138.0.7204.93
• Theme: Twenty Twenty-Five
• Active Plugins:
  • Gutenberg 21.1.1
  • WordPress Beta Tester 3.6.4

=== Actual Results

• ✅ Error condition occurs (reproduced).

=== Additional Notes
Steps I followed to reproduce (same than above):

• Activate the Twenty Twenty-Five theme.
• Open the Site Editor (Appearance > Editor).
• Add the site logo in the the header.
• Open the Styles panel.
• Switch from the “Default” style variation to the “Midnight” variation.
• Observe that the duotone filter is not applied to the site logo.
• Save the changes or refresh the page — the duotone filter is then applied as expected.

Loom.Message.-.14.July.2025.mp4

[SirLouen]

Reproduction Report

Description

✅ This report validates whether the issue can be reproduced.

=== Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.8.2-MariaDB-ubu2404 / Client: mysqlnd 8.2.29)
• Browser: Chrome 138.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.2.0-rc.1
  • Test Reports 1.2.0

Reproduction Steps

• Same as provided in OP
• 🐞 Bug is there, duotone is not being applied in the editor

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

Adding some extra tests:

1. To discard the possibility of a theme problem, I've added duotone to twentytwentyfour to the Fossil style similarly to Midnight in 2025, and it is still reproducible (check Artifacts)
2. As soon as we save and refresh, it gets applied in the editor.
3. Changing Styles (for example, to Sunrise). Then Saving, refreshing and then switching back to Midnight, triggers the issue again
4. This is also affecting other blocks (by switching styles as in point 3), also provokes the issue, not only in the logo but in the image also. (see artifacts)

• Comparing the code before and after, there are 4 occurrences of #wp-duotone-midnight-filter when style is applying while only 1 occurrence when not.

The most important one is the SVG not loading

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;">
			<defs>
				<filter id="wp-duotone-midnight-filter">
					<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="
							.299 .587 .114 0 0
							.299 .587 .114 0 0
							.299 .587 .114 0 0
							.299 .587 .114 0 0
						"></feColorMatrix>
					<feComponentTransfer color-interpolation-filters="sRGB">
						<feFuncR type="table" tableValues="0.26666666666667 0.47450980392157"></feFuncR>
						<feFuncG type="table" tableValues="0.2 0.95294117647059"></feFuncG>
						<feFuncB type="table" tableValues="0.65098039215686 0.69411764705882"></feFuncB>
						<feFuncA type="table" tableValues="1 1"></feFuncA>
					</feComponentTransfer>
					<feComposite in2="SourceGraphic" operator="in"></feComposite>
				</filter>
			</defs>
		</svg>

@carolinan after these tests, I'm not 100% confident that this is related with #67459. I've been unable to find the problematic style name change you mention on that ticket.

Potential problem

No SVG filters are loading at all (not in 2025, and not in 2024 with my mod either)

@Mamaduka since you put the needs-testing Label, I think it's ready to be removed, and now it's time to work on a PR.

Supplemental Artifacts

TwentyTwentyFive

Editor:

FrontEnd

TwentyTwentyfour

Editor:

Frontend

2025 After refreshing

2025 After adding another block and switching styles

[Mamaduka]

Thanks for testing, @SirLouen!