wp_get_global_styles: return the standard format for CSS Custom Properties

[oandregal]

Trac ticket https://core.trac.wordpress.org/ticket/58467
Backports WordPress/gutenberg#50366 and WordPress/gutenberg#50527
Part of WordPress/gutenberg#45171

What?

This PR fixes wp_get_global_styles so that it always return the standard format for CSS Custom Properties. For a theme.json dataset with the following data:

"core/post-terms": {
    "typography": { "fontSize": "var(--wp--preset--font-size--small)" },
    "color":{ "background": "var:preset|color|secondary" }
}

the wp_get_global_styles function should return:

(
    [typography] => Array( [fontSize] => var(--wp--preset--font-size--small) )
    [color] => Array( [background] => var(--wp--preset--color--secondary) )
)

Why?

See WordPress/gutenberg#49693 The internal syntax shouldn't leak out, so consumers of this function only have to deal with the standard CSS Custom format.

How?

This PR extract the already existing logic that converts var:preset|color|secondary to var(--wp--preset--font-size--small) to a separate method, then uses the same method to sanitize the output of wp_get_global_styles to only include custom CSS variables and not internal variable syntax.

Testing Instructions

• Use a theme that has a theme.json.
• Paste the following under styles.blocks:

"core/post-terms": {
    "typography": { "fontSize": "var(--wp--preset--font-size--small)" },
    "color":{ "background": "var:preset|color|secondary" }
}

• Use the wp_get_global_styles functions to retrieve those styles. For example, paste the following in functions.php of the theme:

add_action( 'init', function(){
        error_log( print_r( wp_get_global_styles( array(), array('block_name'=>'core/post-terms') ), true ) );
} );

The result will be:

(
    [typography] => Array( [fontSize] => var(--wp--preset--font-size--small) )
    [color] => Array( [background] => var:preset|color|secondary )
)

when it should have been

(
    [typography] => Array( [fontSize] => var(--wp--preset--font-size--small) )
    [color] => Array( [background] => var(--wp--preset--color--secondary) )
)

Note the color.background value. It should return the value in a valid CSS value, not the shortened internal format.

Commit message

`wp_get_global_styles`: return the standard format for CSS Custom Properties.

Props samnajian, hellofromtonya, isabel_brison.
Fixes #58467.

[tellthemachines]

Code looks good and testing steps are returning the expected values. Just one (tiny, non-blocking) question below!

[tellthemachines]

Do we really need this comment given there are no actual changes to this function? I'm assuming that returning the internal notation was a bug 😄 as I don't see the behaviour documented anywhere.

[oandregal]

This is a hard one. I suppose the comment is helpful in clarifying the behavior so consumers using different versions of WordPress can prepare accordingly: they have to do the conversion themselves in versions <6.3. Unless this change is backported to any older version that is also affected 🤔

For the purposes of 6.3 beta, I'm going to merge this as it is, but we can iterate / create follow-ups after.

[oandregal]

Committed at https://core.trac.wordpress.org/changeset/55959