Inserter: Only always show the inserter when the zoom out experiment …

…is on (WordPress#61856) Co-authored-by: scruffian <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: ellatrix <[email protected]>
patil-vipul · Jun 17, 2024 · 6393e99 · 6393e99
1 parent b6df809
commit 6393e99
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 25 deletions.
diff --git 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
@@ -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 ( {