Image editing: fix image size on crop

WordPress · Jun 16, 2020 · 1a314dc · 1a314dc
1 parent 140a5e9
commit 1a314dc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
@@ -161,15 +161,15 @@ export default function ImageEditor( {
 	url,
 	setAttributes,
 	isSelected,
+	naturalWidth,
+	naturalHeight,
+	width,
+	height,
 	children,
 } ) {
 	const { createErrorNotice } = useDispatch( 'core/notices' );
 	const [ isCropping, setIsCropping ] = useState( false );
 	const [ inProgress, setIsProgress ] = useState( null );
-	const [ imageSize, setImageSize ] = useState( {
-		naturalHeight: 0,
-		naturalWidth: 0,
-	} );
 	const [ crop, setCrop ] = useState( null );
 	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
 	const [ zoom, setZoom ] = useState( 1 );
@@ -235,14 +235,15 @@ export default function ImageEditor( {
 					</div>
 				) }
 				{ isCropping ? (
-					<div className="richimage__crop-controls">
+					<>
 						<div
 							className="richimage__crop-area"
 							style={ {
 								paddingBottom: `${
-									( 100 * imageSize.naturalHeight ) /
-									imageSize.naturalWidth
+									( 100 * naturalHeight ) / naturalWidth
 								}%`,
+								width,
+								height,
 							} }
 						>
 							<Cropper
@@ -256,7 +257,6 @@ export default function ImageEditor( {
 								onCropChange={ setPosition }
 								onCropComplete={ setCrop }
 								onZoomChange={ setZoom }
-								onMediaLoaded={ setImageSize }
 							/>
 						</div>
 						<RangeControl
@@ -268,7 +268,7 @@ export default function ImageEditor( {
 							value={ zoom }
 							onChange={ setZoom }
 						/>
-					</div>
+					</>
 				) : (
 					children
 				) }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -387,6 +387,10 @@ export default function Image( {
 				url={ url }
 				setAttributes={ setAttributes }
 				isSelected={ isSelected }
+				naturalWidth={ naturalWidth }
+				naturalHeight={ naturalHeight }
+				width={ width }
+				height={ height }
 			>
 				{ img }
 			</ImageEditor>