Site Editor: global styles not selected when defined with variable

[Sandstromer]

Description

In the Global Styles sidebar of the Site Editor, where a style is defined using a variable in theme.json, the relevant control is not selected as the default defined style.

Step-by-step reproduction instructions

Activate a FSE theme with a theme.json file that has defined 'defaults' and 'styles'.
The 'styles' should be defined with variable e.g. "fontSize": "var(--wp--preset--font-size--normal)"
Go into the Site Editor and notice that although the relevant element is displayed with the correct style, the control selector is not selected as defined, so it is not immediately obvious what style the theme has defined.
If the styles are explicitly defined e.g. "fontSize": "20px" then the control selector does default to the correct style.

See code examples and screenshots.

Define some default font sizes and colors in theme.json, and also some styles defined by using variables:

{
	"settings": {
		"defaults": {
			"color": {
				"palette": [
					{ "slug": "black", "name": "Black", "color": "#000000" },
					{ "slug": "white", "name": "White", "color": "#ffffff" },
					{ "slug": "red", "name": "Red", "color": "#ff0000" },
					{ "slug": "blue", "name": "Blue", "color": "#0000ff" },
					{ "slug": "yellow", "name": "Yellow", "color": "#ffff00" }
				]
			},
			"typography": {
				"fontSizes": [
					{ "slug": "normal", "name": "Normal", "size": "20px" },
					{ "slug": "large", "name": "Large", "size": "32px" }
				]
			}
		}
	},
	"styles": {
		"root": {
			"color": {
				"background": "var(--wp--preset--color--yellow)",
				"text": "var(--wp--preset--color--black)",
				"link": "var(--wp--preset--color--red)"
			},
			"typography": {
				"fontSize": "var(--wp--preset--font-size--normal)"
			}
		}
	}
}

In the screenshot, the Font Size selector should show that it is set to be 'Normal', and the Text Color should be checked on the black color:

Now in this example, the styles have instead been defined with explicit values that match with the defaults:

{
	"settings": {
		"defaults": {
			"color": {
				"palette": [
					{ "slug": "black", "name": "Black", "color": "#000000" },
					{ "slug": "white", "name": "White", "color": "#ffffff" },
					{ "slug": "red", "name": "Red", "color": "#ff0000" },
					{ "slug": "blue", "name": "Blue", "color": "#0000ff" },
					{ "slug": "yellow", "name": "Yellow", "color": "#ffff00" }
				]
			},
			"typography": {
				"fontSizes": [
					{ "slug": "normal", "name": "Normal", "size": "20px" },
					{ "slug": "large", "name": "Large", "size": "32px" }
				]
			}
		}
	},
	"styles": {
		"root": {
			"color": {
				"background": "#ffff00",
				"text": "#000000",
				"link": "#ff0000"
			},
			"typography": {
				"fontSize": "20px"
			}
		}
	}
}

Now, we can see that the relevant controls do show us what has been defined, the Font Size shows 'Normal' font size and the Text Color shows the black color selected:

WordPress information

• WordPress version: 5.6.1
• Gutenberg version: 9.9.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No. Using emptytheme will bare minimum to test theme.json

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Firefox and Chrome

[oandregal]

I can repro with TT1-blocks and changing the styles.root.color.background from var(--wp--preset--color--green) to #D1E4DD (selected).

This is the use case I was thinking in this thread #28837 (comment) This needs to be looked at after 28837 lands.

[leutrimhusaj]

I revised my PR and made a new one, would be cool if you can look after it and tell me whats your opinion on this.