Image in row block shrinks on front end but not in the editor

[jgvaldez84]

Description

In a row block, if an image is resized to a specific width and placed next to a multi-lined paragraph, the image appears small on the front end, but is the correct size in the editor. This is confusing for folks learning how to use the row block for layout because the published page is different from what they expect.

Reproduced in the Twenty Twenty Four theme.

Step-by-step reproduction instructions

1. Add a row block
2. Add an image inside and give it a fixed width (300px)
3. Add a multi-line paragraph next to that image block
4. Image is 300px wide in the editor but is only 45px wide in the published front end

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.7.1
Gutenberg plugin not active
Tested in both Twenty Twenty Four Theme and custom Hybrid theme
Mac, Chrome

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

[Mayank-Tripathi32]

The pixel width is not applied correctly on the frontend. Although it is assigned to the element, it appears to be applied relatively, which may be causing the observed behavior.

Here’s a video showing the issue:
Video Demonstration

[Mayank-Tripathi32]

The pixel width is not applied correctly on the frontend. Although it is assigned to the element, it appears to be applied relatively, which may be causing the observed behavior.

Here’s a video showing the issue: Video Demonstration

I think its related to image block itself, as if you add an image with width 1020px, it should overflow on mobile but it doesn't.

Tried with: WP 6.6.2 & 2024 theme

[Mayank-Tripathi32]

Seems to be due to max-width being applied to image, I think we should have a toggle for this?

[andreawetzel]

It seems that in the editor, the width is set to the <div> that holds the image then in the published page, the width is applied to the <img> itself

Screenshot of div with a width value on the editor

Perhaps on the front end the Image Width could be applied to the <figure> element and also give it a flex-shrink:0 to prevent this size from changing?

Screenshot where size and flex-shrink values have been added to figure element on front end to prevent the image from shrinking

[Mayank-Tripathi32]

@andreawetzel Based on my research into previous issues, adding width and height attributes in figure element appears to have been an intentional change related to captions. It might be worth exploring this further to identify a potential fix using max-width application.

Reference: PR #53274

[ellatrix]

I can reproduce, and both removing the max-width: 100% and a wrapper div work. I don't think we should add the div on the front-end though. Not sure what the right solution is here.

[stokesman]

the image appears small on the front end, but is the correct size in the editor

It’s actually the size in the editor that is incorrect because it was decided that the Row block shouldn’t (by default) allow making unresponsive designs—discussion here: #45364 (comment).

So the indicated fix is to have the width also shrink in the editor. I’ve tinkered with it a bit and it doesn’t seem too straightforward due to element(s) that wrap the img in the editor. It looks like we may need to remove the Image block’s innate sizing controls when it’s inside a flex layout.

It’s also been discussed that dimensions controls for flex children might be extended to allow setting a no-shrinking size (i.e. styles output with flex-shrink: 0). Such a setting could perhaps be implicitly turned on for an Image block that has an explicit size even if there is no control in the UI yet. Although perhaps we’d want to add a warning in the UI that it can make the image unresponsive.

[stokesman]

I have #68666 open and it resolves this in my testing. I’d appreciate if anyone subscribed here would test that PR and report there if it resolves this.