Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

In the block theme, I see a page with no styles applied for a moment. #38434

Closed
iidastudio opened this issue Feb 2, 2022 · 9 comments
Closed

In the block theme, I see a page with no styles applied for a moment. #38434

iidastudio opened this issue Feb 2, 2022 · 9 comments
Assignees
@oandregal
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Comments

@iidastudio
Copy link

Description

In the block theme, When I view the page, I see a page with no styles applied for a moment.
I think the cause is that the block theme inserts the style generated from theme.json (global-styles-inline-css) just before the closing tag of the body.

Step-by-step reproduction instructions

  1. Install WordPress 5.9
  2. Change the theme to twenty twenty two and other block themes.
  3. Browse the site (super reload).
  4. Check with the Classic theme for comparison.
    If your transmission speed is too fast, you may not be able to check.

Screenshots, screen recording, code snippet

no-style.mov

Environment info

wp-env
WordPress 5.9
Gutenberg 12.4.1 or Gutenberg Disable
chrome

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
@oandregal oandregal self-assigned this Feb 11, 2022
@oandregal oandregal added [Type] Bug An existing feature does not function as intended CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release and removed Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release labels Feb 11, 2022
@oandregal
Copy link
Member

Hey, I can repro this and will look into it. Thanks for reporting.

This is what I know so far: in WordPress 5.8 we introduced a mechanism to only load the CSS of blocks in use. AFAIK, that required a change for classic themes that opted-in into this mechanism, and the styles loaded at the bottom of the body for them. In the other cases (classic that didn't opt-in or block themes) the styles would still be loaded in the <head>. See core ticket https://core.trac.wordpress.org/ticket/53494#comment:8

Somehow, in WordPress 5.9, we've regressed this and they always load in the footer of the body for block themes as well.

@oandregal
Copy link
Member

Prepared a fix for WordPress core at WordPress/wordpress-develop#2303 linked to the trac issue https://core.trac.wordpress.org/ticket/53494#comment:40

@youknowriad
Copy link
Contributor

@oandregal Thanks for opening the fix, this indeed fixes the layout shift due to the "global styles" stylesheet, but there's still a layout shift due to the block supports styles. Should we update these as well?

Also, would be great if we can test this change in the Gutenberg plugin.

@oandregal oandregal mentioned this issue Feb 11, 2022
Merged
@oandregal
Copy link
Member

Fix for loading global-styles-inline-css in Gutenberg properly at #38745

@oandregal
Copy link
Member

@youknowriad yeah, the PRs above don't fix the issue completely. I need to look at the block styles (layout+elements) separately.

@oandregal oandregal mentioned this issue Feb 11, 2022
Merged
@oandregal
Copy link
Member

Gutenberg PR for loading block styles (layout & element) in the head #38750

@oandregal
Copy link
Member

oandregal commented Feb 16, 2022 •
edited
Loading

The two PRs for Gutenberg have landed. I've done a number of tests that boil down to count the layout shift of the page.

These are the recorded screenshots from simulating a "slow 3G" without cache (as reported by Chrome's "Network" tab):

Before After
Captura de ecrã de 2022-02-16 17-13-18 Captura de ecrã de 2022-02-16 17-05-50

There's no longer any layout shift (as reported by Chrome's performance tab):

Before After
Captura de ecrã de 2022-02-16 17-36-17 Captura de ecrã de 2022-02-16 17-36-29

And the performance core web vital has improved significantly. See Cumulative Layout Shift, in particular. The report is for desktop:

Before After
Captura de ecrã de 2022-02-16 17-38-39 Captura de ecrã de 2022-02-16 17-38-30

@oandregal
Copy link
Member

@iidastudio would you be able to test with Gutenberg from trunk and report back if it fixes the issue for you?

@youknowriad
Copy link
Contributor

I'm going to close this issue for now. Thanks for you work André

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

@oandregal oandregal

Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@youknowriad @oandregal @iidastudio