Cropping of images in WP 6.7 (and 6.8) is broken

[axelkratel]

When cropping an image, the original crop isn't retained. The selection moves all the way to the left of the image no matter what the user tried to select. It jumps by itself to 0,0 start point when saving. That seems to be because the starting coordinates get filled with 0,0 even though the user doesn't enter anything and even if the user manually moves the cropping rectangle, the starting coordinates don't get updated. This didn't work that way in 6.6.2. Manually changing the starting coordinates leads to all kinds of strange unpredictable behavior.

The cropping is essentially unusable. I can add quicktime screen capture of problem. I did check logs for errors and console for errors, found no errors.

Independent of plugins or theme.

Error in Chrome dev tools says incorrect use for label.

[umeshsinghin]

Hi Axelkratel,

Could you pls share more details along with a screenshot? I couldn't replicate the issue. Also, kindly share the Chrome version you are using.

[poena]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. I can not reproduce the bug.

---

Can you include any more information? What is the image format? Are there any JavaScript errors?

I did not understand what this means: "even though the user doesn't enter anything "
I don't see any input fields to manually change the values. What did you try to update? I mean, during testing, are you changing the CSS transform in the browser console? I am just trying to understand.

[priyankkpatel]

I, too tested it with WordPress 6.7 and it is working well.

[holafreak]

I got the exact same issue on 6.7.1.

[siliconforks]

Cropping definitely seems quite glitchy/broken in version 6.7.

Since several people have had trouble reproducing this, here are more detailed steps:

1. In the admin section, click "Media".
2. Click on an image. (Upload an image first if you don't have one.)
3. Click the "Edit Image" button.
4. Click the "Crop" button.
5. Click and drag on the drag handle in the top left corner of the image, dragging the mouse somewhere in the middle of the image.
6. Observe that the fields labeled "Selection" are automatically updated when dragging; however, the fields labeled "Starting Coordinates" are not automatically updated, but remain at zero.

If you try the above steps in WordPress 6.6.2, the "Starting Coordinates" are automatically updated to show the position of the top left corner of the selection.

I'm not sure if that's the only thing wrong with the cropping functionality in 6.7, but it's certainly a regression compared to 6.6.

[siliconforks]

Cropping in WordPress 6.7.1. Note that the "Starting Coordinates" remain at 0.

[siliconforks]

Cropping in WordPress 6.6.2. Note that the "Starting Coordinates" are automatically updated.

[webby75]

I confirm that I have the exact same issue.
The crop feature works in version 6.6.2, but it no longer works starting from version 6.7.0.

[charlesbrown1x]

Sounds frustrating! Maybe look for any script conflicts or browser-related quirks causing the coordinates issue—it's like trying to fix window cleaning services​https://windowinstallationservices.co.uk/ where the tools just don’t behave as expected.

[Three_Star_Dave]

Confirming I have the same issue in 6.7.1.

I can work around it by first dragging in the image the crop markers to show the crop area I want, and then manually inputting the starting coordinates (as soon as I enter those fields the crop snaps to the upper left-hand corner, coordinate 0,0), testing and narrowing them down until they move the crop area to the actual location I am looking for.

So that works, but the behavior is clearly incorrect.

[macro19007]

I have confirmed the same phenomenon in version 6.7.

6.6: The coordinates change according to the cropping.

6.7: The coordinates remain at 0 and snap to the top-left corner.

[oaukketan]

I've been experiencing the same bug for the past month, ever since I manually upgraded the site to 6.7.x.

I'm going to clone the website and then disable all the plugins to see if one of them is causing the problem.

UPDATE:
I updated WP to 6.8, disabled all plugins and switched to a built-in theme, but problem still exists. I even tried 4 different versions of PHP (8.1.32, 8.2.28, 8.3.20 and 8.4.6) but no dice.

I used Firefox for all my testing.

[stefwilliams]

Can confirm this issue. In my specific case, I'm trying to insert a precise aspect ratio to then reposition the crop area, but it's the same behaviour: no matter where the final crop area is on screen, as soon as I click Apply, the area reverts to co-ordinates 0,0.

I have a work around for anyone who's getting frustrated by this:

The only way I can get it to work is by clicking 'Apply Crop' but NOT releasing the mouse button and dragging away. This reverts the positioning to 0/0, but doesn't apply it to the final image. At this stage, I can position/resize the crop area again and then 'Apply Crop' works as expected and uses the correct x/y starting position.

Would really appreciate a fix to this though. From the thread above, it seems the bug was introduced in v 6.7.x but I am using 6.8.3 and it's still there.

[Eiland]

This is still an issue in V7.

[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.

Suggested changes in wp-admin/js/image-edit.js:

// Compare not only width and height, but also x1 and y1

oldSel.width == c.width &&

oldSel.height == c.height &&

oldSel.x1 == c.x1 &&

oldSel.y1 == c.y1

// Update 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 ) )

);

// Synchronize X/Y fields and finalize selection in onSelectEnd

t.currentCropSelection = c;

imageEdit.setCropSelection( postid, c );

// Reflect calculated x/y values back to the X/Y inputs

$( '#imgedit-start-x-' + postid ).val( x );

$( '#imgedit-start-y-' + postid ).val( y );

[J.Kiyama]

I also created a temporary MU-plugin workaround for anyone currently affected by this issue.

This workaround synchronizes the crop X/Y coordinate fields with the current imgAreaSelect selection after the crop UI becomes active.

It is not a perfect fix because there still seems to be an initialization timing issue immediately after opening the image editor, but it improves synchronization once the crop UI is active.

Place this file in:

wp-content/mu-plugins/fix-wp-image-crop-coordinates.php

<?php
/**
 * Plugin Name: Fix WP Image Crop Coordinates
 *
 * Temporary workaround for WordPress image crop coordinate sync bug.
 * Remove if fixed in future WordPress core versions.
 */

add_action( 'admin_print_footer_scripts', function() {
        ?>
        <script>
        jQuery(function($){

                if ( typeof imageEdit === 'undefined' ) {
                        return;
                }

                function syncCropCoords() {
                        var img = $( '[id^="image-preview-"]:visible' ).first();

                        if ( ! img.length || ! img.imgAreaSelect ) {
                                return;
                        }

                        var postid = img.attr( 'id' ).replace( 'image-preview-', '' );
                        var api = img.imgAreaSelect({ instance: true });

                        if ( ! api || ! api.getSelection ) {
                                return;
                        }

                        var c = api.getSelection();

                        if ( ! c || ! c.width || ! c.height ) {
                                return;
                        }

                        var sizer = imageEdit.hold && imageEdit.hold.sizer ? imageEdit.hold.sizer : 1;

                        $( '#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 ) )
                        );
                }

                $( document ).on(
                        'mousemove mouseup touchmove touchend keyup change',
                        '.imgareaselect-selection, .imgareaselect-border1, .imgareaselect-border2, .imgareaselect-border3, .imgareaselect-border4, .imgareaselect-handle, [id^="image-preview-"]',
                        function() {
                                setTimeout( syncCropCoords, 0 );
                        }
                );

                var originalSetCropSelection = imageEdit.setCropSelection;

                imageEdit.setCropSelection = function( postid, c ) {
                        var result = originalSetCropSelection.apply( this, arguments );

                        setTimeout( syncCropCoords, 0 );

                        return result;
                };

        });
        </script>
        <?php
});