From 92536a364f124a860b220dcd50b88c090774f61a Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Mon, 22 Jun 2020 16:26:33 +0300
Subject: [PATCH] Image editing: zoom in percentage

---
 .../block-library/src/image/image-editor.js   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
index 8463546a68a20..88f48f3183540 100644
--- a/packages/block-library/src/image/image-editor.js
+++ b/packages/block-library/src/image/image-editor.js
@@ -29,9 +29,8 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 
-const MIN_ZOOM = 1;
-const MAX_ZOOM = 3;
-const ZOOM_STEP = 0.01;
+const MIN_ZOOM = 100;
+const MAX_ZOOM = 300;
 const POPOVER_PROPS = { position: 'bottom right' };
 
 function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
@@ -148,7 +147,7 @@ export default function ImageEditor( {
 	const [ inProgress, setIsProgress ] = useState( false );
 	const [ crop, setCrop ] = useState( null );
 	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ zoom, setZoom ] = useState( 1 );
+	const [ zoom, setZoom ] = useState( 100 );
 	const [ aspect, setAspect ] = useState( naturalWidth / naturalHeight );
 	const [ rotation, setRotation ] = useState( 0 );
 	const [ editedUrl, setEditedUrl ] = useState();
@@ -272,14 +271,16 @@ export default function ImageEditor( {
 				<Cropper
 					image={ editedUrl || url }
 					disabled={ inProgress }
-					minZoom={ MIN_ZOOM }
-					maxZoom={ MAX_ZOOM }
+					minZoom={ MIN_ZOOM / 100 }
+					maxZoom={ MAX_ZOOM / 100 }
 					crop={ position }
-					zoom={ zoom }
+					zoom={ zoom / 100 }
 					aspect={ aspect }
 					onCropChange={ setPosition }
 					onCropComplete={ setCrop }
-					onZoomChange={ setZoom }
+					onZoomChange={ ( newZoom ) => {
+						setZoom( newZoom * 100 );
+					} }
 				/>
 				{ inProgress && <Spinner /> }
 			</div>
@@ -289,8 +290,7 @@ export default function ImageEditor( {
 					label={ __( 'Zoom' ) }
 					min={ MIN_ZOOM }
 					max={ MAX_ZOOM }
-					step={ ZOOM_STEP }
-					value={ zoom }
+					value={ Math.round( zoom ) }
 					onChange={ setZoom }
 				/>
 			) }