Image editing: zoom in percentage (#23362)

WordPress · Jun 24, 2020 · 23e187c · 23e187c
1 parent 4d505e6
commit 23e187c
Showing 1 changed file with 10 additions and 10 deletions.
diff --git 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();
@@ -275,14 +274,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>
@@ -292,8 +293,7 @@ export default function ImageEditor( {
 					label={ __( 'Zoom' ) }
 					min={ MIN_ZOOM }
 					max={ MAX_ZOOM }
-					step={ ZOOM_STEP }
-					value={ zoom }
+					value={ Math.round( zoom ) }
 					onChange={ setZoom }
 				/>
 			) }