Skip to content

Style loading bug #38385

Open
Open

Description

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.

  1. 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] FeedbackIssues that relate purely to feedback on a feature that isn't necessarily actionable

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions