Image Dimension controls on the Image Block don't work

[maddisondesigns]

Describe the bug
Image Dimension controls on the Image Block don't work.

Clicking the 25%/50%/75%/100% buttons doesn't change the size of the image.

If you click the down arrow on the width or height control, it first resets to 1 for some reason (rather than reducing the width/height by 1), and when you keep increasing or decreasing the width/height, the image size doesn't change, nor does the corresponding value in the other number field.

Vid: https://cl.ly/e369824b62d5

To Reproduce
Steps to reproduce the behavior:

1. Insert Image Block
2. Select image from Media LIbrary
3. Click the Image Dimension (25%/50%/75%/100%) buttons
4. See that the image size doesn't change

Expected behavior
Clicking the image dimension buttons or changing the number fields should change the image size.
Clicking the down arrow on the number field shouldn't reset the value to 1.

Desktop (please complete the following information):

• macOS Sierra 10.12.6
• Firefox Quantum 63.0.1 (64-bit)
• WP 5.0-beta3-43867

[designsimply]

Thank you for testing! Want to add a quick note first to say I am helping to separate out issues for the plugin here in this repository and move anything that's happening in WP-5.0-beta-only to https://core.trac.wordpress.org/

I tested with WordPress 4.9.8 and Gutenberg 4.2.0 and found that changing the image dimensions works as expected for me. (49s)

I also tested with WordPress 5.0-beta3-43876 and found similar results. (1m13s)

I think this is actually a misunderstanding about the UI which could actually be pretty common. It looks to me like image dimensions are relative the original image size but that you were expecting the percentages to be relative to the editor content_width, is that a fair assessment?

[maddisondesigns]

Ahhh ok. Yeah, you're right. That makes sense now that you've explained it like that. Thanks.

Yep, as you said, what I was expecting is that the image size changed relative to what you see in the editor. And again, I think you're right in saying that this is going to confuse a lot of people.

I'm wondering if that wouldn't be a better experience. If we could specify the content_width (along with wide & fill widths), and the editor actually adjusted according to those specified widths, then maybe the 25%/50%/75%/100% buttons should actually be relative to that content_width.

Alternatively, if it remains as is, perhaps show a message when the selected % size is still larger than the content_width, similar to how you display a message when background/text colours are hard to read. This would at least tell people that yeah, you've selected a smaller size, but you may not see a difference since your image is really large. Just a thought, anyway.

[azaozz]

image dimensions are relative the original image size but that you were expecting the percentages to be relative to the editor content_width

Right, and that is a bug. The image file size has (almost) nothing to do with displaying the image on the front-end. That is controlled by the browser and the srcset, sizes, width, height attributes.

It doesn't make sense to set the width and height attributes to impossibly high values. This prevents the image from being "responsive". For example: uploading a photo taken with newer cellphone. The image size is typically something like 4000px X 3000px. Setting that to 50% yields an <img> tag with "bad" width="2000" attribute.

This is one of the things fixed in #11377. Been trying to split that PR so going to "port" the fix here. See # 7 in #11377 (comment)

[skorasaurus]

(stumbled on this while I was doing some image debugging):

What still needs to be resolved for this issue:
image dimensions are relative to the original image size but that you were expecting the percentages to be relative to the editor content_width

Perhaps we could rename the issue title to more accurately reflect the issue?

[paaljoachim]

Brainstorming...

Image dimensions are relative to the original image.
For instance showing an image Full Size. Without clicking the Image dimensions I do believe the editor is showing the image at 100%. Checking the frontend I see the image at Full SIze.

Clicking for instance 50%, 75%, 100% will expand the image beyond the boundry box.

An example at 100%.

The frontend will show the same preview as Full Size.

Adjusting to 25% or 50% is visible at the frontend. Using 75% or 100% will not show any change on the frontend, but the backend shows the adjustment and it goes far out of the boundry box and out of the document. As seen in the above screenshot.

The Image dimensions settings is a feature that needs to be fixed.

[paaljoachim]

I will close this issue so that we can instead focus on:
Image with size breaks out of editor block
#12168