Image block resizer: layout issues in the editor when an image block follows a left or right aligned image block

[andrewserong]

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

2024-09-13.14.22.45.mp4

Screengrab running WP 6.6 without GB enabled

2024-09-13.14.23.31.mp4

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

[andrewserong]

To demonstrate that it seems that the maxHeight value is one of the things causing a difference here, I tried setting the following to an extremely high number:

gutenberg/packages/block-library/src/image/image.js

Line 989 in 6a60081

maxHeight={ maxResizeWidth / ratio }

That then resolves the weirdness of the layout, and as in WP 6.6, the top of the ResizableBox is hidden behind the left aligned image. So I was wondering if the ResizableBox needs to factor in that it might be set after something that's floated?

The closest I've gotten so far is to set clear: both on the ResizableBox, but I'm not sure if that's the right fix, and could cause issues in other kinds of layouts 🤔

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 60d83f89129..e73a93a3752 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -972,6 +972,7 @@ export default function Image( {
 			<ResizableBox
 				style={ {
 					display: 'block',
+					clear: 'both',
 					objectFit: scale,
 					aspectRatio:
 						! width && ! height && aspectRatio

Here's how that might look:

2024-09-13.15.02.59.mp4

@kevin940726 just sharing the above in case that helps at all!

[ndiego]

Since this issue does not appear to be specifically tied to WordPress 6.7, and given how late we are in the release cycle, I believe this should be punted to 6.8. Thoughts @andrewserong?

[andrewserong]

Punting to 6.8 works for me! I've updated it on the board, thanks for the ping.

[stokesman]

I think this issue can pretty much be considered fixed by #68666.

There are still some closely related problems with floated images. I have a couple PRs open (#69381 and #69364) that I expect will take care of those and then we could close this 🤞.

Also, I wanted to mention a related issue #43394 that is seen when testing this one. It’s distinct and will likely be much trickier to fix.

[andrewserong]

Thanks for the update @stokesman, please feel free to close this issue when you think it can be!