Site Editor: Image cropping tools broken

[annezazu]

Description

Cropping in the site editor seems broken across multiple levels compared to in the post editor:

• The aspect ratio tools don't work/don't have any effect.
• The zooming is out of control (best way I can put it) and you aren't able to really use it to get what you want.
• The ability to move where the image is zoomed in on is no longer available.
• The greying out of what you are cropping out isn't visible.
• The image itself seems to get outsized from the cropping tools/easily out of frame in a way that feels very broken.

This only seems to happen in the Site Editor. I could replicate this across two different sites with 5.9.

Step-by-step reproduction instructions

1. Open Site Editor.
2. Add an image
3. Try to crop.

Screenshots, screen recording, code snippet

My.Movie.18.mp4

Environment info

• WordPress 5.9
• With Gutenberg 12.5.3 and without Gutenberg
• TT2
• 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

[costdev]

I can reproduce the behaviour.

Zoom

• Post Editor: The image does not spread outside of the container as you zoom.
• Site Editor: The image container doesn't seem to be clipped via overflow: hidden (or similar), so the image spreads outside of the container as you zoom.
• Both Editors: Moving the zoom slider to max, clicking Apply, moving the zoom slider to max again and clicking Apply again, makes the image smaller. Not what I expected.

Aspect ratio

• Post Editor: There is masking to show what the aspect ratio will look like.
• Site Editor: There is no masking to show what the aspect ratio will look like. However, clicking Apply will correctly change the aspect ratio.

Rotation

• Both editors: Seems fine, I think.

[Mamaduka]

I think this might be an issue with the react-easy-crop library and iframed editors. The styles are injected in parent windows instead of the iframe.

cc @talldan.

[ajlende]

I tested manually adding react-easy-crop/react-easy-crop.css to a style element in the iframe. The appearance was fixed, but dragging to position the crop was still not working. So fixing it might be more involved than just manually adding the styles to the iframe.

There's more info in the react-easy-crop docs about loading styles.

[dugyen]

@annezazu I could also see it in a different way.
How could I reproduce

1. WordPress 5.9 and TT2 with our without latest Gutenberg.
2. Add a duotone filter to a Cover block with an image or video in it and add text over top, adjusting the opacity as needed.
3. Add an image to the background of your header.
4. Publish your WordPress Post/Page with above steps.
5. Here you could see the your image is not crop as it should be.

task.mp4

[annezazu]

Thanks for the video here! I'm wondering what's going on since your image dimensions are showing -1777 for width and -1918 for height 😱 . I tried to replicate but couldn't even if I tried adding duotone and text. Here's a condensed video:

image.mov

[annezazu]

This is still a problem with GB 14.0.2 and WP 6.0.2:

image.tools.mp4

Going to add this to the 6.1 board just in case it can be addressed.

[talldan]

I've removed the 'Backport to WP Beta/RC' label as that's just for PRs.

cc @talldan.

I don't know much about it unfortunately, I just refactored some of the code to make fixing a bug easier. IIRC though, pretty much everything was implemented by that easy-cropper library, apart from rotation, which is our own implementation. Rotation seems to be working ok, so it'd suggest the bulk of the issues are to do with react-easy-cropper/iframes.

I tested manually adding react-easy-crop/react-easy-crop.css to a style element in the iframe. The appearance was fixed, but dragging to position the crop was still not working. So fixing it might be more involved than just manually adding the styles to the iframe.

@ajlende Would you be able to create a PR with this change? A partial fix would be better than nothing.

[dugyen]

@talldan @vcanales @annezazu will this fix be seen in WordPress 6.1

[talldan]

@dugyen The target is to get a fix for WordPress 6.1, but there isn't any working code that resolves the issue yet. There's a bit of a risk as well because the feature depends on a third-party library, but hopefully it's something that can be solved. 👍

[glendaviesnz]

Had a brief look and I think we would either need to fork the library, or see if we can push back a change to the project. Currently the lib makes a number of calls to the global window and document which will need to instead happen on the iFrame doc and window in the case of the site editor.

It shouldn't be too hard to sort in theory, by either adding some props to pass in the doc and window references, or to work them out using one of the refs within the component, similar to what happens in the Jetpack maps block to gets its 3rd party library to work in the site editor.

I will try and take a look and see if we can get this fixed, but if it involves getting a patch accepted by the library it may not be doable in 6.1 timeframes.

[ajlende]

see if we can push back a change to the project

@ValentinH was very responsive when I made some changes to react-easy-crop earlier, so unless he's especially busy, I think there's a good chance of landing the change.

@glendaviesnz it sounds like you have a plan for fixing it already, but I'll be here to help out with testing if you have a branch pushed up that I can take a look at.

[ValentinH]

Hey, react-easy-crop maintainer here 👋
Yes, I'm available to review a PR and provide guidance if needed. It would be a pity if you had to fork 😅

[glendaviesnz]

thanks @ajlende and @ValentinH, if my cunning plan works I should have a PR up in the react-easy-crop repo sometime tomorrow - will be back in touch for help if my plan turns out to not be as cunning as I imagined 😄

[annezazu]

Love this cross collaboration. Thanks so much for chiming in and offering to help @ValentinH!

[glendaviesnz]

@ValentinH this approach seems to work for our iframed instance, but not sure if it has any potential issues/drawbacks in other contexts.

[glendaviesnz]

A PR in the 3rd party library is ready for review

[glendaviesnz]

PR to bring in the updated version of react-easy-crop here

[glendaviesnz]

Fixed by ValentinH/react-easy-crop#410 & #44408