Image editing: preserve crop position through rotations (#23374)

* Image editing: fix edit order * Adjust position after rotation * Update natural aspect ratio after rotation
WordPress · Jun 23, 2020 · d1227a9 · d1227a9
1 parent 6773860
commit d1227a9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git 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( 'rest_cannot_load_editor', __( 'Unable to load original media file.', 'gutenberg' ), array( 'status' => 500 ) );
 		}
 
+		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
@@ -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() {
@@ -205,6 +207,10 @@ export default function ImageEditor( {
 			setEditedUrl();
 			setRotation( angle );
 			setAspect( 1 / aspect );
+			setPosition( {
+				x: -( position.y * naturalAspectRatio ),
+				y: position.x * naturalAspectRatio,
+			} );
 			return;
 		}
 
@@ -240,6 +246,10 @@ export default function ImageEditor( {
 				setEditedUrl( URL.createObjectURL( blob ) );
 				setRotation( angle );
 				setAspect( 1 / aspect );
+				setPosition( {
+					x: -( position.y * naturalAspectRatio ),
+					y: position.x * naturalAspectRatio,
+				} );
 			} );
 		}