Description

Found while testing #64819 (review):

In the editor, if an image block follows a left or right aligned image block, then the position sizing of the ResizableBox appears to affect the layout of images within the canvas, in an unexpected way. I'm not too sure what's going on here, but it seems that the presence of the ResizableBox and how it works creates an inconsistency between the editor and site frontend.

While testing this issue out, I thought at first that the issue wasn't present in WP 6.6 without Gutenberg enabled. However, I think it was still present, but a little hidden as the maxHeight value in the ResizableBox is usually large enough that it doesn't affect the positioning of the image that follows the left/right aligned one. However with a big enough screen size I could still reproduce the issue.

Step-by-step reproduction instructions

1. Create a post and add a few images to it
2. Beyond those images, add some other blocks. In my example I've used a Columns block with 3 columns, each containing a paragraph block and another image
3. Set the first image in the post to be left aligned
4. Click on the next image in the post. Note that the positioning will not look correct

Screenshots, screen recording, code snippet

Screengrab running Gutenberg trunk

Screengrab running WP 6.6 without GB enabled

Environment info

• WP 6.6
• Gutenberg trunk

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