Image block: Aspect ratio not responding when dimensions are not set.

[juanfra]

Description

I discovered this one when working on a pattern for Twenty Twenty-Five.

When adding images in a pattern, it's likely that the dimensions (width and height) are not set. For example:

<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/grid-flower-2.webp' ); ?>" alt="<?php esc_attr_e( 'Black and white flower', 'twentytwentyfive' ); ?>" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

The code shared above will try to use a "squared" aspect ratio, which will look good in the site editor context, but when viewed in the front end, it won't respond. For the aspect ratio to work, at least in Firefox, the image's width must be set. In Chrome, it also happens when the image is narrower than its wrapper.

This affects how a pattern bundled with TT5 is viewed in Chrome, so I was wondering if we could consider shipping the fix with 6.7

Proposed solution
Setting the initial width of .wp-block-image img to fit-content should address the issue.

Step-by-step reproduction instructions

1. Install TT5.
2. Add a page.
3. Add the "Call to action with grid layout with products and link" pattern.
4. Check that the first image of the grid has the square aspect ratio and it is correctly displaying squared in the editor.
5. Save and view the page in Firefox.
6. Confirm that the first image is maintaining its original aspect ratio.

Screenshots, screen recording, code snippet

Screen.Recording.2024-10-16.at.17.22.20-lw.mov

Screen.Recording.2024-10-16.at.17.46.52.mov

Environment info

• WordPress 6.7-beta3
• Gutenberg trunk
• Twenty Twenty-Five trunk

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

[kevin940726]

Since #66804 was merged and the original fix was reverted, this should be reopened.

[bradhogan]

In Chrome, the fit-content width is not working. In the example screenshots attached, you'll see the column width is 50% and takes up half the screen yet the image does not span the entire space. The behavior is very inconsistent so I can't provide exact steps to reproduce, but it happens with the default 2025 theme and only Gutenberg and in Chrome. Not noticing the issue in Safari.