[wp-trac] [WordPress Trac] #55585: WordPress 5.9 wp-container styles introduce Cumulative Layout Shift

[WordPress Trac]

#55585: WordPress 5.9 wp-container styles introduce Cumulative Layout Shift
--------------------------+-----------------------------
 Reporter:  rinart73      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:  5.9
 Severity:  normal        |   Keywords:
  Focuses:  css           |
--------------------------+-----------------------------
 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):
 [[Image(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:
 [[Image(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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55585>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform