search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

Latest Posts Block causes CLS #28503

Open wormeyman opened 3 years ago

wormeyman commented 3 years ago

Description

Latest posts block in grid view causes CLS (Content Layout Shift) because the images are not pre allocated a size due to being in a list item.

Step-by-step reproduction instructions

  1. Set homepage as a static page
  2. Put a latest posts block at the top of the page you set as a static homepage
  3. Change block settings to grid view, Display featured images, Image size medium, add link to featured image, 4 items, 4 columns.
  4. Save you settings you should have a block in a page with four images and four titles.
  5. Load your new homepage.
  6. The titles load and then the images pop in pushing the content down causing CLS.

Expected behaviour

  1. The container holding the image would have a size pre-allocated so that there is no layout shift
  2. A good example of it working is Genesis Blocks they not have this problem as they are just loading a picture and the content without it being in an unordered list.

    Actual behaviour

  3. There is no width or height of the LI so when the images load in the push the content around.

    Screenshots or screen recording (optional)

    cls

Code snippet (optional)

<!-- wp:latest-posts {"postsToShow":4,"postLayout":"grid","columns":4,"displayFeaturedImage":true,"featuredImageSizeSlug":"medium","addLinkToFeaturedImage":true} /-->

WordPress information

Device information

paaljoachim commented 3 years ago

@ntsekouras and @aristath I think you both would like to know about this issue.

aristath commented 3 years ago

In the twentytwentyone theme we did some nifty calculations in order to avoid this issue, perhaps we should port some of that logic? See https://github.com/WordPress/twentytwentyone/blob/7e5708f040013c2b158dd5b4f3b9b7f36fb71a96/inc/template-functions.php#L405-L447 for details

wormeyman commented 3 years ago

@aristath My example Gif is on the Twentytwentyone theme so I'm not sure that solution is working.

paaljoachim commented 3 years ago

I happen to come across this Gutenberg support issue which mentions CLS in relation to Image blocks: https://wordpress.org/support/topic/cls-because-of-image-blocks-in-gutenberg/ Thought I would add it in here...