Image block not resizing correctly

[ice9js]

Description

I noticed the image block breaks when you attempt to resize it if Insert from URL feature was used and the image is using left, right or center align.
The image appears fine in the editor but you'll notice negative values for width and height in the sidebar - once you reload the editor or go into the preview the image will be sized differently.

Step-by-step reproduction instructions

1. In the post editor, add a regular image block (core/image).
2. Use Insert from URL option in the image placeholder to insert an image from a URL.
3. Select Align Left, Align Right or Align Center from the alignment options in the toolbar.
4. Resize the image by grabbing one of the handles at the edge and moving it.
5. Watch width and height settings in the sidebar while you're resizing it.

Note: I noticed that if I start resizing an image as soon as I add it and then change block alignment, the bug no longer occurs.

Screenshots, screen recording, code snippet

Environment info

I've noticed this issue on WordPress 5.9-beta2-52363 as well as Gutenberg 12.1.0.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[glendaviesnz]

I wasn't able to replicate this on the latest GB trunk:

I wonder if it was fixed by #37210, @ice9js is it possible for you to retest in an environment with a build of the latest GB trunk?

[MadtownLems]

@glendaviesnz - Are you able to re-test with one minor tweak?

I am experiencing the same negative width/height when an aligned image is resized SMALLER. (It actually doesn't matter if it's from URL or media library). But a key part of the problem is that the FIRST drag-to-resize needs to be smaller, not larger.

When I align an image, then drag it smaller, I get negative a negative width and height.

[MadtownLems]

I have confirmed this bug still exists on 5.9 (no Gutenberg plugin).

Simply: Add an Image Block Select an Image Align it Right Drag to Resize it Smaller. Notice that you now have negative image dimensions set.

[Mamaduka]

Here are my results. WP 5.9 without Gutenberg.

https://user-images.githubusercontent.com/240569/152385824-e14c857e-c963-444f-9469-003224d98775.mp4

[MadtownLems]

And here's my screencast. ( also WP 5.9 without gutenberg 🤔)

https://user-images.githubusercontent.com/945157/152389881-0eab562e-5567-4141-a798-68baf0c07dc7.mp4

[glendaviesnz]

Thanks for the extra detail @MadtownLems, I was able to replicate this on GB trunk if I make the image smaller first. Interesting that it is fine for you @Mamaduka, I wonder if it is something to do with the original dimensions/aspect ratio of the image as well? I will try and take a closer look at it today.

[glendaviesnz]

I haven't had any luck tracking this down yet. For some reason, the ResizableBox component in some instances returns a negative value, even though the minHeight and minWidth values are positive values.

[Mamaduka]

Thanks for the confirmations, @glendaviesnz.

I think narrowing down the "requirements" to constantly reproduce the issue will be very helpful for tracking this down

[glendaviesnz]

I think narrowing down the "requirements" to constantly reproduce the issue will be very helpful for tracking this down

Yeh, it mostly did it for me, but sometimes didn't, and wasn't able to isolate what was the difference. I will take another look at it next week if someone else doesn't get to it.

[MadtownLems]

FWIW, I am no longer experiencing this particular image block sizing problem on 6.2

[perkele1989]

I am experiencing this issue on 6.2

Using an SVG, editing the header of a site using the theme Launchify. When inspecting in HTML, it gets negative values. Results in a huge file. Cant change it to positive values in HTML because block editor says it got unexpected stuff.