Reset page after changing pattern filters or search value (#54774)

WordPress · Sep 25, 2023 · 7936d79 · 7936d79
1 parent 924d35c
commit 7936d79
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
 import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
@@ -114,6 +114,14 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 		container
 	);
 
+	// Reset page when search value changes.
+	const [ previousSearchValue, setPreviousSearchValue ] =
+		useState( searchValue );
+	if ( searchValue !== previousSearchValue ) {
+		setPreviousSearchValue( searchValue );
+		pagingProps.changePage( 1 );
+	}
+
 	const hasItems = !! filteredBlockPatterns?.length;
 	return (
 		<div

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -279,11 +279,27 @@ export function BlockPatternsCategoryPanel( {
 		category,
 		scrollContainerRef
 	);
+	const { changePage } = pagingProps;
 
 	// Hide block pattern preview on unmount.
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
+	const onSetPatternSyncFilter = useCallback(
+		( value ) => {
+			setPatternSyncFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSyncFilter, changePage ]
+	);
+	const onSetPatternSourceFilter = useCallback(
+		( value ) => {
+			setPatternSourceFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSourceFilter, changePage ]
+	);
+
 	return (
 		<div className="block-editor-inserter__patterns-category-panel">
 			<VStack
@@ -299,8 +315,8 @@ export function BlockPatternsCategoryPanel( {
 					<BlockPatternsSyncFilter
 						patternSyncFilter={ patternSyncFilter }
 						patternSourceFilter={ patternSourceFilter }
-						setPatternSyncFilter={ setPatternSyncFilter }
-						setPatternSourceFilter={ setPatternSourceFilter }
+						setPatternSyncFilter={ onSetPatternSyncFilter }
+						setPatternSourceFilter={ onSetPatternSourceFilter }
 						scrollContainerRef={ scrollContainerRef }
 						category={ category }
 					/>