Image block content overflows boundaries inside editor

[zaguiini]

Description

When wrapping an Image block inside a layout block (i.e. Columns), the block contents leak the container.

That only happens if you specify custom dimensions to the image. Otherwise, it will just fit the parent's width.

Should we add a toggle that allows overflowing the parent's dimensions or is this totally expected behavior?

Step-by-step reproduction instructions

1. Open the block editor;
2. Add the Columns block;
3. Add an Image block to the first column;
4. Set custom dimensions to the image.

Check that the image overflows its container.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.8.2;
• Gutenberg 11.9.1.

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

[cngodles]

In looking at the editor, it appears that the <img> element is actually overflowing the grandparent <figure> element. I say grandparent because there is a <div> as a parent to the <img> that has inline styles applied in response to the resizing.

I went further and attempted to manually change the width of the <figure>, but even with larger sizes, the columns won't budge in the editor.

Below is a screen recording of how the columns respond in the editor. I colored the columns blue and the figure yellow. The figure has been expanded to 390px manually to test if the figure would overflow the container. I am dragging the column count from 1-6 and back.

It seems that the flex styling of the columns is rigid. The column control would need to be adjusted to allow more flexible columns sizes. This may be a simple vs complex decision made for the UI, to avoid making this control more difficult to use.

[shaunandrews]

In my brief testing, it seems the editor's extra markup is causing the image's max-width: 100% to work differently than it does on the front-end; On the front-end, the image respects the max-width and adjusts itself to the width of the column.

[jasmussen]

Is this the same issue as #36789?

[Mamaduka]

I've been reviewing the Image block issues, and we have 5 or 6 reports of the same problem. Let's consolidate them and close others as duplicates.

[annezazu]

Noting this came up in the FSE Outreach Program's Front Page Fun call for testing
while using the grid layout option:

When I added images inside the grid and set their width to 100%, the images overflowed the container in the editor, but preserved the correct width on the front-end. The code there has a figure tag enclosing the img tag with max-width: 100%, which prevents the overflowing

[jordesign]

Closing this as a duplicate of #12168 (where similar issues are being consolidated)