Hide inserter's block preview when searching (#23827)

* hide block preview on inserter * handle onUnmount internally * fix tests
WordPress · Jul 13, 2020 · c2af546 · c2af546
1 parent 815deac
commit c2af546
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -106,6 +106,9 @@ export function BlockTypesTab( {
 		return result;
 	}, [ filteredItems, collections ] );
 
+	// hide block preview on unmount
+	useEffect( () => () => onHover( null ), [] );
+
 	// Announce search results on change
 	useEffect( () => {
 		const resultsFoundMessage = sprintf(

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -128,7 +128,10 @@ function InserterMenu( {
 				{ /* the following div is necessary to fix the sticky position of the search form */ }
 				<div className="block-editor-inserter__content">
 					<InserterSearchForm
-						onChange={ setFilterValue }
+						onChange={ ( value ) => {
+							if ( hoveredItem ) setHoveredItem( null );
+							setFilterValue( value );
+						} }
 						value={ filterValue }
 					/>
 					{ ( showPatterns || hasReusableBlocks ) && (

diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.js b/packages/block-editor/src/components/inserter/test/block-types-tab.js
@@ -36,7 +36,13 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
 const debouncedSpeak = jest.fn();
 
 function InserterBlockList( props ) {
-	return <BlockTypesTab debouncedSpeak={ debouncedSpeak } { ...props } />;
+	return (
+		<BlockTypesTab
+			debouncedSpeak={ debouncedSpeak }
+			onHover={ () => {} }
+			{ ...props }
+		/>
+	);
 }
 
 const initializeAllClosedMenuState = ( propOverrides ) => {