Remove viewport check from useZoomOut hook

WordPress · Oct 25, 2024 · f75b5a3 · f75b5a3
1 parent 4c8428b
commit f75b5a3
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git 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
@@ -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.
 }