From e7f2d01e449b105fdc8dbe6799370070573201d7 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 25 Oct 2024 07:10:27 -0500 Subject: [PATCH] Remove viewport check from useZoomOut hook (#66341) The useZoomOut hook should not be responsible for checking viewport width. It should respect the desired zoom out level passed by the condition. We should decide if we want to enter zoom out or not where we implement the useZoomOut hook (the inserter menu). --------- Co-authored-by: jeryj Co-authored-by: t-hamano Co-authored-by: kevin940726 Co-authored-by: PARTHVATALIYA Co-authored-by: getdave --- packages/block-editor/src/components/inserter/menu.js | 6 ++++-- packages/block-editor/src/hooks/use-zoom-out.js | 8 +++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 915a36d242ba2..8dc2f64063c8e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -16,7 +16,7 @@ import { } from '@wordpress/element'; import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useDebouncedInput } from '@wordpress/compose'; +import { useDebouncedInput, useViewportMatch } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; /** @@ -67,6 +67,8 @@ function InserterMenu( const [ patternFilter, setPatternFilter ] = useState( 'all' ); const [ selectedMediaCategory, setSelectedMediaCategory ] = useState( null ); + const isLargeViewport = useViewportMatch( 'large' ); + function getInitialTab() { if ( __experimentalInitialTab ) { return __experimentalInitialTab; @@ -80,7 +82,7 @@ function InserterMenu( const shouldUseZoomOut = selectedTab === 'patterns' || selectedTab === 'media'; - useZoomOut( shouldUseZoomOut ); + useZoomOut( shouldUseZoomOut && isLargeViewport ); const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] = useInsertionPoint( { diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index bc2d325e81d61..bcf5d9ff882f7 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -9,7 +9,6 @@ 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. @@ -21,13 +20,12 @@ export function useZoomOut( zoomOut = true ) { useDispatch( blockEditorStore ) ); const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); - const isWideViewport = useViewportMatch( 'large' ); useEffect( () => { const isZoomOutOnMount = isZoomOut(); return () => { - if ( isZoomOutOnMount && isWideViewport ) { + if ( isZoomOutOnMount ) { setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); @@ -36,10 +34,10 @@ export function useZoomOut( zoomOut = true ) { }, [] ); useEffect( () => { - if ( zoomOut && isWideViewport ) { + if ( zoomOut ) { setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); } - }, [ zoomOut, setZoomLevel, resetZoomLevel, isWideViewport ] ); + }, [ zoomOut, setZoomLevel, resetZoomLevel ] ); }