Gutenberg: 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 https://github.com/WordPress/gutenberg/pull/11377#issuecomment-437348279

[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?