Accept transforms in gutenberg_get_global_styles context params

[samnajian]

What?

This PR addresses the changes explained in #49712 by introducing the transforms to the $context param as form of an array, so that

gutenberg_get_global_styles( array(), array( 
    'block_name' => 'core/post-terms',
    'transforms' => array( 'resolve-variables' ) 
    )
 );

returns:

"core/post-terms": {
    "typography": { "fontSize": "12px" }
}

and not the following:

"core/post-terms": {
    "typography": { "fontSize": "var(--wp--preset--font-size--small)" }
}

for a theme.json with the following content:

"core/post-terms": {
    "typography": { "fontSize": "var(--wp--preset--font-size--small)" }
}

Why?

There are some usages of the gutenberg_get_global_styles where the user is interested in the values of the css rules and not the variables.

How?

Currently the acceptable value is only resolve-variables as in

$context = array( 'transforms' => array( 'resolve-variables' ) ) 

and in future PRs other transforms can be added such as

$context =  array( 'transforms' => array( 'resolve-references' ) )

Testing Instructions

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 ) );
} );

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @samnajian! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[geriux]

Hey there! I just did a quick test of these changes to see what the response would be like and this would benefit the mobile editor a lot since we won't need to go through the data and manually parse it (which on mid-end devices could take a toll on performance).

I can't add too much value to the code review though since my PHP knowledge is limited 😅 but I like that it still uses gutenberg_get_global_styles and it just sets a context to get the style values. Once we implement this we would need to keep support for the default response so this works perfectly.

To test it I updated the mobile endpoint to pass the transforms:

$context = array(
	'transforms' => array(
		'resolve-variables',
	),
);			
$settings['__experimentalStyles'] = gutenberg_get_global_styles(array(), $context);

Thank you for working on this @samnajian 👏

[oandregal]

This is brilliant work, Sam! Thanks for all your effort here. There's only one use case we need to fix, but otherwise it's working as expected.

[oandregal]

This is ready to be merged. Thanks for pushing until it was feature complete, Sam! It was harder than anticipated, and you did great.

I see some lint issues that need fixing before merging, though.

[ramonjd]

Thanks everyone for working on this. I'll add it to the backport list for WP 6.3 🙇

[oandregal]

Backporting at WordPress/wordpress-develop#4656