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

[david-szabo97]

This issue is similar to #12914 and #12277 . Tackling this could fix many other issues like #17685 and #12168

Describe the bug
Image Block is different in the editor and on the frontend if the width and height are changed to a different aspect ratio other than the original. For example, changing 750x750 image to 250x500 causes it to be stretched in the editor, but still, be square on the frontend.

To reproduce
Steps to reproduce the behavior:

1. Open block editor

2. Add Image block

3. Upload/Select a square image (for example 750x750) (this bug is not tied to this specific aspect, I just want to make sure the reproduction steps will lead to the same results)
   

4. Change the width to 250 ( you will see width = 250, height = 750, which is already strange since the rendered image is square)
   

5. Change the height to 500 ( you will see width = 250, height = 500)
   

6. Now the image is stretched vertically in the block editor

7. Save

8. Open frontend and see the image is still square
   

Expected behavior
Rendered image in the block editor and on the frontend should match.

Editor version (please complete the following information):
Confirmed in WP 5.5 Core (no plugin) and WP 5.5 Gutenberg: 8.9.0-rc.1

Desktop (please complete the following information):

• OS: macOS Catalina 10.15.6
• Browser: Google Chrome
• Version: 84.0.4147.135

[mattwiebe]

This is an interesting bug. The image is output with proper width and height attributes, but it's actually the theme stylesheet that is messing things up with height: auto, which is nearly always helpful (maintaining aspect ratio is usually good and overriding it is usually accidental). It also explains why step 4 above maintained the ratio.

So this is tricky. We could, off the top of my head:

1. inline a style attribute to explicitly set the width and height in CSS to be more explicitly true to the interface, but at the cost of some other unexpected behaviour, and needing to run some deprecations
2. disallow height: auto in theme stylesheets
3. adjust the interface to add a preserve aspect ratio checkbox that is selected by default and automatically adjust width and height in each other's terms. I guess we'd still need to inline at least the height within the style attribute though. At least we could preserve that for cases when aspect ratio has been knowingly and explicitly overridden.

I'm not familiar with the history of the image block interface, but no.3 makes the most overall sense to me.

Is there anything I missed here? I didn't see this in the other issues linked above, but I think they may boil down to the same thing.

[Thelmachido]

I can still reproduce this issue on

Gutenberg 13.8.1

WordPress 6.0.1

Twenty Twenty Two theme

Screen.Recording.2022-08-05.at.23.24.06.mov

[paaljoachim]

I just tested this again today with the Gutenberg plugin version 15.8.1.

This is still valid.