Style engine: add optimize flag and combine functions into wp_style_engine_get_stylesheet

[ramonjd]

What?

A follow up to:

• Style engine: enqueue block support styles #42452

This PR:

1. adds an 'optimize' option to WP_Style_Engine_Processor->get_css() which allows for bypassing the selector combination optimizeation
2. merges wp_style_engine_get_stylesheet_from_css_rules() and wp_style_engine_add_to_store() into wp_style_engine_get_stylesheet()

Why and how?

1. Allows outputting verbose styles in the event of bugs, or just if consumers desire it.
2. Use a single interface to both store and output compiled stylesheets from multiple rules.

Testing Instructions

For the optimize flag:

npm run test-unit-php

For the merged function:

Example

<!-- wp:group {"style":{"color":{"background":"#ee6b6b"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","orientation":"vertical"}} -->
<div class="wp-block-group has-background" style="background-color:#ee6b6b"><!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#c4cce6"}},"layout":{"contentSize":"342px"}} -->
<div class="wp-block-group has-background" style="background-color:#c4cce6"><!-- wp:paragraph -->
<p>Test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

The frontend should appear as expected:

The styles should be output correctly:

<style id='layout-block-supports-inline-css'>
.wp-block-navigation.wp-container-3 {justify-content: flex-end;}.wp-block-group.wp-container-7 {flex-wrap: nowrap; align-items: flex-start;}.wp-block-group.wp-container-8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 342px; margin-left: auto !important; margin-right: auto !important;}.wp-block-group.wp-container-8 > .alignwide {max-width: 342px;}.wp-block-group.wp-container-4,.wp-block-group.wp-container-13 {justify-content: space-between;}.wp-block-group.wp-container-5 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-post-content.wp-container-9 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-11 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-14 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-15 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width: 650px; margin-left: auto !important; margin-right: auto !important;}.wp-block-group.wp-container-5 > .alignwide,.wp-block-group.wp-container-6 > .alignwide,.wp-block-post-content.wp-container-9 > .alignwide,.wp-block-group.wp-container-11 > .alignwide,.wp-block-group.wp-container-14 > .alignwide,.wp-block-group.wp-container-15 > .alignwide {max-width: 1000px;}.wp-block-group.wp-container-5 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-group.wp-container-8 .alignfull,.wp-block-post-content.wp-container-9 .alignfull,.wp-block-group.wp-container-11 .alignfull,.wp-block-group.wp-container-14 .alignfull,.wp-block-group.wp-container-15 .alignfull {max-width: none;}
</style>

gutenberg_get_layout_style() should return the compiled CSS for the single block only (and not the cumulated stylesheet)

[andrewserong]

Nice one, thanks for the quick follow-up. I like the merging of wp_style_engine_get_stylesheet_from_css_rules() and wp_style_engine_add_to_store() 👍, just left a comment on your naming comment, but I don't feel too strongly about which way we go there. I'll be curious to see what @aristath thinks 🙂

Re-tested that Layout and Elements supports are still working correctly, and the optimize flag looks good to me.

LGTM!

[oandregal]

Tagged for the changelog.