From 52b73196558fdf1c5b134fb388827d635f200d19 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 25 Jul 2023 22:00:41 +1000
Subject: [PATCH 1/2] Patterns: Reset current page when search filters change

---
 .../components/page-patterns/patterns-list.js | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
index 2744359bf0628b..3e61400599171f 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useState, useDeferredValue, useId, useMemo } from '@wordpress/element';
+import {
+	useState,
+	useDeferredValue,
+	useEffect,
+	useId,
+	useMemo,
+} from '@wordpress/element';
 import {
 	SearchControl,
 	__experimentalVStack as VStack,
@@ -78,6 +84,13 @@ export default function PatternsList( { categoryId, type } ) {
 		}
 	);
 
+	// If the search term or sync filter is changing, we need to reset the
+	// current page back to zero so results are still within the set displayed.
+	useEffect(
+		() => setCurrentPage( 1 ),
+		[ deferredFilterValue, deferredSyncedFilter ]
+	);
+
 	const id = useId();
 	const titleId = `${ id }-title`;
 	const descriptionId = `${ id }-description`;
@@ -90,14 +103,12 @@ export default function PatternsList( { categoryId, type } ) {
 	const pageIndex = currentPage - 1;
 	const numPages = Math.ceil( patterns.length / PAGE_SIZE );
 
-	const list = useMemo(
-		() =>
-			patterns.slice(
-				pageIndex * PAGE_SIZE,
-				pageIndex * PAGE_SIZE + PAGE_SIZE
-			),
-		[ pageIndex, patterns ]
-	);
+	const list = useMemo( () => {
+		return patterns.slice(
+			pageIndex * PAGE_SIZE,
+			pageIndex * PAGE_SIZE + PAGE_SIZE
+		);
+	}, [ pageIndex, patterns ] );
 
 	const asyncList = useAsyncList( list, { step: 10 } );
 

From 3964156097fe1dfee0255a5431948c59b236c99a Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Wed, 26 Jul 2023 10:04:06 +1200
Subject: [PATCH 2/2] Update the current page on value change rather than with
 a useEffect

---
 .../components/page-patterns/patterns-list.js | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
index 3e61400599171f..01525fc5dccab7 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	useState,
-	useDeferredValue,
-	useEffect,
-	useId,
-	useMemo,
-} from '@wordpress/element';
+import { useState, useDeferredValue, useId, useMemo } from '@wordpress/element';
 import {
 	SearchControl,
 	__experimentalVStack as VStack,
@@ -84,12 +78,15 @@ export default function PatternsList( { categoryId, type } ) {
 		}
 	);
 
-	// If the search term or sync filter is changing, we need to reset the
-	// current page back to zero so results are still within the set displayed.
-	useEffect(
-		() => setCurrentPage( 1 ),
-		[ deferredFilterValue, deferredSyncedFilter ]
-	);
+	const updateSearchFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setFilterValue( value );
+	};
+
+	const updateSyncFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setSyncFilter( value );
+	};
 
 	const id = useId();
 	const titleId = `${ id }-title`;
@@ -149,7 +146,9 @@ export default function PatternsList( { categoryId, type } ) {
 					<FlexBlock className="edit-site-patterns__search-block">
 						<SearchControl
 							className="edit-site-patterns__search"
-							onChange={ ( value ) => setFilterValue( value ) }
+							onChange={ ( value ) =>
+								updateSearchFilter( value )
+							}
 							placeholder={ __( 'Search patterns' ) }
 							label={ __( 'Search patterns' ) }
 							value={ filterValue }
@@ -163,7 +162,7 @@ export default function PatternsList( { categoryId, type } ) {
 							label={ __( 'Filter by sync status' ) }
 							value={ syncFilter }
 							isBlock
-							onChange={ ( value ) => setSyncFilter( value ) }
+							onChange={ ( value ) => updateSyncFilter( value ) }
 							__nextHasNoMarginBottom
 						>
 							{ Object.entries( SYNC_FILTERS ).map(