Image editing: fix image size on crop (#23173)

* Image editing: fix image size on crop * Fix dimensions for unresized images
WordPress · Jun 18, 2020 · 8e185c9 · 8e185c9
1 parent 69acbcf
commit 8e185c9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
@@ -161,15 +161,16 @@ export default function ImageEditor( {
 	url,
 	setAttributes,
 	isSelected,
+	naturalWidth,
+	naturalHeight,
+	width,
+	height,
+	clientWidth,
 	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 +236,15 @@ export default function ImageEditor( {
 					</div>
 				) }
 				{ isCropping ? (
-					<div className="richimage__crop-controls">
+					<>
 						<div
 							className="richimage__crop-area"
 							style={ {
-								paddingBottom: `${
-									( 100 * imageSize.naturalHeight ) /
-									imageSize.naturalWidth
-								}%`,
+								width,
+								height:
+									height ||
+									( clientWidth * naturalHeight ) /
+										naturalWidth,
 							} }
 						>
 							<Cropper
@@ -256,7 +258,6 @@ export default function ImageEditor( {
 								onCropChange={ setPosition }
 								onCropComplete={ setCrop }
 								onZoomChange={ setZoom }
-								onMediaLoaded={ setImageSize }
 							/>
 						</div>
 						<RangeControl
@@ -268,7 +269,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,11 @@ export default function Image( {
 				url={ url }
 				setAttributes={ setAttributes }
 				isSelected={ isSelected }
+				naturalWidth={ naturalWidth }
+				naturalHeight={ naturalHeight }
+				width={ width }
+				height={ height }
+				clientWidth={ clientWidth }
 			>
 				{ img }
 			</ImageEditor>