Post Thumbnail block: Aspect ratio incorrect in Chrome when used in Query Loop → Stack

[andersnoren]

Description

When a Post Thumbnail block is used inside of a Stack in the Query Loop Post Template, the aspect ratio set on the image isn't rendered correctly in Chrome. The footprint of the image block is correct, but the image itself doesn't fill the space of the aspect ratio. It works correctly in Safari and Firefox.

Step-by-step reproduction instructions

1. Create a new page.
2. Insert a Query Loop, add a Stack, and add a Post Thumbnail block inside it.
3. Set the Post Thumbnail to the 9:16 (tall) aspect ratio.
4. Publish the page, and view it in Chrome.

You can copy the block markup I used here.

Screenshots, screen recording, code snippet

Environment info

WP 6.4.2 Gutenberg 17.2.2 Twenty Twenty-Four 1.0 Chrome 120.0.6099.109 (arm64)

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

[t-hamano]

Thanks for the report.

I was also able to reproduce this problem. This is very strange, but it seems to only occur with the combination of stack layout and Post Featured Image.

• Set a post featured image for the post.
• Insert a Stack block.
• Insert a Post featured Image inside the Stack block.
• Apply AspectRatio to the Post Featured Image block.

aspect-ratio is applied to the figure element, which is a block wrapper element, and this element has the correct aspect ratio. However, even though the img element inside has height:100% and object-fit:cover, it does not fill the empty space.

[gaambo]

Just had this happen to me in chrome/edge. I have a query loop with a flex-layout group inside of each item containing the featured image block with an aspect ratio of 3/2:

<li
  class="wp-block-post post-8278 post type-post status-publish format-standard has-post-thumbnail hentry category-nachwuchs"
>
  <div
    class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-7 wp-block-group-is-layout-flex"
  >
    <figure style="aspect-ratio: 3/2" class="wp-block-post-featured-image">
      <a href="#" target="_self"
        ><img
          loading="lazy"
          decoding="async"
          width="180"
          height="240"
          src="%image_src%"
          class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
          alt="%alt%"
          style="width: 100%; height: 100%; object-fit: cover"
          srcset="%srcset%"
          sizes="(max-width: 180px) 100vw, 180px"
      /></a>
    </figure>

    <div style="font-size: 0.75rem; text-transform: uppercase" class="wp-block-post-date">
      <time datetime="2024-04-29T06:51:17+02:00">29. Apr 2024</time>
    </div>

    <h2
      style="font-size: 1.13rem; font-style: normal; font-weight: 700; text-transform: none"
      class="text-decoration-none wp-block-post-title"
    >
      <a href="#" target="_self">Post Title</a>
    </h2>
  </div>
</li>

In my case I had an additional width: 100%; set to .wp-block-query .wp-block-post .wp-block-post-featured-image which was somehow required for some portrait images to scale up correctly.

(temporary) solution: To then fix the bug described by OP I had to set max-width: 100% to .wp-block-query .wp-block-post .wp-block-post-featured-image.

.wp-block-query .wp-block-post .wp-block-post-featured-image {
  /* Fix aspect ratio for some portrait images */
  width: 100%;
  /* fix for https://github.com/WordPress/gutenberg/issues/57097 */
  max-width: 100%;
}