Pin resizing UX to top right when image is aligned to the right

[GaryJones]

GB 1.9.0

Issue Overview

When resizing images by dragging the corners, the user experience can be jarring.

Steps to Reproduce (for bugs)

1. Open demo content page.
2. Right-align an image.
3. Select image, so corner drag handles appear.
4. Resize via any corner handle.

Expected Behavior

If the image is right-aligned, then I'd expect resizing to be pinned from the top right corner so that enlarging the image expands down and to the left into the surrounding content, and not to be outside of the content column, only to then snap back.

Current Behavior

Even though the image is right-aligned, it's the top-left corner which is "pinned" while the image gets bigger down and to the right from this point. This typically means the image expands outside of the content column during resizing, and then "snaps" back into place, changing both the position of the image and it's surrounding box.

Compare how awkward this feels, compared to when the image is left-aligned.

The "after-resize" behaviour is correct - it's the "during-resize" behaviour that I think could be improved.

Possible Solution

"Pin" resizing behaviour to the top right if the image is right aligned.

Screenshots / Video

Todos

• Tests
• Documentation

[danielbachhuber]

Thanks for the great bug report, @GaryJones

[jeffpaul]

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

[karmatosed]

I just tested this and it seems to work now, if this is still an issue please let me know and we can reopen. Maybe this is browser related now so having that information would be great.

[GaryJones]

I also just tested this on GB 2.7.0, and it seems to work correctly, including when the image is centered: