From 2b06db0b3150decd42bc0b22c7617483fe2c2b03 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 25 Sep 2023 14:58:49 +0800
Subject: [PATCH] Reset page after changing pattern filters or search value
 (#54774)

---
 .../block-patterns-explorer/patterns-list.js  | 10 +++++++++-
 .../components/inserter/block-patterns-tab.js | 20 +++++++++++++++++--
 2 files changed, 27 insertions(+), 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
index e96d1b2321eb2..fcb9a1980db99 100644
--- 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
index 59f1a4936a241..289ad4dfa4709 100644
--- 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 }
 					/>