From a76c4759f2989e9107984379bf3b61ae9bfd3c58 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 12 Sep 2024 10:56:01 +0100
Subject: [PATCH] Close inserter on exiting Zoom Out to edit (#65194)

* Use experimental setting in single call location

* Close inserter on double click to exit Zoom Out

* Avoid additional store subscription
---
 .../use-block-props/use-zoom-out-mode-exit.js      | 14 +++++++++++++-
 .../src/components/block-tools/zoom-out-toolbar.js | 11 +++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
index bb6edd066f06f1..1944cfde96c7f3 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -16,6 +16,10 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useZoomOutModeExit( { editorMode } ) {
+	const getSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings
+	);
+
 	const { __unstableSetEditorMode } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -29,6 +33,14 @@ export function useZoomOutModeExit( { editorMode } ) {
 			function onDoubleClick( event ) {
 				if ( ! event.defaultPrevented ) {
 					event.preventDefault();
+
+					const { __experimentalSetIsInserterOpened } = getSettings();
+
+					if (
+						typeof __experimentalSetIsInserterOpened === 'function'
+					) {
+						__experimentalSetIsInserterOpened( false );
+					}
 					__unstableSetEditorMode( 'edit' );
 				}
 			}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index 0d3df9e20dfc54..a3c46c4b4c970a 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -31,7 +31,12 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 				getPreviousBlockClientId,
 				canRemoveBlock,
 				canMoveBlock,
+				getSettings,
 			} = select( blockEditorStore );
+
+			const { __experimentalSetIsInserterOpened: setIsInserterOpened } =
+				getSettings();
+
 			const { getBlockType } = select( blocksStore );
 			const { name } = getBlock( clientId );
 			const blockType = getBlockType( name );
@@ -63,6 +68,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 				isPrevBlockTemplatePart,
 				canRemove: canRemoveBlock( clientId ),
 				canMove: canMoveBlock( clientId ),
+				setIsInserterOpened,
 			};
 		},
 		[ clientId ]
@@ -75,6 +81,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 		isPrevBlockTemplatePart,
 		canRemove,
 		canMove,
+		setIsInserterOpened,
 	} = selected;
 
 	const { removeBlock, __unstableSetEditorMode } =
@@ -132,6 +139,10 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 					icon={ edit }
 					label={ __( 'Edit' ) }
 					onClick={ () => {
+						// Setting may be undefined.
+						if ( typeof setIsInserterOpened === 'function' ) {
+							setIsInserterOpened( false );
+						}
 						__unstableSetEditorMode( 'edit' );
 						__unstableContentRef.current?.focus();
 					} }