Use of uniqid() in generated CSS class names breaks ability to cache parsed CSS

[westonruter]

Description

In a support forum topic for the AMP plugin, a user reported their site slowed down after WordPress 5.9 was released. The cause turned out to be that the AMP plugin's caching of parsed CSS automatically disabled since the CSS on the page contained randomness. This disabling is done to prevent filling up the options table with garbage transient data. I found the cause to be the use of uniqid() in functions like wp_render_layout_support_flag():

https://github.com/WordPress/wordpress-develop/blob/8ec1cb83e346853588606b228b8eaa5921d47782/src/wp-includes/block-supports/layout.php#L162-L176

The use of uniqid() actually came up before in the context of the Twenty Seventeen theme. In Core Trac #44883 it was replaced successfully with wp_unique_id().

The result is that instead of a class name like wp-container-620e88a091db4 being generated, where 620e88a091db4 is random with each page load, a class name like wp-container-5 is generated which is stable across page loads.

I created a plugin that replaces uniqid() with wp_unique_id() with successful results: https://gist.github.com/westonruter/71852bfeea22ebd7b570865a95b169d6

Related: #35376

Step-by-step reproduction instructions

Add a group block or columns block, view the frontend, and see random class names generated with each page load.

Example post_content:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"black"} -->
<div class="wp-block-column has-black-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col 2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"backgroundColor":"black","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-group is-style-twentytwentyone-border has-black-background-color has-background"><!-- wp:paragraph -->
<p>Group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ramonjd]

It makes it hard to test output against static fixtures as well, which is not as important as the issue raised here of course! :)

Maybe we can look at this as part of the style engine work.

Commented over here as well, but maybe a hash would work better in the interim (?) until we work out a neater solution.

[westonruter]

The uniqid() function just ended up in the codebase again, this time in block_core_gallery_render():

gutenberg/packages/block-library/src/gallery/index.php

Line 52 in 0f0a9b0

$id = uniqid();

Via #38164