Media Modal: Crop selection not always visible

[swissspidy]

Bug Description

Originally reported here, Lucky and I were able to reproduce this issue when trying to select a poster image.

In some cases the crop selection is not visible and trying to crop in that state results in an error.

Potentially useful files for debugging:

https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/media/controllers/cropper.js#L53-L72

https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/media/views/cropper.js#L82-L83

https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js#L42

Expected Behaviour

Cropping selection should always be visible.

Steps to Reproduce

1. Make browser window small
2. Click to edit/add poster image
3. Select a large image that would need to be cropped
4. See no cropping selection
5. Click "Crop image" and get an error
6. Make window bigger
7. See cropping selection, drag it around if wanted
8. Click "Crop image" and see how image is sucessfully cropped

Screenshots

Screen.Recording.2021-07-20.at.17.00.46.mov

Additional Context

• Plugin Version: 1.9.0
• WordPress Version: 5.7
• Operating System: macOS
• Browser: Chrome

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

[swissspidy]

@spacedmonkey Is this something you could look into as part of this sprint? It's quite an annoying issue as it prevents creators from publishing valid stories.

[spacedmonkey]

@swissspidy I spent a couple of hours of this with no luck on debugging on implementation.

I managed to replicate the issue in customizer with a site logo. See screenshot. This implies that this is a core issue.

Not sure of the next steps..

[spacedmonkey]

It seems to be known issue - https://core.trac.wordpress.org/ticket/53300

[swissspidy]

Good to know, thanks!

The jQuery plugin responsible for the cropping is called imgAreaSelect and it turns out it's rather old (9 years without updates!).

Probably the reason why WP uses a patched version: https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js

After browsing through the code and the GitHub repo I quickly found an identical bug report there with a suggested bugfix:

odyniec/imgareaselect#71 (comment)

I applied the change to jquery.imgareaselect.js locally and it worked like a charm.

To fix this we could copy the WP version of the script to our plugin (OK because it's dual-licensed under MIT), patch it and then on the editor screen replace the original script with ours.

Just need to figure out where to put it, but I suppose it's easiest to create a new package for it with a new entry in the webpack config.

[spacedmonkey]

If it is a problem with the core version of the jquery.imgareaselect.js, could we just have a patches version of that script in our plugin. Then in our editor, we could dequeue jquery.imgareaselect.js and load a new version from our plugin. Would this work?

[swissspidy]

That's what I was suggesting, yes. It should work, but should be very easy to verify.

[csossi]

Testing 8501 in QA environment

-opened poster selection and reduced browser window. selected image. crop lines not appearing and nothing happening on selecting "crop image"
https://share.getcloudapp.com/nOuv6QEY

[swissspidy]

Hmm bummer 😞

@spacedmonkey Can you take another look tomorrow? Everything seems to be fine here, with the correct script being loaded etc.

[spacedmonkey]

@swissspidy Can you give me access to QA env? I didn't see this in local env, what to debug on QA env.

[csossi]

Verified in QA