Fix zoom out mode toggling between pattern category selection (#60225)

* Move useZoomout check up to PatternCategeryPreviewsPanel wrapper

Previously, the useZoomOut check was within the category previews rather than the panel. This meant when the category changed, the zoom out check ran again. We only want the zoom out mode check to happen when the panel itself is mounted.

* Simplify useZoomOut logic

The useRef wasn't necessary, as it was running before the other useEffect that could set it to true.

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -10,6 +10,7 @@ import { focus } from '@wordpress/dom';
  */
 
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 export function PatternCategoryPreviewPanel( {
 	rootClientId,
@@ -29,6 +30,10 @@ export function PatternCategoryPreviewPanel( {
 		return () => clearTimeout( timeout );
 	}, [ category ] );
 
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
+
 	return (
 		<div
 			ref={ container }

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -32,7 +32,6 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
-import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 const noop = () => {};
 
@@ -50,10 +49,6 @@ export function PatternCategoryPreviews( {
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-	// Move to zoom out mode when this component is mounted
-	// and back to the previous mode when unmounted.
-	useZoomOut();
-
 	const availableCategories = usePatternCategories(
 		rootClientId,
 		patternSourceFilter

packages/block-editor/src/hooks/use-zoom-out.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,26 +20,15 @@ export function useZoomOut() {
 		};
 	}, [] );
 
-	const shouldRevertInitialMode = useRef( null );
-	useEffect( () => {
-		// ignore changes to zoom-out mode as we explictily change to it on mount.
-		if ( mode !== 'zoom-out' ) {
-			shouldRevertInitialMode.current = false;
-		}
-	}, [ mode ] );
-
 	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
+	// This effect should only run when the component is rendered and unmounted.
 	// The effect opens the zoom-out view if it is not open before when applying a style variation.
 	useEffect( () => {
 		if ( mode !== 'zoom-out' ) {
 			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
 			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
+				// Revert to original mode
+				__unstableSetEditorMode( mode );
 			};
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps