wp_get_global_styles: for custom props, it should return the CSS format not the shortened internal one

[oandregal]

Related #45171

Description

The wp_get_global_styles functions returns an internal format for CSS Custom Properties instead of the proper CSS format.

Step-by-step reproduction 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.

[oandregal]

Plugins need to be aware of this format, when they shouldn't:

• woocommerce https://github.com/woocommerce/woocommerce-blocks/blob/trunk/src/Utils/StyleAttributesUtils.php
• sensei:
  • https://github.com/Automattic/sensei/blob/5aa1b3641c67ae512ead93b59b4df05f8471d71f/includes/course-theme/class-sensei-course-theme-styles.php
  • https://github.com/Automattic/sensei/blob/5aa1b3641c67ae512ead93b59b4df05f8471d71f/assets/course-theme/supports-color.js#L63

[oandregal]

One option to fix this is by making the conversion part of WP_Theme_JSON::sanitize method, so any code dealing with the internal representation of a theme.json dataset only needs to be aware of one format (var(--wp--preset--font-size--small)).