Try patterns server side pagination

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/grid-item.js

@@ -18,13 +18,14 @@ import {
 	Flex,
 } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
-import { useState, useId } from '@wordpress/element';
+import { useState, useId, memo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	Icon,
 	header,
 	footer,
 	symbolFilled as uncategorized,
+	symbol,
 	moreHorizontal,
 	lockSmall,
 } from '@wordpress/icons';
@@ -37,13 +38,13 @@ import { DELETE, BACKSPACE } from '@wordpress/keycodes';
  */
 import RenameMenuItem from './rename-menu-item';
 import DuplicateMenuItem from './duplicate-menu-item';
-import { PATTERNS, TEMPLATE_PARTS, USER_PATTERNS } from './utils';
+import { PATTERNS, TEMPLATE_PARTS, USER_PATTERNS, SYNC_TYPES } from './utils';
 import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 
 const templatePartIcons = { header, footer, uncategorized };
 
-export default function GridItem( { categoryId, composite, icon, item } ) {
+function GridItem( { categoryId, item, ...props } ) {
 	const descriptionId = useId();
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 
@@ -122,9 +123,9 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		ariaDescriptions.push( __( 'Theme patterns cannot be edited.' ) );
 	}
 
-	const itemIcon = templatePartIcons[ categoryId ]
-		? templatePartIcons[ categoryId ]
-		: icon;
+	const itemIcon =
+		templatePartIcons[ categoryId ] ||
+		( item.syncStatus === SYNC_TYPES.full ? symbol : undefined );
 
 	const confirmButtonText = hasThemeFile ? __( 'Clear' ) : __( 'Delete' );
 	const confirmPrompt = hasThemeFile
@@ -142,7 +143,10 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					className={ previewClassNames }
 					role="option"
 					as="div"
-					{ ...composite }
+					// Even though still incomplete, passing ids helps performance.
+					// @see https://reakit.io/docs/composite/#performance.
+					id={ `edit-site-patterns-${ item.name }` }
+					{ ...props }
 					onClick={ item.type !== PATTERNS ? onClick : undefined }
 					onKeyDown={ isCustomPattern ? onKeyDown : undefined }
 					aria-label={ item.title }
@@ -180,7 +184,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 						spacing={ 3 }
 						className="edit-site-patterns__pattern-title"
 					>
-						{ icon && (
+						{ itemIcon && (
 							<Icon
 								className="edit-site-patterns__pattern-icon"
 								icon={ itemIcon }
@@ -268,3 +272,5 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		</>
 	);
 }
+
+export default memo( GridItem );

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

@@ -4,36 +4,56 @@
 import {
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
+	__experimentalText as Text,
 } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import GridItem from './grid-item';
 
-export default function Grid( { categoryId, label, icon, items } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
+const PAGE_SIZE = 100;
+
+export default function Grid( { categoryId, items, ...props } ) {
+	const composite = useCompositeState( { wrap: true } );
+	const gridRef = useRef();
 
 	if ( ! items?.length ) {
 		return null;
 	}
 
+	const list = items.slice( 0, PAGE_SIZE );
+	const restLength = items.length - PAGE_SIZE;
+
 	return (
-		<Composite
-			{ ...composite }
-			role="listbox"
-			className="edit-site-patterns__grid"
-			aria-label={ label }
-		>
-			{ items.map( ( item ) => (
-				<GridItem
-					key={ item.name }
-					icon={ icon }
-					item={ item }
-					categoryId={ categoryId }
-					composite={ composite }
-				/>
-			) ) }
-		</Composite>
+		<>
+			<Composite
+				{ ...composite }
+				role="listbox"
+				className="edit-site-patterns__grid"
+				{ ...props }
+				ref={ gridRef }
+			>
+				{ list.map( ( item ) => (
+					<GridItem
+						key={ item.name }
+						item={ item }
+						categoryId={ categoryId }
+						{ ...composite }
+					/>
+				) ) }
+			</Composite>
+			{ restLength > 0 && (
+				<Text variant="muted" as="p" align="center">
+					{ sprintf(
+						/* translators: %d: number of patterns */
+						__( '+ %d more patterns' ),
+						restLength
+					) }
+				</Text>
+			) }
+		</>
 	);
 }

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

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+import {
+	USER_PATTERN_CATEGORY,
+	USER_PATTERNS,
+	TEMPLATE_PARTS,
+	PATTERNS,
+} from './utils';
+
+export default function PatternsHeader( {
+	categoryId,
+	type,
+	titleId,
+	descriptionId,
+} ) {
+	const { patternCategories } = usePatternCategories();
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
+
+	let title, description;
+	if ( categoryId === USER_PATTERN_CATEGORY && type === USER_PATTERNS ) {
+		title = __( 'My Patterns' );
+		description = __( 'Patterns that are kept in sync across your site.' ); // TODO
+	} else if ( type === TEMPLATE_PARTS ) {
+		const templatePartArea = templatePartAreas.find(
+			( area ) => area.area === categoryId
+		);
+		title = templatePartArea?.label;
+		description = templatePartArea?.description;
+	} else if ( type === PATTERNS ) {
+		const patternCategory = patternCategories.find(
+			( category ) => category.name === categoryId
+		);
+		title = patternCategory?.label;
+		description = patternCategory?.description;
+	}
+
+	if ( ! title ) return null;
+
+	return (
+		<VStack className="edit-site-patterns__section-header">
+			<Heading as="h2" level={ 4 } id={ titleId }>
+				{ title }
+			</Heading>
+			{ description ? (
+				<Text variant="muted" as="p" id={ descriptionId }>
+					{ description }
+				</Text>
+			) : null }
+		</VStack>
+	);
+}

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

@@ -32,7 +32,12 @@ export default function PagePatterns() {
 				title={ __( 'Patterns content' ) }
 				hideTitleFromUI
 			>
-				<PatternsList type={ type } categoryId={ category } />
+				<PatternsList
+					// Reset the states when switching between categories and types.
+					key={ `${ type }-${ category }` }
+					type={ type }
+					categoryId={ category }
+				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>
 	);

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>
+	);
+}