From c7036a5a70ce88d4d9014a6ccbd45cd131f9852d Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 27 Mar 2024 06:13:09 -0500
Subject: [PATCH] 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.
---
 .../pattern-category-preview-panel.js         |  5 +++++
 .../pattern-category-previews.js              |  5 -----
 .../block-editor/src/hooks/use-zoom-out.js    | 19 ++++---------------
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
index f548a4632eb35..7a5a9eb8d989e 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
+++ b/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 }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
index b66535f76eff2..7b8fd8e76202a 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+++ b/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
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 8c2aff8819b63..84603c0161dd4 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/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