Gutenberg: Image with size breaks out of editor block

[johngodley]

I'm not sure if this is a bug or expected behaviour, but reporting it as a bug anyway.

If you add an image to a post and set the size of that image to anything other than the default, it breaks out of the block. The image displays as expected on the front end (sized accordingly)

Here's an image that was dropped into the editor:

If I open the block options and change the dimensions:

The image has now broken outside of the block:

Pressing 'reset' on the image dimensions brings the image back inside the block.

Expected behavior
The image to stay inside the block

Mac & Chrome

[mrwweb]

Ran into this same issue in #11159. Unsurprisingly it also happens when the block is in a column.

[mrwweb]

Just to add some more context, this is also true when resizing via the pixel-size editor and may also be true when using the percentage controls if the image is constrained when first inserted but the percentage size of the image is greater than 100%.

[designsimply]

Closed #13220 as a duplicate and am including the screenshot here for reference:

/hat tip @hedgefield.

[designsimply]

Closed https://github.com/WordPress/gutenberg/issues/13944 as a duplicate and adding their testing steps and screenshots for reference:

Steps to reproduce the behavior:

1. Add an Image
2. Choose Image Site "Full Size"
3. Click the "100%" Button in the Image Dimensions section.
4. See error

Screenshot showing the Error:

/hat tip @derweili

[designsimply]

Noting this was also reported at https://github.com/WordPress/gutenberg/issues/13959 for a scenario where if you add an image using the mobile app then try to edit using Gutenberg, the images are not constrained to the width of the editor making them difficult to work with:

screenshot 4 - photo added via mobile app as viewed from wordpress on pc - image is not in a block

[Zodiac1978]

Unsurprisingly it also happens when the block is in a column.

Still broken in Gutenberg 5.6.1 if Percent values are used. Please see this video:

[Addison-Stavlo]

I have a PR open #19541 that restricts the image from growing outside of its block. This seems to work well for fluid-width based themes, nested image components, and has good behavior with the sidebar settings for % values.

Some more eyes and testing on this PR would be appreciated.