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.