@wordpress/edit-site 5.12.7 → 5.12.9

package/src/components/page-patterns/grid.js

@@ -2,38 +2,136 @@
  * WordPress dependencies
  */
 import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
 } from '@wordpress/components';
+import { useRef, useState, useMemo } from '@wordpress/element';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import GridItem from './grid-item';
 
-export default function Grid( { categoryId, label, icon, items } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
+const PAGE_SIZE = 20;
 
-	if ( ! items?.length ) {
+function Pagination( { currentPage, numPages, changePage, totalItems } ) {
+	return (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			className="edit-site-patterns__grid-pagination"
+		>
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of patterns.
+					sprintf(
+						// translators: %s: Total number of patterns.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( 1 ) }
+					disabled={ currentPage === 1 }
+					aria-label={ __( 'First page' ) }
+				>
+					«
+				</Button>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( currentPage - 1 ) }
+					disabled={ currentPage === 1 }
+					aria-label={ __( 'Previous page' ) }
+				>
+					‹
+				</Button>
+			</HStack>
+			<Text variant="muted">
+				{ sprintf(
+					// translators: %1$s: Current page number, %2$s: Total number of pages.
+					_x( '%1$s of %2$s', 'paging' ),
+					currentPage,
+					numPages
+				) }
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( currentPage + 1 ) }
+					disabled={ currentPage === numPages }
+					aria-label={ __( 'Next page' ) }
+				>
+					›
+				</Button>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( numPages ) }
+					disabled={ currentPage === numPages }
+					aria-label={ __( 'Last page' ) }
+				>
+					»
+				</Button>
+			</HStack>
+		</HStack>
+	);
+}
+
+export default function Grid( { categoryId, items, ...props } ) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const gridRef = useRef();
+	const totalItems = items.length;
+	const pageIndex = currentPage - 1;
+
+	const list = useMemo(
+		() =>
+			items.slice(
+				pageIndex * PAGE_SIZE,
+				pageIndex * PAGE_SIZE + PAGE_SIZE
+			),
+		[ pageIndex, items ]
+	);
+
+	const asyncList = useAsyncList( list, { step: 10 } );
+
+	if ( ! list?.length ) {
 		return null;
 	}
 
+	const numPages = Math.ceil( items.length / PAGE_SIZE );
+	const changePage = ( page ) => {
+		const scrollContainer = document.querySelector( '.edit-site-patterns' );
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
+
 	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 }
+		<>
+			<ul
+				role="listbox"
+				className="edit-site-patterns__grid"
+				{ ...props }
+				ref={ gridRef }
+			>
+				{ asyncList.map( ( item ) => (
+					<GridItem
+						key={ item.name }
+						item={ item }
+						categoryId={ categoryId }
+					/>
+				) ) }
+			</ul>
+			{ numPages > 1 && (
+				<Pagination
+					{ ...{ currentPage, numPages, changePage, totalItems } }
 				/>
-			) ) }
-		</Composite>
+			) }
+		</>
 	);
 }

package/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 = '';
+	} 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>
+	);
+}

package/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>
 	);

package/src/components/page-patterns/patterns-list.js

@@ -1,51 +1,86 @@
 /**
  * WordPress dependencies
  */
-
+import { useState, useDeferredValue, useId } from '@wordpress/element';
 import {
 	SearchControl,
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
 	__experimentalVStack as VStack,
 	Flex,
 	FlexBlock,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
-import { symbol, chevronLeft, chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import PatternsHeader from './header';
 import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from './utils';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
+const SYNC_FILTERS = {
+	all: __( 'All' ),
+	[ SYNC_TYPES.full ]: __( 'Synced' ),
+	[ SYNC_TYPES.unsynced ]: __( 'Standard' ),
+};
+
+const SYNC_DESCRIPTIONS = {
+	all: '',
+	[ SYNC_TYPES.full ]: __(
+		'Patterns that are kept in sync across the site.'
+	),
+	[ SYNC_TYPES.unsynced ]: __(
+		'Patterns that can be changed freely without affecting the site.'
+	),
+};
+
 export default function PatternsList( { categoryId, type } ) {
 	const location = useLocation();
 	const history = useHistory();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( '' );
+	const deferredFilterValue = useDeferredValue( delayedFilterValue );
 
-	const [ patterns, isResolving ] = usePatterns(
-		type,
-		categoryId,
-		delayedFilterValue
-	);
+	const [ syncFilter, setSyncFilter ] = useState( 'all' );
+	const deferredSyncedFilter = useDeferredValue( syncFilter );
+	const { patterns, isResolving } = usePatterns( type, categoryId, {
+		search: deferredFilterValue,
+		syncStatus:
+			deferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,
+	} );
 
-	const { syncedPatterns, unsyncedPatterns } = patterns;
-	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
+	const id = useId();
+	const titleId = `${ id }-title`;
+	const descriptionId = `${ id }-description`;
+
+	const hasPatterns = patterns.length;
+	const title = SYNC_FILTERS[ syncFilter ];
+	const description = SYNC_DESCRIPTIONS[ syncFilter ];
 
 	return (
 		<VStack spacing={ 6 }>
-			<Flex>
+			<PatternsHeader
+				categoryId={ categoryId }
+				type={ type }
+				titleId={ titleId }
+				descriptionId={ descriptionId }
+			/>
+
+			<Flex alignment="stretch" wrap>
 				{ isMobileViewport && (
 					<SidebarButton
 						icon={ isRTL() ? chevronRight : chevronLeft }
@@ -61,7 +96,7 @@ export default function PatternsList( { categoryId, type } ) {
 						} }
 					/>
 				) }
-				<FlexBlock>
+				<FlexBlock className="edit-site-patterns__search-block">
 					<SearchControl
 						className="edit-site-patterns__search"
 						onChange={ ( value ) => setFilterValue( value ) }
@@ -71,42 +106,48 @@ export default function PatternsList( { categoryId, type } ) {
 						__nextHasNoMarginBottom
 					/>
 				</FlexBlock>
+				{ categoryId === USER_PATTERN_CATEGORY && (
+					<ToggleGroupControl
+						className="edit-site-patterns__sync-status-filter"
+						hideLabelFromVision
+						label={ __( 'Filter by sync status' ) }
+						value={ syncFilter }
+						isBlock
+						onChange={ ( value ) => setSyncFilter( value ) }
+						__nextHasNoMarginBottom
+					>
+						{ Object.entries( SYNC_FILTERS ).map(
+							( [ key, label ] ) => (
+								<ToggleGroupControlOption
+									className="edit-site-patterns__sync-status-filter-option"
+									key={ key }
+									value={ key }
+									label={ label }
+								/>
+							)
+						) }
+					</ToggleGroupControl>
+				) }
 			</Flex>
-			{ isResolving && __( 'Loading' ) }
-			{ ! isResolving && !! syncedPatterns.length && (
-				<>
-					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
-						<Text variant="muted" as="p">
-							{ __(
-								'Patterns that are kept in sync across the site'
-							) }
+			{ syncFilter !== 'all' && (
+				<VStack className="edit-site-patterns__section-header">
+					<Heading as="h3" level={ 5 } id={ titleId }>
+						{ title }
+					</Heading>
+					{ description ? (
+						<Text variant="muted" as="p" id={ descriptionId }>
+							{ description }
 						</Text>
-					</VStack>
-					<Grid
-						icon={ symbol }
-						categoryId={ categoryId }
-						label={ __( 'Synced' ) }
-						items={ syncedPatterns }
-					/>
-				</>
+					) : null }
+				</VStack>
 			) }
-			{ ! isResolving && !! unsyncedPatterns.length && (
-				<>
-					<VStack className="edit-site-patterns__section-header">
-						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
-						<Text variant="muted" as="p">
-							{ __(
-								'Patterns that can be changed freely without affecting the site'
-							) }
-						</Text>
-					</VStack>
-					<Grid
-						categoryId={ categoryId }
-						label={ __( 'Standard patterns' ) }
-						items={ unsyncedPatterns }
-					/>
-				</>
+			{ hasPatterns && (
+				<Grid
+					categoryId={ categoryId }
+					items={ patterns }
+					aria-labelledby={ titleId }
+					aria-describedby={ descriptionId }
+				/>
 			) }
 			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
 		</VStack>

package/src/components/page-patterns/rename-menu-item.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	MenuItem,
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PARTS } from './utils';
+
+export default function RenameMenuItem( { item, onClose } ) {
+	const [ title, setTitle ] = useState( () => item.title );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	if ( item.type === TEMPLATE_PARTS && ! item.isCustom ) {
+		return null;
+	}
+
+	async function onRename( event ) {
+		event.preventDefault();
+
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, { title } );
+
+			// Update state before saving rerenders the list.
+			setTitle( '' );
+			setIsModalOpen( false );
+			onClose();
+
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+
+			createSuccessNotice( __( 'Entity renamed.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while renaming the entity.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setIsModalOpen( true );
+					setTitle( item.title );
+				} }
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Rename' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+						onClose();
+					} }
+					overlayClassName="edit-site-list__rename_modal"
+				>
+					<form onSubmit={ onRename }>
+						<VStack spacing="5">
+							<TextControl
+								__nextHasNoMarginBottom
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								required
+							/>
+
+							<HStack justify="right">
+								<Button
+									variant="tertiary"
+									onClick={ () => {
+										setIsModalOpen( false );
+										onClose();
+									} }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+
+								<Button variant="primary" type="submit">
+									{ __( 'Save' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}