Stack Block: Featured images with aspect ratio set overflow

[iamtakashi]

Description

Featured images [edit: with an aspect ratio] overflow and break the layout. If you change the stack to a group, the featured image will appear as expected. Disabling the Gutenberg plugin doesn't seem to fix the issue 😧 so if I need to report this somewhere else (trac?), let me know.

Step-by-step reproduction instructions

1. Have some posts with featured images with various proportions.
2. Add a query block
3. Add a stack block inside the post template
4. Add a featured image inside the stack block
5. Try setting different aspect ratios for the featured images.

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.7.1
• Gurenberg Trunk
• TT5, TT4

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[t-hamano]

Thanks for the report.

Unfortunately, I was not able to reproduce this issue. Can you switch to the code editor and paste your HTML here?

It works as expected in my environment:

And here is my code:

<!-- wp:query {"queryId":11,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]}} -->
<div class="wp-block-query">
    <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
        <div class="wp-block-group">
            <!-- wp:post-featured-image /-->
            <!-- wp:post-title /-->
        </div>
        <!-- /wp:group -->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

[iamtakashi]

@t-hamano Oh, sorry! I realised that I missed an important piece of info: aspect ratio 🤦🏻‍♂️

In my testing, the featured images with most aspect ratio options overflowed.

<!-- wp:query {"queryId":12,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"align":"wide"} -->
<div class="wp-block-query alignwide">
    <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
        <div class="wp-block-group">
            <!-- wp:post-featured-image {"aspectRatio":"4/3"} /-->
            <!-- wp:post-title /-->
        </div>
        <!-- /wp:group -->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

[himanshupathak95]

Hey @iamtakashi,

I also tried to reproduce the issue but it works fine even with your provided code. I followed the same steps of reproduction but I wasn't able to reproduce the issue.

Environment

• WordPress: 6.8-alpha-59366
• PHP: 8.2.25
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.3-MariaDB-ubu2404 / Client: mysqlnd 8.2.25)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0

Code Editor:

<!-- wp:query {"queryId":12,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"align":"wide"} -->
<div class="wp-block-query alignwide">
    <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
        <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
        <div class="wp-block-group">
            <!-- wp:post-featured-image {"aspectRatio":"4/3"} /-->
            <!-- wp:post-title /-->
        </div>
        <!-- /wp:group -->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

Screenshots:

Editor:

Frontend:

[beafialho]

I can reproduce this.

Here's a screenshot of a query loop using a stack block with a featured image set to the "Wide" aspect ratio:

If I make the stack block a group block, it looks good:

Environment:

• WP 6.7.1
• Gurenberg Version 19.7.0
• TT5
• Safari Version 17.5

[henriqueiamarino]

It happens to me as well, @iamtakashi. I recorded my screen to share with @t-hamano and @himanshupathak95 here. Everything works fine for the other blocks for gathering elements, but the stacks are really affected.

Environment:

• WP 6.7.1
• Gutenberg 19.7.0
• Chrome Version 131.0.6778.86 (Official Build) (arm64)

[iamtakashi]

@t-hamano @himanshupathak95 It doesn't seem to be just me. Could you try again using different proportions of featured images in each post and trying different aspect ratios?

[himanshupathak95]

Thanks @iamtakashi @henriqueiamarino for the follow-ups.

When I set the image aspect ratio to wide, I was able to reproduce the issue. Here is a screencast for the same:

https://github.com/user-attachments/assets/caf5c106-01bc-4df8-b83a-63c044ec0ddd