Make WordPress Core

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: rinart73's profile rinart73 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):
https://i.ibb.co/kmCtVVC/2-Annotation-2022-04-18-070146.png
And after page is fully loaded it looks like it's intented to be:
https://i.ibb.co/v3smntX/1-Annotation-2022-04-18-070139.png

Those styles either should be output in the wp_head action or right before block tags.

Change History (1)

#1 @ramonopoly
3 years ago

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

Note: See TracTickets for help on using tickets.