@wordpress/edit-site 5.14.0 → 5.16.0

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

@@ -8,86 +8,103 @@ import classnames from 'classnames';
  */
 import { BlockPreview } from '@wordpress/block-editor';
 import {
+	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
 	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,
+	symbolFilled as uncategorized,
+	symbol,
 	moreHorizontal,
 	lockSmall,
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import { PATTERNS, USER_PATTERNS } from './utils';
+import RenameMenuItem from './rename-menu-item';
+import DuplicateMenuItem from './duplicate-menu-item';
+import { PATTERNS, TEMPLATE_PARTS, USER_PATTERNS, SYNC_TYPES } from './utils';
+import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 
-const THEME_PATTERN_TOOLTIP = __( 'Theme patterns cannot be edited.' );
+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 );
 
+	const { removeTemplate } = useDispatch( editSiteStore );
 	const { __experimentalDeleteReusableBlock } =
 		useDispatch( reusableBlocksStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
+	const isUserPattern = item.type === USER_PATTERNS;
+	const isNonUserPattern = item.type === PATTERNS;
+	const isTemplatePart = item.type === TEMPLATE_PARTS;
+
 	const { onClick } = useLink( {
 		postType: item.type,
-		postId: item.type === USER_PATTERNS ? item.id : item.name,
+		postId: isUserPattern ? item.id : item.name,
 		categoryId,
 		categoryType: item.type,
 	} );
 
-	const onKeyDown = ( event ) => {
-		if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) {
-			setIsDeleteDialogOpen( true );
-		}
-	};
-
 	const isEmpty = ! item.blocks?.length;
 	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
 		'is-placeholder': isEmpty,
 	} );
 	const previewClassNames = classnames( 'edit-site-patterns__preview', {
-		'is-inactive': item.type === PATTERNS,
+		'is-inactive': isNonUserPattern,
 	} );
 
 	const deletePattern = async () => {
 		try {
 			await __experimentalDeleteReusableBlock( item.id );
-			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The pattern's title e.g. 'Call to action'.
+					__( '"%s" deleted.' ),
+					item.title
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
 					: __( 'An error occurred while deleting the pattern.' );
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
 		}
 	};
+	const deleteItem = () =>
+		isTemplatePart ? removeTemplate( item ) : deletePattern();
 
-	const isUserPattern = item.type === USER_PATTERNS;
+	// Only custom patterns or custom template parts can be renamed or deleted.
+	const isCustomPattern =
+		isUserPattern || ( isTemplatePart && item.isCustom );
+	const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
 	const ariaDescriptions = [];
-	if ( isUserPattern ) {
+
+	if ( isCustomPattern ) {
 		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
 		ariaDescriptions.push(
 			__( 'Press Enter to edit, or Delete to delete the pattern.' )
@@ -95,134 +112,173 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 	} else if ( item.description ) {
 		ariaDescriptions.push( item.description );
 	}
-	if ( item.type === PATTERNS ) {
-		ariaDescriptions.push( THEME_PATTERN_TOOLTIP );
-	}
 
-	let itemIcon = icon;
-	if ( categoryId === 'header' ) {
-		itemIcon = header;
-	} else if ( categoryId === 'footer' ) {
-		itemIcon = footer;
-	} else if ( categoryId === 'uncategorized' ) {
-		itemIcon = symbolFilled;
+	if ( isNonUserPattern ) {
+		ariaDescriptions.push(
+			__( 'Theme & plugin patterns cannot be edited.' )
+		);
 	}
 
+	const itemIcon =
+		templatePartIcons[ categoryId ] ||
+		( item.syncStatus === SYNC_TYPES.full ? symbol : undefined );
+
+	const confirmButtonText = hasThemeFile ? __( 'Clear' ) : __( 'Delete' );
+	const confirmPrompt = hasThemeFile
+		? __( 'Are you sure you want to clear these customizations?' )
+		: sprintf(
+				// translators: %s: The pattern or template part's title e.g. 'Call to action'.
+				__( 'Are you sure you want to delete "%s"?' ),
+				item.title
+		  );
+
 	return (
-		<>
-			<div className={ patternClassNames }>
-				<CompositeItem
-					className={ previewClassNames }
-					role="option"
-					as="div"
-					{ ...composite }
-					onClick={ item.type !== PATTERNS ? onClick : undefined }
-					onKeyDown={ isUserPattern ? onKeyDown : undefined }
-					aria-label={ item.title }
-					aria-describedby={
-						ariaDescriptions.length
-							? ariaDescriptions
-									.map(
-										( _, index ) =>
-											`${ descriptionId }-${ index }`
-									)
-									.join( ' ' )
-							: undefined
-					}
+		<li className={ patternClassNames }>
+			<button
+				className={ previewClassNames }
+				// 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 }
+				aria-disabled={ item.type !== PATTERNS ? 'false' : 'true' }
+				aria-label={ item.title }
+				aria-describedby={
+					ariaDescriptions.length
+						? ariaDescriptions
+								.map(
+									( _, index ) =>
+										`${ descriptionId }-${ index }`
+								)
+								.join( ' ' )
+						: undefined
+				}
+			>
+				{ isEmpty && __( 'Empty pattern' ) }
+				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+			</button>
+			{ ariaDescriptions.map( ( ariaDescription, index ) => (
+				<div
+					key={ index }
+					hidden
+					id={ `${ descriptionId }-${ index }` }
 				>
-					{ isEmpty && __( 'Empty pattern' ) }
-					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-				</CompositeItem>
-				{ ariaDescriptions.map( ( ariaDescription, index ) => (
-					<div
-						key={ index }
-						hidden
-						id={ `${ descriptionId }-${ index }` }
-					>
-						{ ariaDescription }
-					</div>
-				) ) }
+					{ ariaDescription }
+				</div>
+			) ) }
+			<HStack
+				className="edit-site-patterns__footer"
+				justify="space-between"
+			>
 				<HStack
-					aria-hidden="true"
-					className="edit-site-patterns__footer"
-					justify="space-between"
+					alignment="center"
+					justify="left"
+					spacing={ 3 }
+					className="edit-site-patterns__pattern-title"
 				>
-					<HStack
-						alignment="center"
-						justify="left"
-						spacing={ 3 }
-						className="edit-site-patterns__pattern-title"
-					>
-						{ icon && (
-							<Icon
-								className="edit-site-patterns__pattern-icon"
-								icon={ itemIcon }
-							/>
-						) }
-						<Flex as="span" gap={ 0 } justify="left">
-							{ item.title }
-							{ item.type === PATTERNS && (
-								<Tooltip
-									position="top center"
-									text={ __(
-										'Theme patterns cannot be edited.'
-									) }
-								>
-									<span className="edit-site-patterns__pattern-lock-icon">
-										<Icon
-											style={ { fill: 'currentcolor' } }
-											icon={ lockSmall }
-											size={ 24 }
-										/>
-									</span>
-								</Tooltip>
+					{ itemIcon && ! isNonUserPattern && (
+						<Tooltip
+							position="top center"
+							text={ __(
+								'Editing this pattern will also update anywhere it is used'
 							) }
-						</Flex>
-					</HStack>
-					{ item.type === USER_PATTERNS && (
-						<DropdownMenu
-							icon={ moreHorizontal }
-							label={ __( 'Actions' ) }
-							className="edit-site-patterns__dropdown"
-							popoverProps={ { placement: 'bottom-end' } }
-							toggleProps={ {
-								className: 'edit-site-patterns__button',
-								isSmall: true,
-								describedBy: sprintf(
-									/* translators: %s: pattern name */
-									__( 'Action menu for %s pattern' ),
-									item.title
-								),
-								// The dropdown menu is not focusable using the
-								// keyboard as this would interfere with the grid's
-								// roving tab index system. Instead, keyboard users
-								// use keyboard shortcuts to trigger actions.
-								tabIndex: -1,
-							} }
 						>
-							{ () => (
-								<MenuGroup>
-									<MenuItem
-										onClick={ () =>
-											setIsDeleteDialogOpen( true )
-										}
-									>
-										{ __( 'Delete' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</DropdownMenu>
+							<span>
+								<Icon
+									className="edit-site-patterns__pattern-icon"
+									icon={ itemIcon }
+								/>
+							</span>
+						</Tooltip>
 					) }
+					<Flex as="span" gap={ 0 } justify="left">
+						{ item.type === PATTERNS ? (
+							item.title
+						) : (
+							<Heading level={ 5 }>
+								<Button
+									variant="link"
+									onClick={ onClick }
+									// Required for the grid's roving tab index system.
+									// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+									tabIndex="-1"
+								>
+									{ item.title }
+								</Button>
+							</Heading>
+						) }
+						{ item.type === PATTERNS && (
+							<Tooltip
+								position="top center"
+								text={ __( 'This pattern cannot be edited.' ) }
+							>
+								<span className="edit-site-patterns__pattern-lock-icon">
+									<Icon icon={ lockSmall } size={ 24 } />
+								</span>
+							</Tooltip>
+						) }
+					</Flex>
 				</HStack>
-			</div>
+				<DropdownMenu
+					icon={ moreHorizontal }
+					label={ __( 'Actions' ) }
+					className="edit-site-patterns__dropdown"
+					popoverProps={ { placement: 'bottom-end' } }
+					toggleProps={ {
+						className: 'edit-site-patterns__button',
+						isSmall: true,
+						describedBy: sprintf(
+							/* translators: %s: pattern name */
+							__( 'Action menu for %s pattern' ),
+							item.title
+						),
+					} }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ isCustomPattern && ! hasThemeFile && (
+								<RenameMenuItem
+									item={ item }
+									onClose={ onClose }
+								/>
+							) }
+							<DuplicateMenuItem
+								categoryId={ categoryId }
+								item={ item }
+								onClose={ onClose }
+								label={
+									isNonUserPattern
+										? __( 'Copy to My patterns' )
+										: __( 'Duplicate' )
+								}
+							/>
+							{ isCustomPattern && (
+								<MenuItem
+									onClick={ () =>
+										setIsDeleteDialogOpen( true )
+									}
+								>
+									{ hasThemeFile
+										? __( 'Clear customizations' )
+										: __( 'Delete' ) }
+								</MenuItem>
+							) }
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			</HStack>
+
 			{ isDeleteDialogOpen && (
 				<ConfirmDialog
-					onConfirm={ deletePattern }
+					confirmButtonText={ confirmButtonText }
+					onConfirm={ deleteItem }
 					onCancel={ () => setIsDeleteDialogOpen( false ) }
 				>
-					{ __( 'Are you sure you want to delete this pattern?' ) }
+					{ confirmPrompt }
 				</ConfirmDialog>
 			) }
-		</>
+		</li>
 	);
 }
+
+export default memo( GridItem );

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

@@ -1,39 +1,22 @@
-/**
- * WordPress dependencies
- */
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
 import GridItem from './grid-item';
 
-export default function Grid( { categoryId, label, icon, items } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
-
+export default function Grid( { categoryId, items, ...props } ) {
 	if ( ! items?.length ) {
 		return null;
 	}
 
 	return (
-		<Composite
-			{ ...composite }
-			role="listbox"
-			className="edit-site-patterns__grid"
-			aria-label={ label }
-		>
+		<ul role="listbox" className="edit-site-patterns__grid" { ...props }>
 			{ items.map( ( item ) => (
 				<GridItem
 					key={ item.name }
-					icon={ icon }
 					item={ item }
 					categoryId={ categoryId }
-					composite={ composite }
 				/>
 			) ) }
-		</Composite>
+		</ul>
 	);
 }

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/pagination.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+
+export default function Pagination( {
+	currentPage,
+	numPages,
+	changePage,
+	totalItems,
+} ) {
+	return (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			justify="flex-start"
+			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>
+	);
+}