From 4219afa3deba1e4acbfd1488f055aa07d9df7077 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 28 Jul 2023 16:39:04 +1200
Subject: [PATCH] backport paging bug fixes

---
 .../src/components/page-patterns/grid.js        | 11 ++++++++---
 .../components/page-patterns/patterns-list.js   | 17 +++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js
index 47bcdc8a1f768e..efbf8a6989a32f 100644
--- a/packages/edit-site/src/components/page-patterns/grid.js
+++ b/packages/edit-site/src/components/page-patterns/grid.js
@@ -6,7 +6,7 @@ import {
 	__experimentalText as Text,
 	Button,
 } from '@wordpress/components';
-import { useRef, useState, useMemo } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -82,8 +82,13 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) {
 	);
 }
 
-export default function Grid( { categoryId, items, ...props } ) {
-	const [ currentPage, setCurrentPage ] = useState( 1 );
+export default function Grid( {
+	categoryId,
+	items,
+	currentPage,
+	setCurrentPage,
+	...props
+} ) {
 	const gridRef = useRef();
 	const totalItems = items.length;
 	const pageIndex = currentPage - 1;
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 9ebfc5dfe5c98f..725cc0f01850da 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -48,6 +48,7 @@ const SYNC_DESCRIPTIONS = {
 };
 
 export default function PatternsList( { categoryId, type } ) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
 	const location = useLocation();
 	const history = useHistory();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -73,6 +74,16 @@ export default function PatternsList( { categoryId, type } ) {
 		}
 	);
 
+	const updateSearchFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setFilterValue( value );
+	};
+
+	const updateSyncFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setSyncFilter( value );
+	};
+
 	const id = useId();
 	const titleId = `${ id }-title`;
 	const descriptionId = `${ id }-description`;
@@ -109,7 +120,7 @@ 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 }
@@ -123,7 +134,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(
@@ -157,6 +168,8 @@ export default function PatternsList( { categoryId, type } ) {
 					items={ patterns }
 					aria-labelledby={ titleId }
 					aria-describedby={ descriptionId }
+					currentPage={ currentPage }
+					setCurrentPage={ setCurrentPage }
 				/>
 			) }
 			{ ! isResolving && ! hasPatterns && <NoPatterns /> }