Image block: center/left/right alignment with caption forces max-width & max-height in editor - Gutenberg 15.0

[sophiegyo]

Description

This is a bit of a weird one. I had someone asking me for help with this, which is why I'm reporting it.

If I have WP 6.1.1 and Gutenberg 15.0+ (currently tested with 15.1 but I'm pretty sure it came in with 15.0), when I add an image block to a post or page, and have it show a caption, it adds inline styling to set a tiny max width and height.

It looks fine in in preview/live, this only happens in the post/page editor. I tested very briefly in the Site Editor but it looks fine there. This also does not appear to happen for no, wide, or full alignment - only for centre, left, and right.

I did search in case I could find any similar issues in the repo - this is the closest one I could find: #46725

Step-by-step reproduction instructions

1. Start from any WP site with only Gutenberg 15.0 or higher active
2. Add an image block to a post (or page, or other custom post type I guess, but I only tried with posts/pages)
3. Center, left-align, or right-align, and ensure there's a caption visible
4. Save or publish
5. Exit editor
6. Re-enter editor to edit your post
7. See image block looks tiny

Screenshots, screen recording, code snippet

Here's how it looks:

Here's the inline styling - it gets added in the direct child div of the figure tag:

I noticed there's also a min-width inline style applied to the caption, but I have no idea how they interact and why this happens:

Environment info

WP 6.1.1 Gutenberg 15.1 (I'm pretty sure it started from 15.0 though) Twenty Twenty-Three, Twenty Fifteen, Twenty Eleven themes

Browser tested: Firefox 109 Mac OS 12.6

-- It's definitely Gutenberg, I tried deactivating Gutenberg and the images with captions are just fine in the editor.

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

[sophiegyo]

Just a thought, could this be related to Prevent the image from being resized larger than its container?

[ndiego]

I just tested this. I am not seeing small images, but I am seeing some weirdness with left and right aligned images. When refreshing the page, the width of the aligned image is no longer constrained by the container width. Setting and resetting the alignment corrects the issue.

It does seem likely that these issues might be related to https://github.com/WordPress/gutenberg/pull/45775. cc @d-alleyne @kevin940726 would either of you have time to take a look?

[sophiegyo]

@ndiego Thanks for testing! Your recording definitely shows that weird alignment. When you tested, did you have a chance to exit and re-enter the editor? That's when the weird size constraint shows up for me.

[ndiego]

@sophiegyo yeah, I entered and exited multiple times but could not replicate the tiny image issue. Can you share the image size setting on those images? Like were they set to Lage or Full Width? Not sure if that matters, but I'll try with similar settings on my end.

[sophiegyo]

Edit: I don't think the image size affects it. I tested with medium now and full size - no difference there.

Here's me creating a totally fresh page:

https://user-images.githubusercontent.com/36608681/215477729-8a66a3f5-a283-44d8-9a44-11cf2eb24517.mp4

Still on WP 6.1.1, with Gutenberg 15.1

It seems like it occurs when adding a fresh caption. If I go back to a post/page where I previously added a caption for this, and then remove and re-add the caption, the problem solves itself.

[sophiegyo]

Here's what happens when I remove the first caption and add a fresh one:

https://user-images.githubusercontent.com/36608681/215479481-62b1d0a0-5f8e-4327-a66e-30ed8d194b47.mp4

[ndiego]

I just randomly reopened by test page and was able to replicate the issue. This was not happening yesterday 🤷‍♂️

[t-hamano]

I was also able to reproduce this problem. Another problem I discovered is that images that are displayed small by browser reload cannot be made any larger with the resize handle.

Indeed, #45775 seems to be related to this.

https://user-images.githubusercontent.com/54422211/216743971-93022705-258c-4592-9a2e-db7076ac4d51.mp4

[ndiego]

cc @d-alleyne @kevin940726 would either of you have time to take a look? This issue appears related to https://github.com/WordPress/gutenberg/pull/45775.

[kevin940726]

I'm not really familiar with that code though, I might not be the best person to propose a fix at the time. Feel free to revert it if it's causing issues until we find a solution 🙇 .

[aleone89]

Another report of this here: https://wordpress.com/forums/topic/image-manipulation-within-a-post/?view=all Theme: Hemingway Rewritten

[d-alleyne]

I will discuss this issue with a teammate to determine if there is an alternative solution to reverting #45775.

[d-alleyne]

We have concluded that reverting is the best approach for now.

[ndiego]

Since the source PR was reverted, I am going to close out this issue.