Image block resizes image by clicking anywhere along the side (without dragging)

[sabernhardt]

Description

inspiredtaste originally reported this on Trac 59621

Clicking along the right and/or bottom sides of the image—without dragging—can unexpectedly set the width in the sidebar settings. When the image has a caption, accidentally clicking the bottom resizing handle is more likely because it can overlap the caption by about 11 pixels.

Step-by-step reproduction instructions

1. Create a post.
2. Add an Image block and insert an image. Note that the Width and Height settings below Aspect Ratio in the sidebar both say "Auto" (as placeholder text).
3. Click near the bottom edge of the image, up to 11 pixels above or below, but do not drag the mouse. Similarly, you could click the right side (or left side, depending on the language direction and/or block alignment setting). Note that the Width setting has a value now, which could be the theme's default content width.

Screenshots, screen recording, code snippet

components-resizable-box__handle-bottom can cover part of the caption area:

In English, the side handle is on the right when no alignment is selected.

In Arabic, the side handle is usually on the left.

Environment info

1. Screenshots use WordPress 6.4-RC2, Twenty Twenty-Four, with no plugins activated.
2. This also happens in WordPress 6.3.2, Twenty Twenty-Three, with Gutenberg 16.9.0 as the only plugin.

Browser/OS: Firefox 119.0 on Windows 10

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

[sabernhardt]

Reducing the clickable area for each handle to only the visible circles could help prevent mistakes.

It would also be good to increase the size of those circles to larger than 23 by 23 pixels, possibly even showing arrows inside them.

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.