diff --git a/lib/class-wp-rest-image-editor-controller.php b/lib/class-wp-rest-image-editor-controller.php index e572f665bb5c8b..9fd9b0b1b456f4 100644 --- a/lib/class-wp-rest-image-editor-controller.php +++ b/lib/class-wp-rest-image-editor-controller.php @@ -130,6 +130,10 @@ public function apply_edits( $request ) { return new WP_Error( 'fileload', 'Unable to load original media file' ); } + if ( isset( $params['rotation'] ) ) { + $image_editor->rotate( 0 - $params['rotation'] ); + } + $size = $image_editor->get_size(); // Finally apply the modifications. @@ -139,10 +143,6 @@ public function apply_edits( $request ) { $height = round( ( $size['height'] * floatval( $params['height'] ) ) / 100.0 ); $image_editor->crop( $crop_x, $crop_y, $width, $height ); - if ( isset( $params['rotation'] ) ) { - $image_editor->rotate( 0 - $params['rotation'] ); - } - // TODO: Generate filename based on edits. $target_file = 'edited-' . $meta['original_name']; diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js index b56cdb4ae48222..6c96cd773b56a9 100644 --- a/packages/block-library/src/image/image-editor.js +++ b/packages/block-library/src/image/image-editor.js @@ -155,9 +155,11 @@ export default function ImageEditor( { const editedWidth = width; let editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth; + let naturalAspectRatio = naturalWidth / naturalHeight; if ( rotation % 180 === 90 ) { editedHeight = ( clientWidth * naturalWidth ) / naturalHeight; + naturalAspectRatio = naturalHeight / naturalWidth; } function apply() { @@ -208,6 +210,10 @@ export default function ImageEditor( { setEditedUrl(); setRotation( angle ); setAspect( 1 / aspect ); + setPosition( { + x: -( position.y * naturalAspectRatio ), + y: position.x * naturalAspectRatio, + } ); return; } @@ -243,6 +249,10 @@ export default function ImageEditor( { setEditedUrl( URL.createObjectURL( blob ) ); setRotation( angle ); setAspect( 1 / aspect ); + setPosition( { + x: -( position.y * naturalAspectRatio ), + y: position.x * naturalAspectRatio, + } ); } ); }