Style variations: saving a new gradient background color affects all variations

[ramonjd]

Description

In TT3 theme, switching backgrounds after having selected the Sherbet style variation affects the backgrounds of all variations.

2022-12-23.14.25.12.mp4

What happened

All the style variations take on the color of the newly-selected background gradient

What I expected

The style variations do not change

Noticed in #46667 (comment)

Possibly related to #46177

Step-by-step reproduction instructions

1. Fresh install of 2023 (no style customizations)
2. In the Site editor, activate Sherbet style variation. Save the template.
3. Change the background color by selecting a gradient from the default palette. Save. Refresh page.
4. See that the variations have all changed to that color.

Environment info

WordPress 6.2-alpha-54642-src running Twenty Twenty-Three theme.
Gutenberg plugin v 14.8.0

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

[carolinan]

Same cause as #42105 ?

[ramonjd]

Same cause as #42105 ?

On the face of it, it looks to be. Thanks for the link!

[ramonjd]

I haven't looked too closely into it but it seems that it's due to the saved background value of the gradient overriding the the style variation's background-color.

2022-12-28.16.27.03.mp4

I'm wondering if we should allow user global styles config to "leak" into the variations iframes? 🤷

[tellthemachines]

I can reproduce this by just setting the TT3 variation to Sherbet, saving and reloading. Not only do all the theme variations now have a gradient background, all the images have a duotone filter. This issue only happens in the editor: in the style variation previews, on the actual editor canvas and in the style book too. Once a different variation is selected and saved, it goes away on reload.

The issue seems to be caused by background and filter styles persisting in the editor iframes when switching between variations.

[tellthemachines]

I traced the culprit styles back to the themeBaseGlobalStyles stored in core state. It seems that, if the theme style variation in use has a gradient and/or an image duotone filter, when we try switching to another variation that doesn't have these those styles will persist in the editor view.

Adding

"color": {
			"gradient": false
		},
		"blocks": {
			"core/image": {
				"filter": {
					"duotone": false
				}
			}
		}

to the theme's base theme.json seems to fix the issue by resetting those values but having to include resets in theme files is not ideal and adding them to core theme.json doesn't seem to work as it gets overridden by the theme one. It would be better if those values could somehow be reset in the editor when previewing new variations. Perhaps every style/setting that's not in the base theme.json file should be reset?

Cc @oandregal do you have any thoughts on this?

[oandregal]

@tellthemachines I've done some testing and the fix for this issue is the same as #48644 It'll be shipped in Gutenberg 15.3 and WordPress 6.2 (as of WordPress/wordpress-develop#4145, rev5548 which is included as part of beta4). If you are able to reproduce, I presume you were using older versions of this setup?

One thing that is missing is that the fix is not yet cherry-picked to the 6.1 branch, where the bug was introduced. I think everything is ready for someone to pick that up when the time comes, but I asked in the core ticket to confirm.

[tellthemachines]

Thanks @oandregal, I tested on trunk before that PR was merged, but re-testing confirms this is now fixed! I'll go ahead and close the issue for now.