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 #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 #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.

[paaljoachim]

Testing this out with the current default theme, WordPress version and the Gutenberg plugin.

Testing with Theme Twenty Twenty One
WP 5.6
Gutenberg plugin 9.5.2

In relation to for instance using columns. Clicking Full size image keeps the image within the column or so it seems most of the time. (I suddenly had it jump out of the boundary a few times, so it is not stable. It might have something to do with also testing the theme Twenty Twenty.)

Clicking % values does not keep the image within the column boundry box.

[thetwopct]

Related to this issue, I'm having a lot of issues with my clients not able to see the sidebar because of images not responding to max-width.

If I insert an image, it will be inserted and limited to the max-width of wp-blocks and also pay attention to the presence of the Settings sidebar. All fine.

If the image is resized at all using the handlebars (bigger or smaller it doesn't matter), the image stops responding to the max-width of .wp-blocks and the sidebar. So if the screen is too small, the sidebar is pushed off of the page.

This issue becomes more common on sites where the width of the editor has been increased (as per theme support instructions)

[paaljoachim]

Hey James.

Thank you for the feedback!

I am testing with a local site running Desktop Server.
Theme: Twenty Twenty One.
Active plugins: Gutenberg 9.8 (at the moment RC)
WordPress version 5.6

Here are a few things that I notice when using the 100% image dimension.

--

---

--

Resizing the browser normally resizes nicely. But if one nudges the handlebars resizing the window does not look pretty.

@noisysocks Robert. I am wondering if this might be associated with the Image captions issue #17162 that we added to the WP 5.7 "Must haves" project board. As it has to do with the image bounding and how this needs to be fixed in relation to image captions and resizing an image. I am wondering if a bigger fix is needed for the Image block. I do believe this issue also needs to be added to the 5.7 project board.

@WordPress/gutenberg-core

[tellthemachines]

This issue was discussed to exhaustion in #19541 with no satisfactory outcome, but I'll try and summarise our choices here:

1. Remove the percentage buttons altogether, because they're currently not working, whatever the intended outcome is. Not working in this context means their current effect on the editor isn't reproduced on the front end.

2. Fix the default styles so that the current overflow effect in the editor is reproduced in the front end. That would require removing this line. This may not accomplish much because theme styles usually override those styles anyway.

3. Change the button functionality so that they set a percentage width relative to the image container, rather than relative to the image size in px. This could be as simple as setting an inline percentage width on the img element, but as all the back and forth in Image Block - Fix scaling image outside block parent in editor. #19541 shows, there may be more to it than that.

My personal preference is 3., because currently there is no other way of sizing an image relative to its container, whereas sizing relative to the image size in px can always be accomplished by editing the px values directly. Also, resizing as a percentage of the container makes a lot more sense in a responsive world than as a percentage of whatever random px size the image file has.

[mrwweb]

I would more be in favor of just removing the buttons as it's never been clear to what the percentage is relative to (or at least intended to be relative to).

Further, for responsive sites (all sites...), any setting that sets a numeric value width of any sort (percentage, rem, px, etc.) on images is likely not accurate for all viewport sizes. (For instance, I'll often set max-widths for images that are left/right aligned on large screens but show the images at full width on small screens.) See #21836 and #26642 regarding image alignments that tightly relates to responsive sizing.

It feels like the only way to solve this constellation of issues is a pretty big rethink of image sizing and alignment with an approach that makes sense with responsiveness, has a UI that reflects that, and ideally works out of the box with a majority of themes.

[paaljoachim]

It feels like the only way to solve this constellation of issues is a pretty big rethink of image sizing and alignment with an approach that makes sense with responsiveness, has a UI that reflects that, and ideally works out of the box with a majority of themes.

and where the image caption also is nicely placed in relation to the image. Perhaps through inline caption alignment toolbar.
#12997 and #19975

These various things sounds like a good challenge for the G2 component design tools.
@ItsJonQ and @jasmussen

[draganescu]

I too would like to add my personal lack of clarity on what those percentage buttons do. I would also remove them, and as a second choice, if people are keen on using these fixed percentages, fixing them to be relative to the container.

[talldan]

There was a detailed report of the same issue in #28617, which has now been closed as a duplicate.

[deborah86]

I am also experiencing this issue.

[paaljoachim]

I will close my issue and instead add some associated Image block issues which have not yet been fixed.

Image Block rendered image in the editor doesn't match the rendered image on the frontend
#24970

Setting image to > 75% width makes it break out of block boundary & causes horizontal scrolling
#17795

Image Block: Inconsistent image resizing
#17685

Image Block: Changing alignment removes image resizing
#23288

[codewizard13]

I'm posting this screenshot to confirm this issue still does not seem to be resolved, even in 2023. Seems very basic. An image I inserted into a new post exceeds the width of the .entry-content class item.

[draganescu]

The percentage controls have been removed in the mean time but making the image very big still makes it break out of the block and the result is not consistent with what's rendered on the front end.

[maljones]

@draganescu Is there a filter / way to add the percentage controls back in, knowing that they make break sizing in certain cases. I've got 2 clients so far that used that as essential parts of their work flow due to variances in image sizes that they have.

[draganescu]

@maljones can you provide more depth on what the usecase is? The image block still has controls for size (albeit not percentage but pixel size).

Unofortunately I can't name a way to bring those back. One could use the BlockEdit filter and filter the image block's edit component to add custom controls.

[maljones]

Sure! apologies for the lack of detail before.

Background: Client has images of certain type added inline to content. In this example, it is a map identifying a population area of an animal, that varies in size (sometimes 1024 pixels, sometimes 300 pixels). They don't have control over the size of the image as they are delivered from an external source. Additionally they are working on a site that had hundreds of pieces of content migrated to block editor, yet are still on an old theme.

Client Action: They upload an image, and quickly set it to 50% or 75%, align it properly, and are done. The theme then treats it responsively and overwrites that percentage on mobile sizes.

Why this works for them: They don't need to think in pixels each time they get in image, because 50% or 75% works for them. Without those quick controls, they need to think on the fly, slowing down their process.

The second client use case is similar, albeit on a more modern theme.

The change is now asking editors that have little to do with thinking in pixels / graphically to change their workflow, when they should just be focusing on content and I work out the design part of it.

[draganescu]

@maljones Thanks for the context I understand the problem better now.

The biggest issue with % sizes is that it's very hard to figure out % of what? Add aspect ratio to that and it becomes even more mind boggling, and with the width/align control it becomes impossible - what is 50% of wide and in which direction should it grow?

I am not saying % sizes shouldn't be back (@ajlende has been exploring adding multiple units to media sizing afaik) but they need to be much better represented in the UI compared to the past version.

Did you try to add the controls via the BlockEdit filter in a plugin? It should be possible to emulate precisely the tool behavior that was removed. 😆 don't take this as passing the burden to you, but it's going to take much lonher to reimagine the % sizing in media blocks compared to trying a fix today via plugin.

[Robertght]

I encountered this with another user as well while using the column block and resizing the images using the resizing points. Example:

[draganescu]

@Robertght what was the expected behavior there? To make it impossible to resize beyond the width of the column?

[mrwweb]

@draganescu

what was the expected behavior there? To make it impossible to resize beyond the width of the column?

It might be helpful to know the answer to the "opposite" (sort of) question: What is the intended behavior in the block editor for when an image should be allowed to exceed 100% of it's parent width?

[Robertght]

Great follow-up! I didn't think about it until I saw the questions. :)

Personally, I'd like to see the image stay within that column container. In other words, yes - make it impossible to go beyond that width. Only the column width setting should be able to dictate the maximum width of the image. As long as other elements, like the paragraph block, isn't going outside the container, so should the Image block.

Thank you!

[josefinemk]

I've been having the same issues since this update and it's been rather painful. Because I used the 75% feature all the time, this update actually resulted in 100s of images across 100s of blog posts being broken or in a wrong format (often way too big for the site on mobile). I've been reaching out to multiple developers and my theme builder and there's no quick solution to fix this other than adding hard CSS on top... So getting the feature back would be super helpful!

[landwire]

It would be great to have the image percentage controls back and that they work on the width of the current containing block. So if the image is in a column of 75% and the image itself is set to 50%, it should take up 50% of the columns space.
At least this is what I would expect. And of course we would also need some responsive controls to be able to make this image 100% on smaller devices, if that is desired by the design.

[josefinemk]

I agree @landwire :)

[Jastos]

This still seems to be an issue. For those looking for a quick patch for the image being able to expand outside of it's column container, you can add this CSS to your editor stylesheet:

.wp-block-image .components-resizable-box__container { max-width: 100% !important; }