Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try patterns server side pagination #52396

Closed
wants to merge 15 commits into from
47 changes: 47 additions & 0 deletions lib/compat/wordpress-6.3/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This patch adds the ability to pass sync_status query parameter to the /wp/v2/blocks api. Allowed values for now are fully and unsynced.

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 );
22 changes: 14 additions & 8 deletions packages/edit-site/src/components/page-patterns/grid-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 );

Expand Down Expand Up @@ -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
Expand All @@ -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 }
Expand Down Expand Up @@ -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 }
Expand Down Expand Up @@ -268,3 +272,5 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
</>
);
}

export default memo( GridItem );
56 changes: 38 additions & 18 deletions packages/edit-site/src/components/page-patterns/grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
) }
</>
);
}
69 changes: 69 additions & 0 deletions packages/edit-site/src/components/page-patterns/header.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/page-patterns/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
68 changes: 68 additions & 0 deletions packages/edit-site/src/components/page-patterns/pagination.js
Original file line number Diff line number Diff line change
@@ -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( () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not fine-tuned. It currently will fire a lot of requests since we're not sure when to fetch this info. A more elegant solution will be baking this into getEntityRecords somehow. The REST API already supports this by returning the X-Wp-Totalpages response header. However, getEntityRecords (and apiFetch under the hood) doesn't support it yet. It might require multiple levels of coordination across different packages to implement this though.

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">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to revisit the styling and accessibility 😅.

{ 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>
);
}
Loading