From ec22e90f85d372254b5fc62ddc5354eb193fc866 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 22 Oct 2024 23:02:51 +0900 Subject: [PATCH 1/3] Activate zoom out only on large viewport --- packages/block-editor/src/hooks/use-zoom-out.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 23511487a54bf..45aed086fac2b 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -3,6 +3,7 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -22,6 +23,7 @@ export function useZoomOut( zoomOut = true ) { const originalEditingModeRef = useRef( null ); const mode = __unstableGetEditorMode(); + const isWideViewport = useViewportMatch( 'large' ); useEffect( () => { // Only set this on mount so we know what to return to when we unmount. @@ -43,7 +45,9 @@ export function useZoomOut( zoomOut = true ) { // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. useEffect( () => { - if ( zoomOut && mode !== 'zoom-out' ) { + if ( ! isWideViewport ) { + setZoomLevel( 100 ); + } else if ( zoomOut && mode !== 'zoom-out' ) { __unstableSetEditorMode( 'zoom-out' ); setZoomLevel( 50 ); } else if ( @@ -59,5 +63,6 @@ export function useZoomOut( zoomOut = true ) { __unstableSetEditorMode, zoomOut, setZoomLevel, + isWideViewport, ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes. } From baa8faca16445fdcb54259f366e3cbd888d445d9 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 25 Oct 2024 10:11:49 +0900 Subject: [PATCH 2/3] Remove viewport check from useZoomOut hook --- packages/block-editor/src/components/inserter/menu.js | 5 +++-- packages/block-editor/src/hooks/use-zoom-out.js | 7 +------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index fe62dfcd94dba..d0841edc539f9 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,7 @@ function InserterMenu( const [ patternFilter, setPatternFilter ] = useState( 'all' ); const [ selectedMediaCategory, setSelectedMediaCategory ] = useState( null ); + const isLargeViewport = useViewportMatch( 'large', '>=' ); const [ hasCategories, setHasCategories ] = useState( true ); function getInitialTab() { @@ -82,7 +83,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 45aed086fac2b..23511487a54bf 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -3,7 +3,6 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; -import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -23,7 +22,6 @@ export function useZoomOut( zoomOut = true ) { const originalEditingModeRef = useRef( null ); const mode = __unstableGetEditorMode(); - const isWideViewport = useViewportMatch( 'large' ); useEffect( () => { // Only set this on mount so we know what to return to when we unmount. @@ -45,9 +43,7 @@ export function useZoomOut( zoomOut = true ) { // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. useEffect( () => { - if ( ! isWideViewport ) { - setZoomLevel( 100 ); - } else if ( zoomOut && mode !== 'zoom-out' ) { + if ( zoomOut && mode !== 'zoom-out' ) { __unstableSetEditorMode( 'zoom-out' ); setZoomLevel( 50 ); } else if ( @@ -63,6 +59,5 @@ export function useZoomOut( zoomOut = true ) { __unstableSetEditorMode, zoomOut, setZoomLevel, - isWideViewport, ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes. } From 981f386aa217712bf4a061c21178e03240b0d402 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 25 Oct 2024 10:21:31 +0900 Subject: [PATCH 3/3] Simplify `useViewportMatch` hook --- packages/block-editor/src/components/inserter/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d0841edc539f9..3d6d16be11eac 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -67,7 +67,7 @@ function InserterMenu( const [ patternFilter, setPatternFilter ] = useState( 'all' ); const [ selectedMediaCategory, setSelectedMediaCategory ] = useState( null ); - const isLargeViewport = useViewportMatch( 'large', '>=' ); + const isLargeViewport = useViewportMatch( 'large' ); const [ hasCategories, setHasCategories ] = useState( true ); function getInitialTab() {