Image Block: set to 100% but image changes size after selecting the 100% option

[annezazu]

Description

After adding an image, it is set to 100% but if you select the 100% the size of the image changes. This only happens in the Post Editor but that might be due to some breakage in the site editor (#38557). This was found as part of the FSE Outreach Program's All Things Media exploration:

The default dimension is highlighted as 100% but in-fact if clicking on 100% again usually modifies the image size on the editor. It is a bit confusing

Feel free to update this title - struggled to find a concise way to explain this

Step-by-step reproduction instructions

1. Add a new post.
2. Add an image block.
3. Notice the image dimension is set to 100%.
4. Select the 100% option and notice the image changes size.

Screenshots, screen recording, code snippet

image.100.mov

Environment info

• WordPress 5.9
• Gutenberg 12.6 (with and without)
• Chrome
• MacOS

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

[jasmussen]

I think this might be a duplicate of #38381, which also has some good conversation. Specifically it seems like an editor-only issue that is related to the ResizableBox component.

The video here is excellent though, if you agree it's the same issue maybe it's worth copying the video over to the other thread?

[annezazu]

Ah ha! I managed to not find that issue in my search. On it and closing this out.