[wp-trac] [WordPress Trac] #62453: Cropping of images in WP 6.7 (and 6.8) is broken

[WordPress Trac]

#62453: Cropping of images in WP 6.7 (and 6.8) is broken
-------------------------------+------------------------------
 Reporter:  axelkratel         |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Media              |     Version:  6.7.1
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:
-------------------------------+------------------------------

Comment (by J.Kiyama):

 I tested a possible fix for this issue with help from ChatGPT. Could
 someone review it and consider applying it to Core?

 This is the ChatGPT's report:
 I confirmed that this issue still occurs in WordPress 7.0.

 The crop selection can be moved visually, but the X/Y coordinate fields
 (#imgedit-start-x-* and #imgedit-start-y-*) are not updated from the image
 UI. As a result, the crop selection data can become inconsistent and the
 crop may be applied from the wrong position.

 The problem appears to be in wp-admin/js/image-edit.js.

 Current behavior:
 - onSelectChange updates only the selection width and height.
 - The start X/Y fields are not updated when the selection is moved or
 resized from the image UI.
 - The current selection comparison only checks width and height, so moving
 the crop box without changing its size can be ignored.
 - setCropSelection() calculates x and y, but does not reflect them back to
 the visible X/Y coordinate fields.

 Tested fix:
 1. In onSelectChange, include x1 and y1 in the comparison.
 2. In onSelectChange, update #imgedit-start-x-* and #imgedit-start-y-*
 from the current selection.
 3. In onSelectEnd, update the same X/Y fields and call setCropSelection()
 with the current selection.
 4. In setCropSelection(), after calculating x and y, update the X/Y input
 fields before saving #imgedit-selection-*.

 After applying these changes, the crop result is applied to the correct
 position and the X/Y coordinate fields are synchronized with the image UI.


 Chages in /wp-admin/js/image-edit.js :

 {{{js
 // 1. Compare not only width and height, but also x1 and y1 when
 determining whether the selection has changed.
 oldSel.width == c.width &&
 oldSel.height == c.height &&
 oldSel.x1 == c.x1 &&
 oldSel.y1 == c.y1

 // 2. Update the X/Y coordinate input fields in onSelectChange.
 $( '#imgedit-start-x-' + postid ).val(
         Math.max( 0, imageEdit.round( c.x1 / sizer ) )
 );
 $( '#imgedit-start-y-' + postid ).val(
         Math.max( 0, imageEdit.round( c.y1 / sizer ) )
 );

 // 3. In onSelectEnd, also synchronize the X/Y input fields and finalize
 the current selection state.
 t.currentCropSelection = c;
 imageEdit.setCropSelection( postid, c );

 // 4. In setCropSelection(), reflect the calculated x and y values back to
 the X/Y coordinate input fields.
 $( '#imgedit-start-x-' + postid ).val( x );
 $( '#imgedit-start-y-' + postid ).val( y );
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62453#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform