Invalid real time generated CSS for ref value when changing font sizes presets in the Global Styles panel (Site Editor)

[daviedR]

Description

I tried to add a new block style to my core/heading block. The new style is called title.
The idea is to replicate the h1 element style into the title custom block style.
After discussion in #59163, I tried to use the ref value and block style variations in the theme.json to bind the h1 values into my new title block style.

This works well on the front website and block editor.
But when I use the Global Styles panel (Site Editor) to change the H1 style (Global Styles > Typography > Headings > H1 tab), there is an issue when using the fontSize presets control.

The real time CSS generated is still in raw value var:preset|font-size|large instead of var(--wp--preset--font-size--large).

But after we clicked the Save button (top right side), the generated CSS is flushed again and shows the correct value.

Step-by-step reproduction instructions

1. Add the Snippet 1 (below) to the theme.json file. This will add block style variation for title block style on core/heading block.
2. Go to Site Editor and add a core/heading block into the template content.
3. Choose the Title block style. The heading block should replicate the H1 style even though the heading block level is not set to h1.
4. Go to the Global Styles panel and browse to Typography > Headings > H1 tab.
5. Change the font size value using the S M L XL XXL presets.
6. The font size is not applied to the heading block with Title style, because Site Editor JS generate invalid CSS value (see screenshot above).

Screenshots, screen recording, code snippet

Snippet 1 (theme.json):

{
	...
	"styles": {
		"blocks": {
			"core/heading": {
				"variations": {
					"title": {
						"typography": {
							"fontFamily": { "ref": "styles.elements.h1.typography.fontFamily" },
							"fontSize": { "ref": "styles.elements.h1.typography.fontSize" },
							"fontStyle": { "ref": "styles.elements.h1.typography.fontStyle" },
							"fontWeight": { "ref": "styles.elements.h1.typography.fontWeight" },
							"letterSpacing": { "ref": "styles.elements.h1.typography.letterSpacing" },
							"lineHeight": { "ref": "styles.elements.h1.typography.lineHeight" },
							"textDecoration": { "ref": "styles.elements.h1.typography.textDecoration" },
							"textTransform": { "ref": "styles.elements.h1.typography.textTransform" }
						}
					}
				}
			}
		}
	}
}

Environment info

• WordPress 6.4.3
• Gutenberg 17.8.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

[aaronrobertshaw]

I can reproduce the root issue here however not via the supplied replication steps as custom block styles can't be styled via Global Styles (yet).

Steps to replicate

1. In theme.json, set the font size for core/heading using ref to the styles.elements.h1.typography.fontSize value
2. In the Site Editor, select a core/heading block and check that it gets the same value as the h1 element
3. Navigate to Global Styles > Typography > Headings > H1 and change the font size
4. Inspect the core/heading block again and note it gets an invalid CSS rule containing var:preset|font-size|<size>

{
	...
    			"core/heading": {
				"typography": {
					"fontSize": {
						"ref": "styles.elements.h1.typography.fontSize"
					}
				}
			},
	...
}

This is due to the retrieval of the referenced value not taking into account preset var strings.

I'll put up a PR to fix this shortly.

[aaronrobertshaw]

A potential fix is available for review in #59811

[daviedR]

Thanks @aaronrobertshaw !