Style loading bug

[wpsoul]

Description

I waited long time to try 5.9 version because I am thinking to migrate our products to Block themes, but I was disappointed how WordPress loads style and conditional assets. I thought this is bug only in Classic themes, but I tried several block themes and the bugs are not fixed. I can't believe that this way was approved for production release. Let me explain

1. When I use Site editor and change options for rows, colors, Wordpress generates conditional styles, but places it in Footer

https://monosnap.com/file/SyMpNLpeBQX0KUVUeTbAo0LjA0E3Im

This makes big problem with unstyled flashing while loading. And this creates huge CLS and score drop on web vitals which makes no sense migration to block themes, because our clients expect to improve site performance.

2. Similar problem with function register_block_style

Once I use this function, it will add all styles to header but it takes all registered styles and render them even on pages where blocks are not used at all. This totally breaks the logic and purpose of BLOCKS, because in my opinion, blocks must be independent and all styles, scripts which are attached to blocks must be rendered only when block is used on page. In the current point, the only way to make a really conditional loading of custom styles for core blocks is to check className attribute in render_block filter and render inline styles if class is existed. But this forces us to use strpos() and other slow functions, which can overload page once we reach 50-100 number of styles.

Step-by-step reproduction instructions

Footer styles

1. Install any block theme
2. Check footer area and search for "wp-container"
3. A lot of styles are loaded in footer instead of header

Custom styles for core blocks

1. Install any block theme
2. Use register_block_style to add some inline styles or style handles.
3. Open any page on site where blocks are not in use.
4. Find all styles in head section - they must be there only if block is used.

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 5.9 Ona, 2022 default block theme, FrostWP, Pacer Block themes

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

[ndiego]

Yes I was noticing the flash of unstyled content today as well. Moving all the conditional CSS to the header should solve this. It would be great to get this into 5.9.1 if possible.

@wpsoul concerning per-block inline styles, you can use wp_enqueue_block_style. Ari discussed this here and it is working as expected for me with 5.9.

[bgardner]

Given the impact this could have on Core Web Vitals, +1 on trying to get this into 5.9.1.

[wpsoul]

@ndiego wp_enqueue_block_style is cool new function, it resolves problem when we need to add extra styles to core blocks. But I think it's not replacement for register_block_styles, because wp_enqueue_block_style doesn't support to set name of custom style in arguments.

[ndiego]

Yeah agreed. That said, I am currently using it to load my custom CSS for my block styles registered with register_block_styles. It's currently the best alternative that I have found for the time being.

[carolinan]

I am using both of these functions, for their respective use, and I do see the CLS.

[wpsoul]

I also found today that even all styles which are registered via theme.json file are loaded in footer.