Style engine: disable stylesheet optimization temporarily

[ramonjd]

Resolves #43046

Alternative to

• Layout: merge CSS rule for block gap #43052

What?

This PR disables stylesheet optimization temporarily pending further testing and refinement.

Why?

The immediate need is to address #43046, but it might be worthwhile performing extensive testing before we roll optimization out for block supports and, later, global styles.

In #43046, where there are combined rules, a nested layout block's gap value is printed at the top of the stylesheet and overwritten, but the combined default below.

Output example

<style id='block-supports-inline-css'>

/* ... some other styles */

.wp-block-group.wp-container-5 > * + * {
	margin-block-start: 118px; /* ... this is overwritten */
	margin-block-end: 0;
}

.wp-block-group.wp-container-1 > *,
.wp-block-group.wp-container-5 > *,
.wp-block-group.wp-container-8 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ... some other styles */

</style>

How?

Setting the optimize flag to false

Testing Instructions

(Taken from #43046)

1. Using trunk or Gutenberg Nightly, add a Columns block with a single Column block.
2. Add two Paragraph blocks and then Group the Paragraph blocks.
3. Set the Block Spacing on the Column block to 40px.
4. On the Group block inside of the Column block, set the Block Spacing 20px.
5. Check that the correct block gap is applied to the inner elements of the Group block.

Example block code

<!-- wp:columns {"style":{"spacing":{"blockGap":"1px"}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group {"style":{"color":{"background":"#9eebbc"},"spacing":{"blockGap":"137px"}},"layout":{"contentSize":"342px"}} -->
<div class="wp-block-group has-background" style="background-color:#9eebbc"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#cd31d6"}}}}} -->
<p class="has-link-color"><a href="https://word">Test</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:columns {"style":{"spacing":{"blockGap":"1px"}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group {"style":{"color":{"background":"#1a4a2d"},"spacing":{"blockGap":"118px"}},"layout":{"contentSize":"342px"}} -->
<div class="wp-block-group has-background" style="background-color:#1a4a2d"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#cd31d6"}}}}} -->
<p class="has-link-color"><a href="https://word">Test</a></p>
<!-- /wp:paragraph -->

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

Trunk

This PR

[ndiego]

Just tested and works as expected!

[andrewserong]

Thanks for putting up a quick fix @ramonjd — glad you added in the flag to switch this off, it turns out we did need it in the end! 😅

And kudos @ndiego for identifying the issue.

Given that this is a slightly tricky one, in that it only appeared for me with the Group block nested within the Columns block, and the optimization passed our initial testing with a fairly simple set of blocks, I think it'd be a good idea to get this PR in first, and then for us to explore tweaks to the optimization in separate PR(s) where we can poke and prod the implementation to see if we can harden it against this sort of situation.

Trunk (no space on the nested Group block within the Column	This PR (nested Group block has correct large gap)

LGTM!

[ramonjd]

Thanks folks! I'll merge this one for now since it's quite the effect.

When we switch it on again I think we could define a suite of test cases with accompanying unit tests, e.g.,

1. a bunch of selector combinations with expected output.
2. more theme and complex layout/pattern testing

We have at least one test case one now 😄