Opened 3 years ago
Last modified 3 years ago
#55585 new defect (bug)
WordPress 5.9 wp-container styles introduce Cumulative Layout Shift
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.9 |
Component: | Themes | Keywords: | |
Focuses: | css | Cc: |
Description
I'm using the latest stable WordPress version and Generatepress theme which doesn't support the newest fullsite block editing and templates (like the majority of themes right now).
I understand that the new wp-container-NUMBER
styles were added to allow better customization. But in the current implementation they’re cumbersome, repetative and introduce Cumulative Layout Shift.
First of all, repetative styles are not being bundled together. Styles are being defined even if they'll never be used (I don't have tags that use alignleft
or alignright
in those blocks). And it makes no point in defining tags if they have default values.
Default Gutenberg container block (at least for me) doesn't even have an option to change margins for child elements.
<style>.wp-container-2 .alignleft { float: left; margin-right: 2em; }.wp-container-2 .alignright { float: right; margin-left: 2em; }</style> <style>.wp-container-3 .alignleft { float: left; margin-right: 2em; }.wp-container-3 .alignright { float: right; margin-left: 2em; }</style>
So a better output would be:
<style>.wp-container-2 .alignleft, .wp-container-3 .alignleft { float: left; margin-right: 2em; }.wp-container-2 .alignright, .wp-container-3 .alignright { float: right; margin-left: 2em; }</style>
Or even no output at all, since those are default values.
Now to the topic of Cumilative Layout Shift. Currently wp-container
inline styles are being output in the wp_footer
action unless user theme supports newest templates feature. This results in the following behaviour during the loading (Default Social Block as an example):
And after page is fully loaded it looks like it's intented to be:
Those styles either should be output in the wp_head
action or right before block tags.
Thanks for creating this ticket.
Many of this issues are being looked at as part of the styles engine work.
See https://github.com/WordPress/gutenberg/pull/38974 and https://github.com/WordPress/gutenberg/pull/39374 as examples of experimentation around this issue.
In summary, consolidation and deduplication of the styles is a goal. So is loading them in the page as a consolidated style sheet. It's still in the early phases.
I'm thinking it might be better to create a specific issue in Gutenberg for this, since it's something that would be fixed there initially.
Cumulative Layout Shift is something we should also take into consideration, so thanks again for raising it.
Here's the tracking issue over in the Gutenberg repo: https://github.com/WordPress/gutenberg/issues/38167