Image cropping unresponsive when adding media into a post and then click on Edit Image

[antonioromano]

I've found that sometimes the drag handles on the cropping tool do not move when dragged, they remain unresponsive and due to the dragging action it causes the media library to think you're dropping a new image into it to upload.

It is complete unpredictable though. Sometimes it happens two or three times in a row. Sometimes less frequently.

What I've notice is that It's only happening when adding media into a post and then click on "Edit Image". it works as expected when cropping images straight from the media library.

Generally any action like closing the edit screen or clicking on a button (e.g. rotate or crop) fixes it but it is necessary to undo the last action and then crop the image again.

I was able to locally re-produce the issue on a brand new "Hello World" instance without plugins enabled so it's definitely
a core issue related to the last WordPress update to v.5.3.

[pinedevelopment]

We can also reproduce this bug successfully on multiple, different WP instances (on various systems and browsers). Definitely a real thing.

We also tested the cropper when not opened in the modal (from the Media menu), where there is no error. We assume it can be related to the Media Library modal.

[azaozz]

Confirmed. Steps to reproduce (somewhat inconsistently):

• Go to the classic editor.
• Drag and drop an image on the editor to upload is (not from the media modal). This opens the media modal and the image is uploaded as if it was dropped there.
• Select "Edit Image" from the media modal sidebar (under the thumbnail).
• Click on the image preview in the image editor and drag to select a region for cropping.

At this point the region is selected properly but the selection in not "interactive", i.e. it cannot be moved or resized.

This happens only the first time when following the above steps. If the media modal or the image editor is reset in any way, for example clicking on the "Back" button and then again on "Edit Image", the selection works properly.

Looking further, seems caused by improper initialization of imgareaselect.js. That seems related to Backbone.js as imgLoaded() in image-edit.js is called twice. The initialization call is pretty odd, triggered by an inline onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" in the img tag. For some reason that onload js runs twice.

Fixing it looks as simple as ensuring imgareaselect.js is not initialized twice in a row, but will need testing in all instances/places the script is used.

[azaozz]

In 49262.diff: Ensure imgareaselect.js is not initialized twice for the same image.

Needs testing in all places the image editor is used.

[azaozz]

In 47229:

Media: Ensure imgareaselect.js is not initialized twice for the same image. May happen when uploading an image into a post and then clicking on Edit Image.

Fixes #49262.