add search results header info

WordPress · Oct 20, 2021 · cf7fe53 · cf7fe53
1 parent ea6ca1f
commit cf7fe53
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
@@ -20,10 +20,7 @@ function PatternsExplorer( {
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const patternList = !! filterValue ? (
-		<PatternExplorerSearchResults
-			filterValue={ filterValue }
-			// onSelect={ onSelect }
-		/>
+		<PatternExplorerSearchResults filterValue={ filterValue } />
 	) : (
 		children
 	);

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/search-results.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/search-results.js
@@ -26,7 +26,6 @@ function PatternExplorerSearchResults( {
 	isAppender,
 	__experimentalInsertionIndex,
 	maxBlockPatterns,
-	// maxBlockTypes,
 	shouldFocusBlock = true,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
@@ -71,17 +70,33 @@ function PatternExplorerSearchResults( {
 
 	const hasItems = !! filteredBlockPatterns?.length;
 	return (
-		<InserterListbox>
-			{ ! hasItems && <InserterNoResults /> }
+		<>
 			{ hasItems && (
-				<BlockPatternsList
-					shownPatterns={ currentShownPatterns }
-					blockPatterns={ filteredBlockPatterns }
-					onClickPattern={ onSelectBlockPattern }
-					isDraggable={ false }
-				/>
+				<h2 className="block-editor-block-patterns-explorer__search-results-count">
+					{ sprintf(
+						/* translators: %d: number of patterns. */
+						_n(
+							'%d pattern found for',
+							'%d patterns found for',
+							filteredBlockPatterns.length
+						),
+						filteredBlockPatterns.length
+					) }
+					{ ` "${ filterValue }"` }
+				</h2>
 			) }
-		</InserterListbox>
+			<InserterListbox>
+				{ ! hasItems && <InserterNoResults /> }
+				{ hasItems && (
+					<BlockPatternsList
+						shownPatterns={ currentShownPatterns }
+						blockPatterns={ filteredBlockPatterns }
+						onClickPattern={ onSelectBlockPattern }
+						isDraggable={ false }
+					/>
+				) }
+			</InserterListbox>
+		</>
 	);
 }
 

diff --git a/packages/block-editor/src/components/inserter/pattern-panel.js b/packages/block-editor/src/components/inserter/pattern-panel.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
-import { grid } from '@wordpress/icons';
+import { fullscreen } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 function PatternInserterPanel( {
@@ -70,7 +70,7 @@ function PatternInserterPanel( {
 				<FlexItem>
 					<Button
 						label={ __( 'Pattern explorer' ) }
-						icon={ grid }
+						icon={ fullscreen }
 						onClick={ onShowExplorer }
 						isSmall
 					/>