diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js index 8463546a68a206..88f48f31835403 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( { { + setZoom( newZoom * 100 ); + } } /> { inProgress && } @@ -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 } /> ) }