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.

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• 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:

Screen.Recording.2024-12-03.at.11.03.03.mov

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[iamtakashi]

I've tested this now again, and the overflow issue still happens.