Section styles: editing a block variation in Styles doesn't reflect in the editor

[annezazu]

While recording a demo of section styles with 6.6 beta 1, I noticed that while I could change the variation in Styles, the changes would update on the front end of the site but would revert in the editor after hitting save. Here's a video showing front end vs back end:

section.styles.editor.bug.mov

Here's the demo video I was working on for good measure:

bug.in.section.styles.mp4

Here's the theme.json:

	"styles": {
		"blocks": {
			"variations": {
				"Dark": {
					"blockTypes": [
						"core/group",
						"core/columns"
					],
					"color": {
						"background": "#1e1e1e",
						"text": "#FFF"
					},
					"elements": {
						"heading": {
							"color": {
								"text": "#FFF"
							}
						}
					}
				}
			}
		}
	}

I am assuming this is likely because I'm adding an element style to the variation (button in this case) but that doesn't explain why the Heading doesn't update. This could very well be user error but wanted to report just in case cc @aaronrobertshaw

[aaronrobertshaw]

Thanks for writing up the issue @annezazu 👍

I can replicate the problem with WP 6.6 beta 1 via the following steps:

1. Add a group block style variation to theme.json
2. Navigate to Appearance > Editor > Styles > Blocks > Group > Variation e.g. "dark"
3. Tweak variation styles and note editor does update accordingly
4. Save and note the loss of the tweaked styles
5. Reload the editor and see the saved styles back

If I activate Gutenberg the user customizations in Global Styles save correctly and everything works as expected.

The beta is behaving a bit weird here. I'm not aware of anything that was outstanding or missed in terms of this feature being backported or included in GB18.5.

I'll dig into this today and try and work out what's gone awry.

[aaronrobertshaw]

Update:

After debugging, I've managed to track this down to the REST API response stripping custom variations data when saving global styles.

This is due to the REST API endpoint not triggering the theme json resolver and the theme json data filters that the section styles feature currently relies upon to register the custom variations as block styles, in turn allowing them to pass theme.json sanitization.

Gutenberg has a couple of duotone actions registered which access merged theme json data. The result is those actions cause the custom variations to be registered in Gutenberg. Hence the feature working for the site editor there.

One quick solution might be to enforce the registration of any variations contained in the global styles data being returned from this endpoint.

[aaronrobertshaw]

This a tentative fix up in #62321.

It is still to be seen whether this approach is sufficient long term but it would fix this bug for the 6.6 beta and unblock deeper testing.

[aaronrobertshaw]

An alternative approach to solving the root cause of this issue is available in #62405.

[aaronrobertshaw]

Gutenberg port of the fix proposed in WordPress/wordpress-develop#6756 is available in: #62461

[annezazu]

Great work here.

[aaronrobertshaw]

Quick update: We found another small edge case that would trigger the same issue. A fix for that has been rolled into the core patch and a fresh Gutenberg PR (#62495)