backport paging bug fixes (#53091)

WordPress · Jul 28, 2023 · 02f3eb9 · 02f3eb9
1 parent 513443b
commit 02f3eb9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -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 /> }