@wordpress/edit-site 5.13.0 → 5.15.0

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

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PARTS,
+	PATTERNS,
+	SYNC_TYPES,
+	USER_PATTERNS,
+	USER_PATTERN_CATEGORY,
+} from './utils';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function getPatternMeta( item ) {
+	if ( item.type === PATTERNS ) {
+		return { wp_pattern_sync_status: SYNC_TYPES.unsynced };
+	}
+
+	const syncStatus = item.reusableBlock.wp_pattern_sync_status;
+	const isUnsynced = syncStatus === SYNC_TYPES.unsynced;
+
+	return {
+		...item.reusableBlock.meta,
+		wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
+	};
+}
+
+export default function DuplicateMenuItem( {
+	categoryId,
+	item,
+	label = __( 'Duplicate' ),
+	onClose,
+} ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const history = useHistory();
+	const existingTemplateParts = useExistingTemplateParts();
+
+	async function createTemplatePart() {
+		try {
+			const copiedTitle = sprintf(
+				/* translators: %s: Existing template part title */
+				__( '%s (Copy)' ),
+				item.title
+			);
+			const title = getUniqueTemplatePartTitle(
+				copiedTitle,
+				existingTemplateParts
+			);
+			const slug = getCleanTemplatePartSlug( title );
+			const { area, content } = item.templatePart;
+
+			const result = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{ slug, title, content, area },
+				{ throwOnError: true }
+			);
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" created.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-patterns-success',
+					actions: [
+						{
+							label: __( 'Edit' ),
+							onClick: () =>
+								history.push( {
+									postType: TEMPLATE_PARTS,
+									postId: result?.id,
+									categoryType: TEMPLATE_PARTS,
+									categoryId,
+								} ),
+						},
+					],
+				}
+			);
+
+			onClose();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+			onClose();
+		}
+	}
+
+	async function createPattern() {
+		try {
+			const isThemePattern = item.type === PATTERNS;
+			const title = sprintf(
+				/* translators: %s: Existing pattern title */
+				__( '%s (Copy)' ),
+				item.title
+			);
+
+			const result = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					content: isThemePattern
+						? item.content
+						: item.reusableBlock.content,
+					meta: getPatternMeta( item ),
+					status: 'publish',
+					title,
+				},
+				{ throwOnError: true }
+			);
+
+			const actionLabel = isThemePattern
+				? __( 'View my patterns' )
+				: __( 'Edit' );
+
+			const newLocation = isThemePattern
+				? {
+						categoryType: USER_PATTERNS,
+						categoryId: USER_PATTERN_CATEGORY,
+						path: '/patterns',
+				  }
+				: {
+						categoryType: USER_PATTERNS,
+						categoryId: USER_PATTERN_CATEGORY,
+						postType: USER_PATTERNS,
+						postId: result?.id,
+				  };
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+					__( '"%s" added to my patterns.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-patterns-success',
+					actions: [
+						{
+							label: actionLabel,
+							onClick: () => history.push( newLocation ),
+						},
+					],
+				}
+			);
+
+			onClose();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+			onClose();
+		}
+	}
+
+	const createItem =
+		item.type === TEMPLATE_PARTS ? createTemplatePart : createPattern;
+
+	return <MenuItem onClick={ createItem }>{ label }</MenuItem>;
+}

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

@@ -0,0 +1,284 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+	Tooltip,
+	Flex,
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+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';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+
+/**
+ * Internal dependencies
+ */
+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 templatePartIcons = { header, footer, uncategorized };
+
+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: isUserPattern ? item.id : item.name,
+		categoryId,
+		categoryType: item.type,
+	} );
+
+	const isEmpty = ! item.blocks?.length;
+	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
+		'is-placeholder': isEmpty,
+	} );
+	const previewClassNames = classnames( 'edit-site-patterns__preview', {
+		'is-inactive': isNonUserPattern,
+	} );
+
+	const deletePattern = async () => {
+		try {
+			await __experimentalDeleteReusableBlock( item.id );
+			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',
+				id: 'edit-site-patterns-error',
+			} );
+		}
+	};
+	const deleteItem = () =>
+		isTemplatePart ? removeTemplate( item ) : deletePattern();
+
+	// 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 ( 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.' )
+		);
+	} else if ( item.description ) {
+		ariaDescriptions.push( item.description );
+	}
+
+	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 (
+		<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 }` }
+				>
+					{ ariaDescription }
+				</div>
+			) ) }
+			<HStack
+				className="edit-site-patterns__footer"
+				justify="space-between"
+			>
+				<HStack
+					alignment="center"
+					justify="left"
+					spacing={ 3 }
+					className="edit-site-patterns__pattern-title"
+				>
+					{ itemIcon && ! isNonUserPattern && (
+						<Tooltip
+							position="top center"
+							text={ __(
+								'Editing this pattern will also update anywhere it is used'
+							) }
+						>
+							<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>
+				<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
+					confirmButtonText={ confirmButtonText }
+					onConfirm={ deleteItem }
+					onCancel={ () => setIsDeleteDialogOpen( false ) }
+				>
+					{ confirmPrompt }
+				</ConfirmDialog>
+			) }
+		</li>
+	);
+}
+
+export default memo( GridItem );

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

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import GridItem from './grid-item';
+
+export default function Grid( { categoryId, items, ...props } ) {
+	if ( ! items?.length ) {
+		return null;
+	}
+
+	return (
+		<ul role="listbox" className="edit-site-patterns__grid" { ...props }>
+			{ items.map( ( item ) => (
+				<GridItem
+					key={ item.name }
+					item={ item }
+					categoryId={ categoryId }
+				/>
+			) ) }
+		</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-library → page-patterns}/index.js

@@ -11,16 +11,16 @@ import { getQueryArgs } from '@wordpress/url';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
 import Page from '../page';
 import PatternsList from './patterns-list';
-import useLibrarySettings from './use-library-settings';
+import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
-export default function PageLibrary() {
+export default function PagePatterns() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
 	const category = categoryId || DEFAULT_CATEGORY;
-	const settings = useLibrarySettings();
+	const settings = usePatternSettings();
 
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
@@ -28,11 +28,16 @@ export default function PageLibrary() {
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
-				className="edit-site-library"
-				title={ __( 'Library content' ) }
+				className="edit-site-patterns"
+				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-library → page-patterns}/no-patterns.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 export default function NoPatterns() {
 	return (
-		<div className="edit-site-library__no-results">
+		<div className="edit-site-patterns__no-results">
 			{ __( 'No patterns found.' ) }
 		</div>
 	);

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