From 0bf119a5848e2436517f4466c1fa4f6e200379bb Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 22 Oct 2024 11:28:54 -0500
Subject: [PATCH] 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       | 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 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 914886497bbb38..23f7fbc4bd59a1 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( 50 );
 			} else {
 				resetZoomLevel();
@@ -36,10 +34,10 @@ export function useZoomOut( zoomOut = true ) {
 	}, [] );
 
 	useEffect( () => {
-		if ( zoomOut && isWideViewport ) {
+		if ( zoomOut ) {
 			setZoomLevel( 50 );
 		} else {
 			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel, isWideViewport ] );
+	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
 }