ImageEdit component can be exited with unsaved state

[benlk]

The image-edit component ​https://github.com/WordPress/WordPress/blob/master/wp-admin/js/image-edit.js used to crop and perform other edit interactions on images has a notsaved method, which is sometimes called to prevent closing the dialog if the user has made edits to the image without saving the image.

This is not consistently checked, which means that users can exit the dialog without being asked if they want to save unsaved changes.

Steps to reproduce on a post with Gutenberg:

1. Create a new post, or edit an existing post.
2. Add a new image block, or click on an existing one.
3. Click on the "Replace" button on the block control bar.
4. Click on "Open Media Library"
5. Click on "Edit Image"
6. Make a crop to the image by click-and-dragging on the image, then click "Crop".
7. The modal is now in an unsaved state.
8. Clicking "Cancel" below the image triggers the notsaved() check, where if the user clicks "Cancel", the closure fails.
9. Clicking here does not trigger the check, and closes the dialog: the greyed-out modal background, the modal's "X", the modal's "Back" button in the bottom right, the browser close-tab button

The above workflow reproduces in the Media Library, if you click "Edit Image" in the per-image view.

The simple fix would be to remove the if ( warn ) conditional here, and only check if notsaved() before closing: ​https://github.com/WordPress/WordPress/blob/0ed99784d829eec393a9b2fa3b2c71824295c95c/wp-admin/js/image-edit.js#L848-L853

This affects WP 6.1.1 and, 6.1.0, 6.0, and probably previous versions.

[benlk]

Proposed patch: ​https://github.com/WordPress/WordPress/pull/632

For https://core.trac.wordpress.org/ticket/57637

Trac ticket: