WIP

lib/compat/wordpress-6.3/blocks.php

@@ -120,3 +120,50 @@ function gutenberg_wp_block_register_post_meta() {
 	);
 }
 add_action( 'init', 'gutenberg_wp_block_register_post_meta' );
+
+/**
+ * Allow querying blocks by sync_status.
+ *
+ * Note: This should be removed when the minimum required WP version is >= 6.3.
+ *
+ * @param array           $args    Array of arguments for WP_Query.
+ * @param WP_REST_Request $request The REST API request.
+ *
+ * @return array Updated array of arguments for WP_Query.
+ */
+function gutenberg_rest_wp_block_query( $args, $request ) {
+	if ( isset( $request['sync_status'] ) ) {
+		if ( 'fully' === $request['sync_status'] ) {
+			$sync_status_query = array(
+				'relation' => 'OR',
+				array(
+					'key'     => 'sync_status',
+					'value'   => '',
+					'compare' => 'NOT EXISTS',
+				),
+				array(
+					'key'     => 'sync_status',
+					'value'   => 'fully',
+					'compare' => '=',
+				),
+			);
+		} else {
+			$sync_status_query = array(
+				array(
+					'key'     => 'sync_status',
+					'value'   => sanitize_text_field( $request['sync_status'] ),
+					'compare' => '=',
+				),
+			);
+		}
+
+		if ( isset( $args['meta_query'] ) && is_array( $args['meta_query'] ) ) {
+			array_push( $args['meta_query'], $sync_status_query );
+		} else {
+			$args['meta_query'] = $sync_status_query;
+		}
+	}
+
+	return $args;
+}
+add_filter( 'rest_wp_block_query', 'gutenberg_rest_wp_block_query', 10, 2 );

packages/edit-site/src/components/page-patterns/pagination.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useLayoutEffect,
+	useEffect,
+	useRef,
+	useState,
+	startTransition,
+} from '@wordpress/element';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
+
+export default function PatternsPagination( {
+	patterns,
+	page,
+	setPage,
+	getTotalPages,
+} ) {
+	const [ totalPages, setTotalPages ] = useState( page );
+	const getTotalPagesRef = useRef( getTotalPages );
+	useLayoutEffect( () => {
+		getTotalPagesRef.current = getTotalPages;
+	} );
+
+	// Refetch total pages when `patterns` changes.
+	// This is not a good indicator of when to refetch the total pages,
+	// but the only one we have for now.
+	useEffect( () => {
+		const abortController = new AbortController();
+		const signal = abortController.signal;
+		getTotalPagesRef
+			.current( { signal } )
+			.then( ( pages ) => setTotalPages( pages ) )
+			.catch( () => setTotalPages( 1 ) );
+		return () => {
+			abortController.abort();
+		};
+	}, [ patterns ] );
+
+	const pages = Array.from(
+		{ length: totalPages },
+		( _, index ) => index + 1
+	);
+
+	return (
+		<HStack spacing={ 2 } alignment="center">
+			{ pages.map( ( p ) =>
+				p === page ? (
+					<u aria-current="page" key={ p }>
+						{ p }
+					</u>
+				) : (
+					<Button
+						key={ p }
+						variant="link"
+						onClick={ () => {
+							startTransition( () => {
+								setPage( p );
+							} );
+						} }
+					>
+						{ p }
+					</Button>
+				)
+			) }
+		</HStack>
+	);
+}

packages/edit-site/src/components/page-patterns/patterns-list.js

@@ -22,6 +22,7 @@ import PatternsHeader from './header';
 import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
+import PatternsPagination from './pagination';
 import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
@@ -39,17 +40,25 @@ export default function PatternsList( { categoryId, type } ) {
 	const location = useLocation();
 	const history = useHistory();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ page, setPage ] = useState( 1 );
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( '' );
 	const deferredFilterValue = useDeferredValue( delayedFilterValue );
-
 	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
-	const { patterns, isResolving } = usePatterns( type, categoryId, {
-		search: deferredFilterValue,
-		syncStatus:
-			deferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,
-	} );
+
+	const { patterns, isResolving, getTotalPages } = usePatterns(
+		type,
+		categoryId,
+		{
+			search: deferredFilterValue,
+			page,
+			syncStatus:
+				deferredSyncedFilter === 'all'
+					? undefined
+					: deferredSyncedFilter,
+		}
+	);
 
 	const id = useId();
 	const titleId = `${ id }-title`;
@@ -85,7 +94,10 @@ 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 ) => {
+							setFilterValue( value );
+							setPage( 1 );
+						} }
 						placeholder={ __( 'Search patterns' ) }
 						label={ __( 'Search patterns' ) }
 						value={ filterValue }
@@ -99,7 +111,10 @@ export default function PatternsList( { categoryId, type } ) {
 						label={ __( 'Filter by sync status' ) }
 						value={ syncFilter }
 						isBlock
-						onChange={ ( value ) => setSyncFilter( value ) }
+						onChange={ ( value ) => {
+							setSyncFilter( value );
+							setPage( 1 );
+						} }
 						__nextHasNoMarginBottom
 					>
 						{ Object.entries( SYNC_FILTERS ).map(
@@ -117,12 +132,20 @@ export default function PatternsList( { categoryId, type } ) {
 			</Flex>
 
 			{ hasPatterns && (
-				<Grid
-					categoryId={ categoryId }
-					items={ patterns }
-					aria-labelledby={ titleId }
-					aria-describedby={ descriptionId }
-				/>
+				<>
+					<Grid
+						categoryId={ categoryId }
+						items={ patterns }
+						aria-labelledby={ titleId }
+						aria-describedby={ descriptionId }
+					/>
+					<PatternsPagination
+						page={ page }
+						setPage={ setPage }
+						patterns={ patterns }
+						getTotalPages={ getTotalPages }
+					/>
+				</>
 			) }
 			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
 		</VStack>