From c926d6974269229b7f3bab0dd3e366db854b9051 Mon Sep 17 00:00:00 2001 From: VATALIYA PARTH <88878890+PARTHVATALIYA@users.noreply.github.com> Date: Tue, 22 Oct 2024 19:11:03 +0530 Subject: [PATCH] Fix: Activate zoom out on large viewport (#66308) * Activate zoom out on large viewport * Reset zoom out when view-port change to medium --------- Co-authored-by: PARTHVATALIYA Co-authored-by: t-hamano Co-authored-by: getdave --- packages/block-editor/src/hooks/use-zoom-out.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 23f7fbc4bd59a..914886497bbb3 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -9,6 +9,7 @@ import { useEffect } from '@wordpress/element'; */ import { store as blockEditorStore } from '../store'; import { unlock } from '../lock-unlock'; +import { useViewportMatch } from '@wordpress/compose'; /** * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. @@ -20,12 +21,13 @@ export function useZoomOut( zoomOut = true ) { useDispatch( blockEditorStore ) ); const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); + const isWideViewport = useViewportMatch( 'large' ); useEffect( () => { const isZoomOutOnMount = isZoomOut(); return () => { - if ( isZoomOutOnMount ) { + if ( isZoomOutOnMount && isWideViewport ) { setZoomLevel( 50 ); } else { resetZoomLevel(); @@ -34,10 +36,10 @@ export function useZoomOut( zoomOut = true ) { }, [] ); useEffect( () => { - if ( zoomOut ) { + if ( zoomOut && isWideViewport ) { setZoomLevel( 50 ); } else { resetZoomLevel(); } - }, [ zoomOut, setZoomLevel, resetZoomLevel ] ); + }, [ zoomOut, setZoomLevel, resetZoomLevel, isWideViewport ] ); }