From b1bf7b8a8e7f64a23d79441b62db2f09d3ce6829 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 10:55:08 +0100
Subject: [PATCH] Inserter: Only always show the inserter when the zoom out
 experiment is on

---
 .../src/components/inserter-sidebar/index.js  | 71 ++++++++++++-------
 .../editor/various/inserting-blocks.spec.js   |  2 +-
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index cd45d101f187a..25927c57650f4 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -6,7 +6,10 @@ import {
 	__experimentalLibrary as Library,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -52,6 +55,10 @@ export default function InserterSidebar( {
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: true,
+	} );
 	const libraryRef = useRef();
 
 	// When closing the inserter, focus should return to the toggle button.
@@ -70,30 +77,46 @@ export default function InserterSidebar( {
 		[ closeInserterSidebar ]
 	);
 
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
-			<div className="editor-inserter-sidebar__content">
-				<Library
-					showMostUsedBlocks={ showMostUsedBlocks }
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobileViewport }
-					rootClientId={
-						blockSectionRootClientId ?? insertionPoint.rootClientId
-					}
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalInitialTab={ insertionPoint.tab }
-					__experimentalInitialCategory={ insertionPoint.category }
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					__experimentalOnPatternCategorySelection={
-						isRightSidebarOpen ? closeGeneralSidebar : undefined
-					}
-					ref={ libraryRef }
-					onClose={ closeInserterSidebar }
-				/>
+	const inserterContents = (
+		<div className="editor-inserter-sidebar__content">
+			<Library
+				showMostUsedBlocks={ showMostUsedBlocks }
+				showInserterHelpPanel
+				shouldFocusBlock={ isMobileViewport }
+				rootClientId={
+					blockSectionRootClientId ?? insertionPoint.rootClientId
+				}
+				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				__experimentalInitialTab={ insertionPoint.tab }
+				__experimentalInitialCategory={ insertionPoint.category }
+				__experimentalFilterValue={ insertionPoint.filterValue }
+				__experimentalOnPatternCategorySelection={
+					isRightSidebarOpen ? closeGeneralSidebar : undefined
+				}
+				ref={ libraryRef }
+				onClose={ closeInserterSidebar }
+			/>
+		</div>
+	);
+
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div
+				onKeyDown={ closeOnEscape }
+				className="editor-inserter-sidebar"
+			>
+				{ inserterContents }
 			</div>
+		);
+	}
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="editor-inserter-sidebar"
+		>
+			{ inserterContents }
 		</div>
 	);
 }
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index 1a443152800de..3ef5a8f65045f 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -636,7 +636,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			page.getByRole( 'region', {
 				name: 'Block Library',
 			} )
-		).toBeVisible();
+		).toBeHidden();
 	} );
 
 	test( 'shows block preview when hovering over block in inserter', async ( {