From 403e3c9e9b941b3b77e15323bac86c64616de6f9 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 23 Oct 2024 11:52:01 -0500
Subject: [PATCH 01/19] Track if we programatically changed zoom states for the
 user

---
 .../block-editor/src/hooks/use-zoom-out.js    | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index bcf5d9ff882f7..45d6b6ff5b967 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 } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,24 +20,42 @@ export function useZoomOut( zoomOut = true ) {
 		useDispatch( blockEditorStore )
 	);
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const programatticEnterZoomOut = useRef( null );
 
 	useEffect( () => {
 		const isZoomOutOnMount = isZoomOut();
 
 		return () => {
-			if ( isZoomOutOnMount ) {
+			// We never changed modes for them, so there is nothing to do.
+			if ( programatticEnterZoomOut.current === null ) {
+				return;
+			}
+
+			// If we exited zoom out for them and they were originally in zoom out mode, enter zoom out again.
+			if (
+				programatticEnterZoomOut.current === false &&
+				isZoomOutOnMount
+			) {
 				setZoomLevel( 'auto-scaled' );
-			} else {
+			}
+			// We entered zoom out for them, and they were not originally in zoom out mode, so reset the zoom level.
+			else if (
+				programatticEnterZoomOut.current === true &&
+				isZoomOut() &&
+				! isZoomOutOnMount
+			) {
 				resetZoomLevel();
 			}
 		};
 	}, [] );
 
 	useEffect( () => {
-		if ( zoomOut ) {
+		if ( zoomOut && ! isZoomOut() ) {
+			programatticEnterZoomOut.current = true;
 			setZoomLevel( 'auto-scaled' );
-		} else {
+		} else if ( ! zoomOut && isZoomOut() ) {
+			programatticEnterZoomOut.current = false;
 			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
+	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );
 }

From f58105962375b338b884f07d2a51ecf65650df6c Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 23 Oct 2024 11:53:18 -0500
Subject: [PATCH 02/19] Rename programmaticEnterZoomOut to
 programmaticZoomOutChange

---
 packages/block-editor/src/hooks/use-zoom-out.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 45d6b6ff5b967..37a42250d93b3 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -20,27 +20,27 @@ export function useZoomOut( zoomOut = true ) {
 		useDispatch( blockEditorStore )
 	);
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
-	const programatticEnterZoomOut = useRef( null );
+	const programmaticZoomOutChange = useRef( null );
 
 	useEffect( () => {
 		const isZoomOutOnMount = isZoomOut();
 
 		return () => {
 			// We never changed modes for them, so there is nothing to do.
-			if ( programatticEnterZoomOut.current === null ) {
+			if ( programmaticZoomOutChange.current === null ) {
 				return;
 			}
 
 			// If we exited zoom out for them and they were originally in zoom out mode, enter zoom out again.
 			if (
-				programatticEnterZoomOut.current === false &&
+				programmaticZoomOutChange.current === false &&
 				isZoomOutOnMount
 			) {
 				setZoomLevel( 'auto-scaled' );
 			}
 			// We entered zoom out for them, and they were not originally in zoom out mode, so reset the zoom level.
 			else if (
-				programatticEnterZoomOut.current === true &&
+				programmaticZoomOutChange.current === true &&
 				isZoomOut() &&
 				! isZoomOutOnMount
 			) {
@@ -51,10 +51,10 @@ export function useZoomOut( zoomOut = true ) {
 
 	useEffect( () => {
 		if ( zoomOut && ! isZoomOut() ) {
-			programatticEnterZoomOut.current = true;
+			programmaticZoomOutChange.current = true;
 			setZoomLevel( 'auto-scaled' );
 		} else if ( ! zoomOut && isZoomOut() ) {
-			programatticEnterZoomOut.current = false;
+			programmaticZoomOutChange.current = false;
 			resetZoomLevel();
 		}
 	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );

From eb52cba67f5b96cea801f87be7e469c29a3fda5d Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 23 Oct 2024 15:29:45 -0500
Subject: [PATCH 03/19] Refactor inserter e2e to use InserterUtils and add test
 for zoom out

---
 .../site-editor/site-editor-inserter.spec.js  | 98 +++++++++++++++----
 1 file changed, 80 insertions(+), 18 deletions(-)

diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index 04075cbedab30..affbca3f7d506 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -21,39 +21,40 @@ test.describe( 'Site Editor Inserter', () => {
 		await editor.canvas.locator( 'body' ).click();
 	} );
 
+	test.use( {
+		InserterUtils: async ( { editor, page }, use ) => {
+			await use( new InserterUtils( { editor, page } ) );
+		},
+	} );
+
 	test( 'inserter toggle button should toggle global inserter', async ( {
-		page,
+		InserterUtils,
 	} ) => {
-		await page.click( 'role=button[name="Block Inserter"i]' );
+		const inserterButton = InserterUtils.getInserterButton();
+
+		await inserterButton.click();
+
+		const blockLibrary = InserterUtils.getBlockLibrary();
 
 		// Visibility check
-		await expect(
-			page.locator( 'role=searchbox[name="Search"i]' )
-		).toBeVisible();
-		await page.click( 'role=button[name="Block Inserter"i]' );
+		await expect( blockLibrary ).toBeVisible();
+		await inserterButton.click();
 		//Hidden State check
-		await expect(
-			page.locator( 'role=searchbox[name="Search"i]' )
-		).toBeHidden();
+		await expect( blockLibrary ).toBeHidden();
 	} );
 
 	// A test for https://github.com/WordPress/gutenberg/issues/43090.
 	test( 'should close the inserter when clicking on the toggle button', async ( {
-		page,
 		editor,
+		InserterUtils,
 	} ) => {
-		const inserterButton = page.getByRole( 'button', {
-			name: 'Block Inserter',
-			exact: true,
-		} );
-		const blockLibrary = page.getByRole( 'region', {
-			name: 'Block Library',
-		} );
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
 
 		const beforeBlocks = await editor.getBlocks();
 
 		await inserterButton.click();
-		await blockLibrary.getByRole( 'tab', { name: 'Blocks' } ).click();
+		await InserterUtils.getBlockLibraryTab( 'Blocks' ).click();
 		await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click();
 
 		await expect
@@ -64,4 +65,65 @@ test.describe( 'Site Editor Inserter', () => {
 
 		await expect( blockLibrary ).toBeHidden();
 	} );
+
+	test( 'should open the inserter to patterns tab if using zoom out', async ( {
+		InserterUtils,
+	} ) => {
+		const zoomOutButton = InserterUtils.getZoomOutButton();
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
+
+		await zoomOutButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await inserterButton.click();
+		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
+		await expect( patternsTab ).toHaveAttribute(
+			'data-active-item',
+			'true'
+		);
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+
+		// We should still be in Zoom Out
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+	} );
 } );
+
+class InserterUtils {
+	constructor( { editor, page } ) {
+		this.editor = editor;
+		this.page = page;
+	}
+
+	getInserterButton() {
+		return this.page.getByRole( 'button', {
+			name: 'Block Inserter',
+			exact: true,
+		} );
+	}
+
+	getBlockLibrary() {
+		return this.page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+	}
+
+	getBlockLibraryTab( name ) {
+		return this.page.getByRole( 'tab', { name } );
+	}
+
+	getZoomOutButton() {
+		return this.page.getByRole( 'button', {
+			name: 'Zoom Out',
+			exact: true,
+		} );
+	}
+
+	getZoomCanvas() {
+		return this.page.locator( '.is-zoomed-out' );
+	}
+}

From 211fb18776fdec472586ae9aa9312e1a68904a63 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 23 Oct 2024 15:33:46 -0500
Subject: [PATCH 04/19] Add test for entering and exiting zoom out on pattern
 tab

---
 .../site-editor/site-editor-inserter.spec.js  | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index affbca3f7d506..ff62e7228a88f 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -91,6 +91,33 @@ test.describe( 'Site Editor Inserter', () => {
 		// We should still be in Zoom Out
 		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
 	} );
+
+	test( 'should enter zoom out from patterns tab and exit zoom out when closing the inserter', async ( {
+		InserterUtils,
+	} ) => {
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
+
+		await inserterButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
+
+		const blocksTab = InserterUtils.getBlockLibraryTab( 'Blocks' );
+		await expect( blocksTab ).toHaveAttribute( 'data-active-item', 'true' );
+
+		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
+		await patternsTab.click();
+		await expect( patternsTab ).toHaveAttribute(
+			'data-active-item',
+			'true'
+		);
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
+	} );
 } );
 
 class InserterUtils {

From fd1c0a2fd62049281c7aed76a50156c643b8a3db Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 23 Oct 2024 15:39:25 -0500
Subject: [PATCH 05/19] Add test to check that we return to zoom out if
 useZoomOut exits zoom out for us

---
 .../site-editor/site-editor-inserter.spec.js  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index ff62e7228a88f..591d153b3bb58 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -118,6 +118,39 @@ test.describe( 'Site Editor Inserter', () => {
 
 		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
 	} );
+
+	test( 'should return you to zoom out if starting from zoom out', async ( {
+		InserterUtils,
+	} ) => {
+		const zoomOutButton = InserterUtils.getZoomOutButton();
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
+
+		await zoomOutButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await inserterButton.click();
+		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
+		await expect( patternsTab ).toHaveAttribute(
+			'data-active-item',
+			'true'
+		);
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		const blocksTab = InserterUtils.getBlockLibraryTab( 'Blocks' );
+		await blocksTab.click();
+		await expect( blocksTab ).toHaveAttribute( 'data-active-item', 'true' );
+
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
+
+		// Close the inserter
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+
+		// We should return to zoom out since we started from there
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+	} );
 } );
 
 class InserterUtils {

From d594051a96359e69c4a4170752cf54a9f0095b98 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 23 Oct 2024 15:47:39 -0500
Subject: [PATCH 06/19] e2e: should not return you to zoom out if manually
 disengaged

---
 .../site-editor/site-editor-inserter.spec.js  | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index 591d153b3bb58..8a877417314d5 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -126,21 +126,59 @@ test.describe( 'Site Editor Inserter', () => {
 		const inserterButton = InserterUtils.getInserterButton();
 		const blockLibrary = InserterUtils.getBlockLibrary();
 
+		// Manually enter zoom out
 		await zoomOutButton.click();
 		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
 
+		// Open inserter
 		await inserterButton.click();
+
+		// Patterns tab should be active
 		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
 		await expect( patternsTab ).toHaveAttribute(
 			'data-active-item',
 			'true'
 		);
+		// Canvas should be zoomed
 		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
 
+		// Select blocks tab
 		const blocksTab = InserterUtils.getBlockLibraryTab( 'Blocks' );
 		await blocksTab.click();
 		await expect( blocksTab ).toHaveAttribute( 'data-active-item', 'true' );
+		// Zoom out should disengage
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
+
+		// Close the inserter
+		await inserterButton.click();
+		await expect( blockLibrary ).toBeHidden();
+
+		// We should return to zoom out since the inserter was opened with
+		// zoom out engaged, and it was automatically disengaged when selecting
+		// the blocks tab
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+	} );
+
+	// Test for https://github.com/WordPress/gutenberg/issues/66328
+	test( 'should not return you to zoom out if manually disengaged', async ( {
+		InserterUtils,
+	} ) => {
+		const zoomOutButton = InserterUtils.getZoomOutButton();
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
 
+		await zoomOutButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await inserterButton.click();
+		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
+		await expect( patternsTab ).toHaveAttribute(
+			'data-active-item',
+			'true'
+		);
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await zoomOutButton.click();
 		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
 
 		// Close the inserter
@@ -148,8 +186,8 @@ test.describe( 'Site Editor Inserter', () => {
 
 		await expect( blockLibrary ).toBeHidden();
 
-		// We should return to zoom out since we started from there
-		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+		// We should not return to zoom out since it was manually disengaged
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
 	} );
 } );
 

From 7f0e44d36540466a83d060eced3e8bbf36f52d23 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 07:11:22 -0500
Subject: [PATCH 07/19] Comment update

Co-authored-by: Dave Smith <getdavemail@gmail.com>
---
 packages/block-editor/src/hooks/use-zoom-out.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 37a42250d93b3..1cf19e46fb0c6 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -38,7 +38,7 @@ export function useZoomOut( zoomOut = true ) {
 			) {
 				setZoomLevel( 'auto-scaled' );
 			}
-			// We entered zoom out for them, and they were not originally in zoom out mode, so reset the zoom level.
+			// Zoom out was activated for the user, and they were not originally in zoom out mode, so reset the zoom level.
 			else if (
 				programmaticZoomOutChange.current === true &&
 				isZoomOut() &&

From 592f5cac6fd5a9ce57f0b47f7bd4bfb354eea068 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 07:11:53 -0500
Subject: [PATCH 08/19] Update comment

Co-authored-by: Dave Smith <getdavemail@gmail.com>
---
 packages/block-editor/src/hooks/use-zoom-out.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 1cf19e46fb0c6..d6921daee3b81 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -31,7 +31,7 @@ export function useZoomOut( zoomOut = true ) {
 				return;
 			}
 
-			// If we exited zoom out for them and they were originally in zoom out mode, enter zoom out again.
+			// If zoom out mode was exited for the user and they were originally in zoom out mode, re-enter zoom out mode.
 			if (
 				programmaticZoomOutChange.current === false &&
 				isZoomOutOnMount

From db88f9396c9c496034b50d7677030caad0b8d8da Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 07:13:49 -0500
Subject: [PATCH 09/19] update comment

---
 packages/block-editor/src/hooks/use-zoom-out.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index d6921daee3b81..754b737a8645c 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -26,7 +26,7 @@ export function useZoomOut( zoomOut = true ) {
 		const isZoomOutOnMount = isZoomOut();
 
 		return () => {
-			// We never changed modes for them, so there is nothing to do.
+			// No mode change was made for the user, so no action is needed.
 			if ( programmaticZoomOutChange.current === null ) {
 				return;
 			}

From 970410ffdf84abd7a1365f9f19e2e0a2345172e9 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 07:59:11 -0500
Subject: [PATCH 10/19] Simplify logic

---
 .../block-editor/src/hooks/use-zoom-out.js    | 53 +++++++++++--------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 754b737a8645c..8ea3582e3905b 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -20,42 +20,51 @@ export function useZoomOut( zoomOut = true ) {
 		useDispatch( blockEditorStore )
 	);
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
+
 	const programmaticZoomOutChange = useRef( null );
 
+	const toggleZoomOut = ( isZoomedOut ) => {
+		if ( isZoomedOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 'auto-scaled' );
+		}
+	};
+
 	useEffect( () => {
-		const isZoomOutOnMount = isZoomOut();
+		const matchedZoomOutStateOnMount = zoomOut === isZoomOut();
 
 		return () => {
-			// No mode change was made for the user, so no action is needed.
-			if ( programmaticZoomOutChange.current === null ) {
+			const isZoomedOut = isZoomOut();
+			// If the zoomOut state matched on mount and the current zoom state
+			// matches on unmount, then no action is needed.
+			if ( matchedZoomOutStateOnMount && isZoomedOut === zoomOut ) {
 				return;
 			}
 
-			// If zoom out mode was exited for the user and they were originally in zoom out mode, re-enter zoom out mode.
-			if (
-				programmaticZoomOutChange.current === false &&
-				isZoomOutOnMount
-			) {
-				setZoomLevel( 'auto-scaled' );
-			}
-			// Zoom out was activated for the user, and they were not originally in zoom out mode, so reset the zoom level.
-			else if (
-				programmaticZoomOutChange.current === true &&
-				isZoomOut() &&
-				! isZoomOutOnMount
-			) {
-				resetZoomLevel();
+			// The modes matched during a hook rerender (zoomOut === isZoomOut()),
+			// so we should not invert zoom states. This catches manual zoom out
+			// changes while the hook was mounted.
+			if ( ! programmaticZoomOutChange.current ) {
+				return;
 			}
+
+			// Zoom Out mode was changed by this hook, so we need to invert the state.
+			toggleZoomOut( isZoomedOut );
 		};
 	}, [] );
 
 	useEffect( () => {
-		if ( zoomOut && ! isZoomOut() ) {
+		const isZoomedOut = isZoomOut();
+
+		// Requested zoom and current zoom states are different, so toggle the state.
+		if ( zoomOut !== isZoomedOut ) {
 			programmaticZoomOutChange.current = true;
-			setZoomLevel( 'auto-scaled' );
-		} else if ( ! zoomOut && isZoomOut() ) {
+
+			toggleZoomOut( isZoomedOut );
+		} else {
+			// Reset the flag if the zoom state is the same as requested.
 			programmaticZoomOutChange.current = false;
-			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );
+	}, [ zoomOut, isZoomOut, toggleZoomOut ] );
 }

From 9804e46336d340a42d7913e472e8afadcabbc4d6 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 08:09:20 -0500
Subject: [PATCH 11/19] Inline zoom level changes, as it triggers a rerender if
 it is in a separate function

---
 .../block-editor/src/hooks/use-zoom-out.js    | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 8ea3582e3905b..566f7da45ff88 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -23,22 +23,13 @@ export function useZoomOut( zoomOut = true ) {
 
 	const programmaticZoomOutChange = useRef( null );
 
-	const toggleZoomOut = ( isZoomedOut ) => {
-		if ( isZoomedOut ) {
-			resetZoomLevel();
-		} else {
-			setZoomLevel( 'auto-scaled' );
-		}
-	};
-
 	useEffect( () => {
 		const matchedZoomOutStateOnMount = zoomOut === isZoomOut();
 
 		return () => {
-			const isZoomedOut = isZoomOut();
 			// If the zoomOut state matched on mount and the current zoom state
 			// matches on unmount, then no action is needed.
-			if ( matchedZoomOutStateOnMount && isZoomedOut === zoomOut ) {
+			if ( matchedZoomOutStateOnMount && isZoomOut() === zoomOut ) {
 				return;
 			}
 
@@ -49,8 +40,10 @@ export function useZoomOut( zoomOut = true ) {
 				return;
 			}
 
-			// Zoom Out mode was changed by this hook, so we need to invert the state.
-			toggleZoomOut( isZoomedOut );
+			// Zoom Out mode was toggled by this hook, so we need to invert the state.
+			return isZoomOut()
+				? resetZoomLevel()
+				: setZoomLevel( 'auto-scaled' );
 		};
 	}, [] );
 
@@ -61,10 +54,14 @@ export function useZoomOut( zoomOut = true ) {
 		if ( zoomOut !== isZoomedOut ) {
 			programmaticZoomOutChange.current = true;
 
-			toggleZoomOut( isZoomedOut );
+			if ( isZoomedOut ) {
+				resetZoomLevel();
+			} else {
+				setZoomLevel( 'auto-scaled' );
+			}
 		} else {
 			// Reset the flag if the zoom state is the same as requested.
 			programmaticZoomOutChange.current = false;
 		}
-	}, [ zoomOut, isZoomOut, toggleZoomOut ] );
+	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );
 }

From 4d98826e6cdd8afd9dcd5755efbcf0932fb2f4c6 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 08:11:23 -0500
Subject: [PATCH 12/19] Expand ternary

---
 packages/block-editor/src/hooks/use-zoom-out.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 566f7da45ff88..ed6a7d6859330 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -27,9 +27,10 @@ export function useZoomOut( zoomOut = true ) {
 		const matchedZoomOutStateOnMount = zoomOut === isZoomOut();
 
 		return () => {
+			const isZoomedOut = isZoomOut();
 			// If the zoomOut state matched on mount and the current zoom state
 			// matches on unmount, then no action is needed.
-			if ( matchedZoomOutStateOnMount && isZoomOut() === zoomOut ) {
+			if ( matchedZoomOutStateOnMount && isZoomedOut === zoomOut ) {
 				return;
 			}
 
@@ -41,9 +42,11 @@ export function useZoomOut( zoomOut = true ) {
 			}
 
 			// Zoom Out mode was toggled by this hook, so we need to invert the state.
-			return isZoomOut()
-				? resetZoomLevel()
-				: setZoomLevel( 'auto-scaled' );
+			if ( isZoomedOut ) {
+				resetZoomLevel();
+			} else {
+				setZoomLevel( 'auto-scaled' );
+			}
 		};
 	}, [] );
 

From 7dd5ade7c32cdeca25a79e0043b6a3ec1c27ae12 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 08:41:22 -0500
Subject: [PATCH 13/19] Update logic

---
 .../block-editor/src/hooks/use-zoom-out.js    | 35 +++++++++----------
 .../site-editor/site-editor-inserter.spec.js  | 32 +++++++++++++++++
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index ed6a7d6859330..b23bbcf6a77bd 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -21,28 +21,30 @@ export function useZoomOut( zoomOut = true ) {
 	);
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
-	const programmaticZoomOutChange = useRef( null );
+	const toggleZoomOnUnmount = useRef( null );
+
+	// Let this hook know if the zoom state was changed manually.
+	const manualIsZoomOutCheck = isZoomOut();
 
 	useEffect( () => {
-		const matchedZoomOutStateOnMount = zoomOut === isZoomOut();
+		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
+		// state (zoomOut), then it means they manually changed the zoom state and we should
+		// not toggle the zoom level on unmount.
+		if ( manualIsZoomOutCheck !== zoomOut ) {
+			toggleZoomOnUnmount.current = false;
+		}
+	}, [ manualIsZoomOutCheck ] );
+	// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
+	// the zoom out state changes due to user interaction and not due to the hook.
 
+	useEffect( () => {
 		return () => {
-			const isZoomedOut = isZoomOut();
-			// If the zoomOut state matched on mount and the current zoom state
-			// matches on unmount, then no action is needed.
-			if ( matchedZoomOutStateOnMount && isZoomedOut === zoomOut ) {
-				return;
-			}
-
-			// The modes matched during a hook rerender (zoomOut === isZoomOut()),
-			// so we should not invert zoom states. This catches manual zoom out
-			// changes while the hook was mounted.
-			if ( ! programmaticZoomOutChange.current ) {
+			if ( ! toggleZoomOnUnmount.current ) {
 				return;
 			}
 
 			// Zoom Out mode was toggled by this hook, so we need to invert the state.
-			if ( isZoomedOut ) {
+			if ( isZoomOut() ) {
 				resetZoomLevel();
 			} else {
 				setZoomLevel( 'auto-scaled' );
@@ -55,16 +57,13 @@ export function useZoomOut( zoomOut = true ) {
 
 		// Requested zoom and current zoom states are different, so toggle the state.
 		if ( zoomOut !== isZoomedOut ) {
-			programmaticZoomOutChange.current = true;
+			toggleZoomOnUnmount.current = true;
 
 			if ( isZoomedOut ) {
 				resetZoomLevel();
 			} else {
 				setZoomLevel( 'auto-scaled' );
 			}
-		} else {
-			// Reset the flag if the zoom state is the same as requested.
-			programmaticZoomOutChange.current = false;
 		}
 	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );
 }
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index 8a877417314d5..4419bbbfd84ab 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -189,6 +189,38 @@ test.describe( 'Site Editor Inserter', () => {
 		// We should not return to zoom out since it was manually disengaged
 		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
 	} );
+
+	// Similar test to the above but starting from not zoomed in
+	test( 'should not toggle zoom state when closing the inserter if the user manually changed zoom state', async ( {
+		InserterUtils,
+	} ) => {
+		const zoomOutButton = InserterUtils.getZoomOutButton();
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
+
+		await inserterButton.click();
+		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
+		await patternsTab.click();
+		await expect( patternsTab ).toHaveAttribute(
+			'data-active-item',
+			'true'
+		);
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await zoomOutButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
+		// Toggle again to return to zoom state
+		await zoomOutButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		// Close the inserter
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+
+		// We should stay in zoomed out state since it was manually engaged
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+	} );
 } );
 
 class InserterUtils {

From 76e6cd824ee8a2b632bf30985c8887f0f8358549 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 25 Oct 2024 10:01:36 -0500
Subject: [PATCH 14/19] Minor refactor

---
 .../block-editor/src/hooks/use-zoom-out.js    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index b23bbcf6a77bd..1467c8e4733dd 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -26,24 +26,12 @@ export function useZoomOut( zoomOut = true ) {
 	// Let this hook know if the zoom state was changed manually.
 	const manualIsZoomOutCheck = isZoomOut();
 
-	useEffect( () => {
-		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
-		// state (zoomOut), then it means they manually changed the zoom state and we should
-		// not toggle the zoom level on unmount.
-		if ( manualIsZoomOutCheck !== zoomOut ) {
-			toggleZoomOnUnmount.current = false;
-		}
-	}, [ manualIsZoomOutCheck ] );
-	// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
-	// the zoom out state changes due to user interaction and not due to the hook.
-
 	useEffect( () => {
 		return () => {
 			if ( ! toggleZoomOnUnmount.current ) {
 				return;
 			}
 
-			// Zoom Out mode was toggled by this hook, so we need to invert the state.
 			if ( isZoomOut() ) {
 				resetZoomLevel();
 			} else {
@@ -52,6 +40,8 @@ export function useZoomOut( zoomOut = true ) {
 		};
 	}, [] );
 
+	// This hook should only run when zoomOut changes, so we check for isZoomOut() within the
+	// hook rather than passing in
 	useEffect( () => {
 		const isZoomedOut = isZoomOut();
 
@@ -66,4 +56,15 @@ export function useZoomOut( zoomOut = true ) {
 			}
 		}
 	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );
+
+	useEffect( () => {
+		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
+		// state (zoomOut), then it means the user manually changed the zoom state and we should
+		// not toggle the zoom level on unmount.
+		if ( manualIsZoomOutCheck !== zoomOut ) {
+			toggleZoomOnUnmount.current = false;
+		}
+	}, [ manualIsZoomOutCheck ] );
+	// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
+	// the zoom out state changes due to user interaction and not due to the hook.
 }

From d48574b709314fab7218c43e43f97787a36c2a81 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 28 Oct 2024 09:47:07 -0500
Subject: [PATCH 15/19] Add failing test for starting in zoom out and then
 toggling zoom state via blocks tab and back to zoom out tab

---
 .../site-editor/site-editor-inserter.spec.js  | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index 4419bbbfd84ab..6d67c2b2619b5 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -27,7 +27,7 @@ test.describe( 'Site Editor Inserter', () => {
 		},
 	} );
 
-	test( 'inserter toggle button should toggle global inserter', async ( {
+	test.skip( 'inserter toggle button should toggle global inserter', async ( {
 		InserterUtils,
 	} ) => {
 		const inserterButton = InserterUtils.getInserterButton();
@@ -44,7 +44,7 @@ test.describe( 'Site Editor Inserter', () => {
 	} );
 
 	// A test for https://github.com/WordPress/gutenberg/issues/43090.
-	test( 'should close the inserter when clicking on the toggle button', async ( {
+	test.skip( 'should close the inserter when clicking on the toggle button', async ( {
 		editor,
 		InserterUtils,
 	} ) => {
@@ -66,7 +66,7 @@ test.describe( 'Site Editor Inserter', () => {
 		await expect( blockLibrary ).toBeHidden();
 	} );
 
-	test( 'should open the inserter to patterns tab if using zoom out', async ( {
+	test.skip( 'should open the inserter to patterns tab if using zoom out', async ( {
 		InserterUtils,
 	} ) => {
 		const zoomOutButton = InserterUtils.getZoomOutButton();
@@ -221,6 +221,47 @@ test.describe( 'Site Editor Inserter', () => {
 		// We should stay in zoomed out state since it was manually engaged
 		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
 	} );
+
+	// Covers bug found in https://github.com/WordPress/gutenberg/pull/66381#issuecomment-2441540851
+	test( 'should return to initial zoom out state after switching between multiple tabs', async ( {
+		InserterUtils,
+	} ) => {
+		const zoomOutButton = InserterUtils.getZoomOutButton();
+		const inserterButton = InserterUtils.getInserterButton();
+		const blockLibrary = InserterUtils.getBlockLibrary();
+
+		await zoomOutButton.click();
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		await inserterButton.click();
+		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
+		const blocksTab = InserterUtils.getBlockLibraryTab( 'Blocks' );
+		const mediaTab = InserterUtils.getBlockLibraryTab( 'Media' );
+
+		// Should start with pattern tab selected in zoom out state
+		await expect( patternsTab ).toHaveAttribute(
+			'data-active-item',
+			'true'
+		);
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		// Go to blocks tab which should exit zoom out
+		await blocksTab.click();
+		await expect( blocksTab ).toHaveAttribute( 'data-active-item', 'true' );
+		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
+
+		// Go to media tab which should enter zoom out again since that's the starting state
+		await mediaTab.click();
+		await expect( mediaTab ).toHaveAttribute( 'data-active-item', 'true' );
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+
+		// Close the inserter
+		await inserterButton.click();
+		await expect( blockLibrary ).toBeHidden();
+
+		// We should re-enter zoomed out state since it was the starting point
+		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
+	} );
 } );
 
 class InserterUtils {

From f31f0da7334323901f4261a55a57be003ebaa706 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 28 Oct 2024 10:19:18 -0500
Subject: [PATCH 16/19] Add zoom on mount ref

---
 .../block-editor/src/hooks/use-zoom-out.js    | 19 +++++++++++++++++--
 .../site-editor/site-editor-inserter.spec.js  |  6 +++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 1467c8e4733dd..5ceebcd5ff373 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -21,12 +21,15 @@ export function useZoomOut( zoomOut = true ) {
 	);
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
-	const toggleZoomOnUnmount = useRef( null );
+	const toggleZoomOnUnmount = useRef( false );
+	const zoomStateOnMount = useRef( null );
 
 	// Let this hook know if the zoom state was changed manually.
 	const manualIsZoomOutCheck = isZoomOut();
 
 	useEffect( () => {
+		zoomStateOnMount.current = isZoomOut();
+
 		return () => {
 			if ( ! toggleZoomOnUnmount.current ) {
 				return;
@@ -47,7 +50,16 @@ export function useZoomOut( zoomOut = true ) {
 
 		// Requested zoom and current zoom states are different, so toggle the state.
 		if ( zoomOut !== isZoomedOut ) {
-			toggleZoomOnUnmount.current = true;
+			// If we are in tracked mode (zoomStateOnMount !== null) and the zoomOut state
+			// changes back to the original state, then we should not reset the zoom level on unmount.
+			if (
+				zoomStateOnMount.current !== null &&
+				zoomStateOnMount.current === zoomOut
+			) {
+				toggleZoomOnUnmount.current = false;
+			} else {
+				toggleZoomOnUnmount.current = true;
+			}
 
 			if ( isZoomedOut ) {
 				resetZoomLevel();
@@ -63,6 +75,9 @@ export function useZoomOut( zoomOut = true ) {
 		// not toggle the zoom level on unmount.
 		if ( manualIsZoomOutCheck !== zoomOut ) {
 			toggleZoomOnUnmount.current = false;
+			// We no longer care about the zoom state on mount.
+			// We are tracking the toggle on unmount based on if this hook changes.
+			zoomStateOnMount.current = null;
 		}
 	}, [ manualIsZoomOutCheck ] );
 	// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index 6d67c2b2619b5..66716cd1ce766 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -27,7 +27,7 @@ test.describe( 'Site Editor Inserter', () => {
 		},
 	} );
 
-	test.skip( 'inserter toggle button should toggle global inserter', async ( {
+	test( 'inserter toggle button should toggle global inserter', async ( {
 		InserterUtils,
 	} ) => {
 		const inserterButton = InserterUtils.getInserterButton();
@@ -44,7 +44,7 @@ test.describe( 'Site Editor Inserter', () => {
 	} );
 
 	// A test for https://github.com/WordPress/gutenberg/issues/43090.
-	test.skip( 'should close the inserter when clicking on the toggle button', async ( {
+	test( 'should close the inserter when clicking on the toggle button', async ( {
 		editor,
 		InserterUtils,
 	} ) => {
@@ -66,7 +66,7 @@ test.describe( 'Site Editor Inserter', () => {
 		await expect( blockLibrary ).toBeHidden();
 	} );
 
-	test.skip( 'should open the inserter to patterns tab if using zoom out', async ( {
+	test( 'should open the inserter to patterns tab if using zoom out', async ( {
 		InserterUtils,
 	} ) => {
 		const zoomOutButton = InserterUtils.getZoomOutButton();

From 50c58fd9f7a57951eee05d5c38258fe6de5d7a27 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 28 Oct 2024 13:18:08 -0500
Subject: [PATCH 17/19] rename manualIsZoomOutCheck to userZoomOutState

---
 packages/block-editor/src/hooks/use-zoom-out.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 5ceebcd5ff373..d6b851930e803 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 zoomStateOnMount = useRef( null );
 
 	// Let this hook know if the zoom state was changed manually.
-	const manualIsZoomOutCheck = isZoomOut();
+	const userZoomOutState = isZoomOut();
 
 	useEffect( () => {
 		zoomStateOnMount.current = isZoomOut();
@@ -73,13 +73,13 @@ export function useZoomOut( zoomOut = true ) {
 		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
 		// state (zoomOut), then it means the user manually changed the zoom state and we should
 		// not toggle the zoom level on unmount.
-		if ( manualIsZoomOutCheck !== zoomOut ) {
+		if ( userZoomOutState !== zoomOut ) {
 			toggleZoomOnUnmount.current = false;
 			// We no longer care about the zoom state on mount.
 			// We are tracking the toggle on unmount based on if this hook changes.
 			zoomStateOnMount.current = null;
 		}
-	}, [ manualIsZoomOutCheck ] );
+	}, [ userZoomOutState ] );
 	// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
 	// the zoom out state changes due to user interaction and not due to the hook.
 }

From dffbe144aefd11096d152742a9f76f0d2d6c2e16 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 29 Oct 2024 09:48:27 -0500
Subject: [PATCH 18/19] Add eslint rule for intentionally excluding dependency

---
 packages/block-editor/src/hooks/use-zoom-out.js | 6 ++++--
 1 file changed, 4 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 d6b851930e803..b428edffa4c25 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -79,7 +79,9 @@ export function useZoomOut( zoomOut = true ) {
 			// We are tracking the toggle on unmount based on if this hook changes.
 			zoomStateOnMount.current = null;
 		}
+
+		// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
+		// the zoom out state changes due to user interaction and not due to the hook.
+		// eslint-disable-next-line react-hooks/rules-of-hooks
 	}, [ userZoomOutState ] );
-	// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
-	// the zoom out state changes due to user interaction and not due to the hook.
 }

From 69c6cf2e1b4e040dcd1535901389f5f56970dbc3 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 29 Oct 2024 10:22:41 -0500
Subject: [PATCH 19/19] Refactor for simplicity

---
 .../block-editor/src/hooks/use-zoom-out.js    | 44 +++++++++----------
 .../site-editor/site-editor-inserter.spec.js  |  7 ++-
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index b428edffa4c25..fd409c8465790 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -22,13 +22,12 @@ export function useZoomOut( zoomOut = true ) {
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
 	const toggleZoomOnUnmount = useRef( false );
-	const zoomStateOnMount = useRef( null );
-
-	// Let this hook know if the zoom state was changed manually.
-	const userZoomOutState = isZoomOut();
+	const userZoomState = useRef( null );
+	const isZoomedOut = isZoomOut();
 
 	useEffect( () => {
-		zoomStateOnMount.current = isZoomOut();
+		// Store the user's manually set zoom state on mount.
+		userZoomState.current = isZoomOut();
 
 		return () => {
 			if ( ! toggleZoomOnUnmount.current ) {
@@ -43,19 +42,16 @@ export function useZoomOut( zoomOut = true ) {
 		};
 	}, [] );
 
-	// This hook should only run when zoomOut changes, so we check for isZoomOut() within the
-	// hook rather than passing in
+	/**
+	 * This hook should only run when the requested zoomOut changes. We don't want to
+	 * update it when isZoomedOut changes.
+	 */
 	useEffect( () => {
-		const isZoomedOut = isZoomOut();
-
 		// Requested zoom and current zoom states are different, so toggle the state.
 		if ( zoomOut !== isZoomedOut ) {
-			// If we are in tracked mode (zoomStateOnMount !== null) and the zoomOut state
-			// changes back to the original state, then we should not reset the zoom level on unmount.
-			if (
-				zoomStateOnMount.current !== null &&
-				zoomStateOnMount.current === zoomOut
-			) {
+			// If the requested zoomOut matches the user's manually set zoom state,
+			// do not toggle the zoom level on unmount.
+			if ( userZoomState.current === zoomOut ) {
 				toggleZoomOnUnmount.current = false;
 			} else {
 				toggleZoomOnUnmount.current = true;
@@ -67,21 +63,25 @@ export function useZoomOut( zoomOut = true ) {
 				setZoomLevel( 'auto-scaled' );
 			}
 		}
-	}, [ zoomOut, setZoomLevel, isZoomOut, resetZoomLevel ] );
+		// Intentionally excluding isZoomedOut so this hook will not recursively udpate.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
 
+	/**
+	 * This hook tracks if the zoom state was changed manually by the user via clicking
+	 * the zoom out button.
+	 */
 	useEffect( () => {
 		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
 		// state (zoomOut), then it means the user manually changed the zoom state and we should
 		// not toggle the zoom level on unmount.
-		if ( userZoomOutState !== zoomOut ) {
+		if ( isZoomedOut !== zoomOut ) {
 			toggleZoomOnUnmount.current = false;
-			// We no longer care about the zoom state on mount.
-			// We are tracking the toggle on unmount based on if this hook changes.
-			zoomStateOnMount.current = null;
+			userZoomState.current = zoomOut;
 		}
 
 		// Intentionally excluding zoomOut from the dependency array. We want to catch instances where
 		// the zoom out state changes due to user interaction and not due to the hook.
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-	}, [ userZoomOutState ] );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ isZoomedOut ] );
 }
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index 66716cd1ce766..459d8fadbe30b 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -146,6 +146,7 @@ test.describe( 'Site Editor Inserter', () => {
 		const blocksTab = InserterUtils.getBlockLibraryTab( 'Blocks' );
 		await blocksTab.click();
 		await expect( blocksTab ).toHaveAttribute( 'data-active-item', 'true' );
+
 		// Zoom out should disengage
 		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
 
@@ -199,6 +200,8 @@ test.describe( 'Site Editor Inserter', () => {
 		const blockLibrary = InserterUtils.getBlockLibrary();
 
 		await inserterButton.click();
+
+		// Go to patterns tab which should enter zoom out
 		const patternsTab = InserterUtils.getBlockLibraryTab( 'Patterns' );
 		await patternsTab.click();
 		await expect( patternsTab ).toHaveAttribute(
@@ -207,9 +210,11 @@ test.describe( 'Site Editor Inserter', () => {
 		);
 		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();
 
+		// Manually toggle zoom out off
 		await zoomOutButton.click();
 		await expect( await InserterUtils.getZoomCanvas() ).toBeHidden();
-		// Toggle again to return to zoom state
+
+		// Manually toggle zoom out again to return to zoomed-in state set by the patterns tab.
 		await zoomOutButton.click();
 		await expect( await InserterUtils.getZoomCanvas() ).toBeVisible();