Image Block: When replacing a resized image by another image, the image proportions are preserved inside the editor but not on the front-end (WP 5.5 beta2)

[dianeco]

To reproduce

1. Inside the editor, insert an image.
2. Resize the image to a smaller size using the resize handles.
3. Replace the image by another one.
4. Observe that visually the new image is distorted and has the same proportions as the replaced one. If you preview the front-end (or if you switch back and forth between the code editor and the visual editor), you’ll see that the image has, in reality, its own dimensions.

Tested using WordPress 5.5 beta 2 and WP 5.4.2 + Gutenberg 8.5.1.
The bug happens on Chrome, Firefox and Edge on both Windows and Mac.
It's working fine on Safari.

[annezazu]

Thanks so much for reporting this @dianeco! Noting that I could replicate this with WordPress 5.5 RC and Gutenberg 8.6.1

[paaljoachim]

I was also able to replace this error using Twenty Twenty One, WordPress 5.6 and Gutenberg plugin version 9.8.
(Tested with Safari.)

Isabel @tellthemachines I see this was added to WP 5.6.x Must Haves. Should we move this to the new project board for 5.7 ? Pinging Robert @noisysocks as well.

At the moment we have a lot of different Image block bugs. Hopefully many of these can be fixed for 5.7.

[Mamaduka]

Currently, we're resetting image dimensions attributes when changing to a different image. See #16125.

I think the ResizableBox component should also reflect this reset. It's ignored for some reason now.

Happy to work on this issue.

[paaljoachim]

Thanks @Mamaduka George!
I went ahead and assigned the issue to you.