Block supports: allow overriding prettify options for enqueued CSS

[ramonjd]

What?

Allowing gutenberg_enqueue_stored_styles() to pass down formatting options to gutenberg_style_engine_get_stylesheet_from_context().

Context: WordPress/wordpress-develop#3259 (comment)

Why?

So tests and other usages of gutenberg_enqueue_stored_styles() can bypass, or at least don't have to rely on, the global constant SCRIPT_DEBUG to determine whether the output is prettified.

How?

See "What?"

Testing Instructions

Run the tests!

npm run test:unit:php /var/www/html/wp-content/plugins/gutenberg/phpunit/script-loader.php

Smoke test a development site by creating a post with some block support styles, and checking the resulting styles in the frontend.

For example,

This example block code

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|60"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"},"blockGap":{"top":"var:preset|spacing|60","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|60"}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Should generate the following CSS in development mode:

<style id='core-block-supports-inline-css'>
/**
 * Core styles: block-supports
 */
.wp-block-columns.wp-container-4 {
	flex-wrap: nowrap;
}
.wp-block-column.wp-container-5.wp-block-column.wp-container-5 > * + * {
	margin-block-start: var:preset|spacing|60;
	margin-block-end: 0;
}
.wp-block-columns.wp-container-8 {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}
.wp-block-group.wp-container-9.wp-block-group.wp-container-9 > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
	margin-block-end: 0;
}
.wp-block-column.wp-container-5 > *,
.wp-block-group.wp-container-9 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

</style>

[andrewserong]

Thanks for following up @ramonjd! I really like this approach, makes it easier to test, and also opens up the function to support more options in the future, too.

✅ Tested that by default prettify is still set to off
✅ Tested that by defining SCRIPT_DEBUG as true in wp-config.php the prettified output is switched on as before
✅ Manually updated tests to set prettify to true to confirm that it correctly fails the updated tests

LGTM! ✨

[ockham]

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 964827e

[ramonjd]

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 964827e

Sorry @ockham there's a small update to this code in #44254

The change is reflected in the Core patch

#44254 just syncs the two.

I was going to cherry pick but I see from the commit history you've been doing them so I didn't want to mess up the process.

[ockham]

@ramonjd Thank you for the ping! The "Backport to WP Beta/RC" label you added to #44254 ensures that we'll include it in our next round of npm publishing 👍