CSS custom properties are not output at the root level in the Site Editor

[cr0ybot]

Description

There was a bug fixed in #28581 where the theme.json generated CSS custom properties were not applied to the root inside the iframe, and so the styling appeared broken in some cases. However, I believe that having the custom properties in the main root level is also important for things in the sidebar.

In my particular case, I am defining the theme's color palette in settings.custom like so:

{
	"settings": {
		"custom": {
			"colors": {
				"white": "#FFFFFF",
				"grey1": "#e0e0e0",
				"grey2": "#b4b7b4",
				"grey3": "#373b41",
				"black": "#1d1f21",
				"red": "#c82829",
				"orange": "#f5871f",
				"yellow": "#eab700",
				"green": "#718c00",
				"cyan": "#3e999f",
				"blue": "#4271ae",
				"purple": "#8959a8",
				"brown": "#a3685a"
			},
			"themeColors": {
				"primary": "var(--wp--custom--colors--purple)",
				"secondary": "var(--wp--custom--colors--cyan)",
				"tertiary": "var(--wp--custom--colors--grey3)",
				"error": "var(--wp--custom--colors--red)",
				"warning": "var(--wp--custom--colors--orange)",
				"success": "var(--wp--custom--colors--green)",
				"info": "var(--wp--custom--colors--cyan)",
				"background": "var(--wp--custom--colors--white)",
				"text": "var(--wp--custom--colors--black)",
				"muted": "var(--wp--custom--colors--grey2)",
				"link": "var(--wp--custom--colors--blue)"
			}
		},
		"color": {
			"palette": [
				{
					"name": "Primary",
					"slug": "primary",
					"color": "var(--wp--custom--theme-colors--primary)"
				},
				{
					"name": "Secondary",
					"slug": "secondary",
					"color": "var(--wp--custom--theme-colors--secondary)"
				},
				{
					"name": "Tertiary",
					"slug": "tertiary",
					"color": "var(--wp--custom--theme-colors--tertiary)"
				},
				{
					"name": "Background",
					"slug": "background",
					"color": "var(--wp--custom--theme-colors--background)"
				},
				{
					"name": "Text",
					"slug": "text",
					"color": "var(--wp--custom--theme-colors--text)"
				},
				{
					"name": "Muted",
					"slug": "muted",
					"color": "var(--wp--custom--theme-colors--muted)"
				}
			]
		}
	}
}

This is so that I can define all of my theme's colors in one place, while providing a limited color palette in the editor, and also even more limited pallets for specific blocks that all reference the single source of truth.

These custom properties are not loaded for the sidebar, and so my theme color palette looks like this, while the block itself displays the correct color (the block is teal):

Step-by-step reproduction instructions

1. Add custom properties to theme.json
2. Reference those custom properties in the main color palette of theme.json
3. See that the theme colors are all black in the site editor

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.8.2
• Gutenberg 12.1.0
• Firefox 96.0b7 (64-bit)

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]

Hi, I believe this was fixed in #36851

[carolinan]

Screenshot of the colors in the site editor:

[cr0ybot]

Apologies for the duplicate @carolinan, I assume this fix hasn't made it into a plugin release then? looks like the fix is in plugin version 12.2.0.