From 4e2af1e6234858a009055f8e2469274604f168b1 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 22 Oct 2024 11:28:54 -0500 Subject: [PATCH 1/5] Remove viewport check from useZoomOut hook 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 zoom out hook (the inserter menu). --- packages/block-editor/src/components/inserter/menu.js | 6 ++++-- packages/block-editor/src/hooks/use-zoom-out.js | 4 +--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 915a36d242ba26..e9783e87ed679a 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( 'medium', '<' ); + 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 bc2d325e81d61a..903a80b72b0a23 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,7 +20,6 @@ export function useZoomOut( zoomOut = true ) { useDispatch( blockEditorStore ) ); const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); - const isWideViewport = useViewportMatch( 'large' ); useEffect( () => { const isZoomOutOnMount = isZoomOut(); @@ -41,5 +39,5 @@ export function useZoomOut( zoomOut = true ) { } else { resetZoomLevel(); } - }, [ zoomOut, setZoomLevel, resetZoomLevel, isWideViewport ] ); + }, [ zoomOut, setZoomLevel, resetZoomLevel ] ); } From e95a1e7a432104d9407231ae9bf8eda163f7207a Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 23 Oct 2024 16:05:05 -0500 Subject: [PATCH 2/5] Remove isWideViewport from useZoomOut --- packages/block-editor/src/hooks/use-zoom-out.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 903a80b72b0a23..bcf5d9ff882f7b 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -25,7 +25,7 @@ export function useZoomOut( zoomOut = true ) { const isZoomOutOnMount = isZoomOut(); return () => { - if ( isZoomOutOnMount && isWideViewport ) { + if ( isZoomOutOnMount ) { setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); @@ -34,7 +34,7 @@ export function useZoomOut( zoomOut = true ) { }, [] ); useEffect( () => { - if ( zoomOut && isWideViewport ) { + if ( zoomOut ) { setZoomLevel( 'auto-scaled' ); } else { resetZoomLevel(); From 77892a281ac2754d2a9932a9bc221d6416edfb43 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 24 Oct 2024 09:27:46 -0500 Subject: [PATCH 3/5] Use same viewport as when the zoom button shows --- 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 e9783e87ed679a..d44372ee7e033f 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( 'medium', '<' ); + const isLargeViewport = ! useViewportMatch( 'large', '<' ); function getInitialTab() { if ( __experimentalInitialTab ) { From 46db6e1195c4f1cd4ae5e00b1c8b951177fc8634 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 24 Oct 2024 10:01:51 -0500 Subject: [PATCH 4/5] Use same viewport as when the zoom button shows - correction --- 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 d44372ee7e033f..03fe966b2c9c70 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', '>=' ); function getInitialTab() { if ( __experimentalInitialTab ) { From 1ec661ddfb803f39029ea82fdd1fb4aeb54b2dd7 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 25 Oct 2024 06:35:36 -0500 Subject: [PATCH 5/5] Remove unnecessary default Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- 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 03fe966b2c9c70..8dc2f64063c8e3 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' ); function getInitialTab() { if ( __experimentalInitialTab ) {