Try focusing when inserter clicked in Zoom Out

WordPress · Aug 9, 2024 · 6eae006 · 6eae006
1 parent 991bee9
commit 6eae006
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -59,6 +59,14 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
+	useEffect( () => {
+		return () => {
+			setInserterIsOpened( {
+				focusSearch: false,
+			} );
+		};
+	}, [ setInserterIsOpened ] );
+
 	if ( ! isReady ) {
 		return null;
 	}
@@ -106,6 +114,7 @@ function ZoomOutModeInserters() {
 								insertionIndex: index,
 								tab: 'patterns',
 								category: 'all',
+								focusSearch: true,
 							} );
 							showInsertionPoint( sectionRootClientId, index, {
 								operation: 'insert',

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
@@ -27,6 +27,7 @@ function InserterLibrary(
 		onSelect = noop,
 		shouldFocusBlock = false,
 		onClose,
+		__experimentalFocusSearchOnMount = false,
 	},
 	ref
 ) {
@@ -58,6 +59,9 @@ function InserterLibrary(
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 			onClose={ onClose }
+			__experimentalFocusSearchOnMount={
+				__experimentalFocusSearchOnMount
+			}
 		/>
 	);
 }

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useFocusOnMount } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -50,9 +50,12 @@ function InserterMenu(
 		onClose,
 		__experimentalInitialTab,
 		__experimentalInitialCategory,
+		__experimentalFocusSearchOnMount,
 	},
 	ref
 ) {
+	const focusSearchOnMountRef = useFocusOnMount();
+
 	const isZoomOutMode = useSelect(
 		( select ) =>
 			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
@@ -152,19 +155,27 @@ function InserterMenu(
 
 		return (
 			<>
-				<SearchControl
-					__nextHasNoMarginBottom
-					className="block-editor-inserter__search"
-					onChange={ ( value ) => {
-						if ( hoveredItem ) {
-							setHoveredItem( null );
-						}
-						setFilterValue( value );
-					} }
-					value={ filterValue }
-					label={ __( 'Search for blocks and patterns' ) }
-					placeholder={ __( 'Search' ) }
-				/>
+				<div
+					ref={
+						__experimentalFocusSearchOnMount
+							? focusSearchOnMountRef
+							: null
+					}
+				>
+					<SearchControl
+						__nextHasNoMarginBottom
+						className="block-editor-inserter__search"
+						onChange={ ( value ) => {
+							if ( hoveredItem ) {
+								setHoveredItem( null );
+							}
+							setFilterValue( value );
+						} }
+						value={ filterValue }
+						label={ __( 'Search for blocks and patterns' ) }
+						placeholder={ __( 'Search' ) }
+					/>
+				</div>
 				{ !! delayedFilterValue && (
 					<InserterSearchResults
 						filterValue={ delayedFilterValue }

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
@@ -27,11 +27,13 @@ export default function InserterSidebar() {
 		insertionPoint,
 		showMostUsedBlocks,
 		sidebarIsOpened,
+		isInserterSearchFocused,
 	} = useSelect( ( select ) => {
 		const {
 			getInserterSidebarToggleRef,
 			getInsertionPoint,
 			isPublishSidebarOpened,
+			inserterSearchFocused,
 		} = unlock( select( editorStore ) );
 		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
 			select( blockEditorStore );
@@ -54,6 +56,7 @@ export default function InserterSidebar() {
 			sidebarIsOpened: !! (
 				getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened()
 			),
+			isInserterSearchFocused: inserterSearchFocused(),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
@@ -99,6 +102,7 @@ export default function InserterSidebar() {
 				}
 				ref={ libraryRef }
 				onClose={ closeInserterSidebar }
+				__experimentalFocusSearchOnMount={ isInserterSearchFocused }
 			/>
 		</div>
 	);