@wordpress/edit-site 5.26.0 → 5.27.0

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

@@ -1,42 +1,420 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	__experimentalHStack as HStack,
+	Button,
+	Tooltip,
+	Flex,
+} from '@wordpress/components';
 import { getQueryArgs } from '@wordpress/url';
+import { __, _x } from '@wordpress/i18n';
+import {
+	useState,
+	useMemo,
+	useCallback,
+	useId,
+	useEffect,
+} from '@wordpress/element';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import {
+	DataViews,
+	sortByTextFields,
+	getPaginationResults,
+} from '@wordpress/dataviews';
+import {
+	Icon,
+	header,
+	footer,
+	symbolFilled as uncategorized,
+	symbol,
+	lockSmall,
+} from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { PATTERN_DEFAULT_CATEGORY, PATTERN_TYPES } from '../../utils/constants';
 import Page from '../page';
-import PatternsList from './patterns-list';
+import {
+	LAYOUT_GRID,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_SYNC_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+} from '../../utils/constants';
+import {
+	exportJSONaction,
+	renameAction,
+	resetAction,
+	deleteAction,
+	duplicatePatternAction,
+	duplicateTemplatePartAction,
+} from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
+import usePatterns from './use-patterns';
+import PatternsHeader from './header';
+import { useLink } from '../routes/link';
 
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
 
-export default function PagePatterns() {
-	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+const templatePartIcons = { header, footer, uncategorized };
+const EMPTY_ARRAY = [];
+const defaultConfigPerViewType = {
+	[ LAYOUT_GRID ]: {
+		mediaField: 'preview',
+		primaryField: 'title',
+	},
+};
+const DEFAULT_VIEW = {
+	type: LAYOUT_GRID,
+	search: '',
+	page: 1,
+	perPage: 20,
+	hiddenFields: [ 'sync-status' ],
+	layout: {
+		...defaultConfigPerViewType[ LAYOUT_GRID ],
+	},
+	filters: [],
+};
+
+const SYNC_FILTERS = [
+	{
+		value: PATTERN_SYNC_TYPES.full,
+		label: _x( 'Synced', 'Option that shows all synchronized patterns' ),
+		description: __( 'Patterns that are kept in sync across the site.' ),
+	},
+	{
+		value: PATTERN_SYNC_TYPES.unsynced,
+		label: _x(
+			'Not synced',
+			'Option that shows all patterns that are not synchronized'
+		),
+		description: __(
+			'Patterns that can be changed freely without affecting the site.'
+		),
+	},
+];
+
+function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
+	if ( item.type === PATTERN_TYPES.theme ) {
+		return children;
+	}
+	return (
+		<button
+			className="page-patterns-preview-field__button"
+			type="button"
+			onClick={ onClick }
+			aria-label={ item.title }
+			aria-describedby={ ariaDescribedBy }
+		>
+			{ children }
+		</button>
+	);
+}
+
+function Preview( { item, categoryId, viewType } ) {
+	const descriptionId = useId();
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const isEmpty = ! item.blocks?.length;
+	// Only custom patterns or custom template parts can be renamed or deleted.
+	const isCustomPattern =
+		isUserPattern || ( isTemplatePart && item.isCustom );
+	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 [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: isUserPattern ? item.id : item.name,
+		categoryId,
+		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+	} );
+
+	return (
+		<>
+			<div
+				className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
+				style={ { backgroundColor } }
+			>
+				<PreviewWrapper
+					item={ item }
+					onClick={ onClick }
+					ariaDescribedBy={
+						ariaDescriptions.length
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
+							: undefined
+					}
+				>
+					{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+					{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+				</PreviewWrapper>
+			</div>
+			{ ariaDescriptions.map( ( ariaDescription, index ) => (
+				<div
+					key={ index }
+					hidden
+					id={ `${ descriptionId }-${ index }` }
+				>
+					{ ariaDescription }
+				</div>
+			) ) }
+		</>
+	);
+}
+
+function Title( { item, categoryId } ) {
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	let itemIcon;
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: isUserPattern ? item.id : item.name,
+		categoryId,
+		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
+	} );
+	if ( ! isUserPattern && templatePartIcons[ categoryId ] ) {
+		itemIcon = templatePartIcons[ categoryId ];
+	} else {
+		itemIcon =
+			item.syncStatus === PATTERN_SYNC_TYPES.full ? symbol : undefined;
+	}
+	return (
+		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
+			{ itemIcon && ! isNonUserPattern && (
+				<Tooltip
+					placement="top"
+					text={ __(
+						'Editing this pattern will also update anywhere it is used'
+					) }
+				>
+					<Icon
+						className="edit-site-patterns__pattern-icon"
+						icon={ itemIcon }
+					/>
+				</Tooltip>
+			) }
+			{ item.type === PATTERN_TYPES.theme && (
+				<Tooltip
+					placement="top"
+					text={ __( 'This pattern cannot be edited.' ) }
+				>
+					<Icon
+						className="edit-site-patterns__pattern-lock-icon"
+						icon={ lockSmall }
+						size={ 24 }
+					/>
+				</Tooltip>
+			) }
+			<Flex
+				as="div"
+				gap={ 0 }
+				justify="left"
+				className="edit-site-patterns__pattern-title"
+			>
+				{ item.type === PATTERN_TYPES.theme ? (
+					item.title
+				) : (
+					<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 || item.name }
+					</Button>
+				) }
+			</Flex>
+		</HStack>
+	);
+}
+
+export default function DataviewsPatterns() {
+	const { categoryType, categoryId = PATTERN_DEFAULT_CATEGORY } =
+		getQueryArgs( window.location.href );
 	const type = categoryType || PATTERN_TYPES.theme;
-	const category = categoryId || PATTERN_DEFAULT_CATEGORY;
-	const settings = usePatternSettings();
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const isUncategorizedThemePatterns =
+		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
+	const previousCategoryId = usePrevious( categoryId );
+	const viewSyncStatus = view.filters?.find(
+		( { field } ) => field === 'sync-status'
+	)?.value;
+	const { patterns, isResolving } = usePatterns(
+		type,
+		isUncategorizedThemePatterns ? '' : categoryId,
+		{
+			search: view.search,
+			syncStatus: viewSyncStatus,
+		}
+	);
+	const fields = useMemo( () => {
+		const _fields = [
+			{
+				header: __( 'Preview' ),
+				id: 'preview',
+				render: ( { item } ) => (
+					<Preview
+						item={ item }
+						categoryId={ categoryId }
+						viewType={ view.type }
+					/>
+				),
+				enableSorting: false,
+				enableHiding: false,
+			},
+			{
+				header: __( 'Title' ),
+				id: 'title',
+				getValue: ( { item } ) => item.title,
+				render: ( { item } ) => (
+					<Title item={ item } categoryId={ categoryId } />
+				),
+				enableHiding: false,
+			},
+		];
+		if ( type === PATTERN_TYPES.theme ) {
+			_fields.push( {
+				header: __( 'Sync Status' ),
+				id: 'sync-status',
+				render: ( { item } ) => {
+					// User patterns can have their sync statuses checked directly.
+					// Non-user patterns are all unsynced for the time being.
+					return (
+						SYNC_FILTERS.find(
+							( { value } ) => value === item.syncStatus
+						)?.label ||
+						SYNC_FILTERS.find(
+							( { value } ) =>
+								value === PATTERN_SYNC_TYPES.unsynced
+						).label
+					);
+				},
+				type: ENUMERATION_TYPE,
+				elements: SYNC_FILTERS,
+				filterBy: {
+					operators: [ OPERATOR_IN ],
+				},
+				enableSorting: false,
+			} );
+		}
+		return _fields;
+	}, [ view.type, categoryId, type ] );
+	// Reset the page number when the category changes.
+	useEffect( () => {
+		if ( previousCategoryId !== categoryId ) {
+			setView( DEFAULT_VIEW );
+		}
+	}, [ categoryId, previousCategoryId ] );
+	const { data, paginationInfo } = useMemo( () => {
+		if ( ! patterns ) {
+			return {
+				data: EMPTY_ARRAY,
+				paginationInfo: { totalItems: 0, totalPages: 0 },
+			};
+		}
+		let filteredData = [ ...patterns ];
+		// Handle sorting.
+		if ( view.sort ) {
+			filteredData = sortByTextFields( {
+				data: filteredData,
+				view,
+				fields,
+				textFields: [ 'title', 'author' ],
+			} );
+		}
+		// Handle pagination.
+		return getPaginationResults( {
+			data: filteredData,
+			view,
+		} );
+	}, [ patterns, view, fields ] );
 
+	const actions = useMemo(
+		() => [
+			renameAction,
+			duplicatePatternAction,
+			duplicateTemplatePartAction,
+			exportJSONaction,
+			resetAction,
+			deleteAction,
+		],
+		[]
+	);
+	const onChangeView = useCallback(
+		( newView ) => {
+			if ( newView.type !== view.type ) {
+				newView = {
+					...newView,
+					layout: {
+						...defaultConfigPerViewType[ newView.type ],
+					},
+				};
+			}
+			setView( newView );
+		},
+		[ view.type, setView ]
+	);
+	const id = useId();
+	const settings = usePatternSettings();
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
 	// from the site editor store to the block editor store.
+	// TODO: check if I add the provider in every preview like in templates...
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
-				className="edit-site-patterns"
 				title={ __( 'Patterns content' ) }
+				className="edit-site-page-patterns-dataviews"
 				hideTitleFromUI
 			>
-				<PatternsList
-					// Reset the states when switching between categories and types.
-					key={ `${ type }-${ category }` }
+				<PatternsHeader
+					categoryId={ categoryId }
 					type={ type }
-					categoryId={ category }
+					titleId={ `${ id }-title` }
+					descriptionId={ `${ id }-description` }
+				/>
+				<DataViews
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					actions={ actions }
+					data={ data || EMPTY_ARRAY }
+					getItemId={ ( item ) => item.name }
+					isLoading={ isResolving }
+					view={ view }
+					onChangeView={ onChangeView }
+					deferredRendering={ true }
+					supportedLayouts={ [ LAYOUT_GRID ] }
 				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>

package/src/components/page-patterns/style.scss

@@ -1,10 +1,11 @@
 .edit-site-patterns {
+	background: #1e1e1e;
 	border-left: 1px solid $gray-800;
-	background: none;
 	margin: $header-height 0 0;
 	border-radius: 0;
 	padding: 0;
 	overflow-x: auto;
+	min-height: 100%;
 
 	.components-base-control {
 		width: 100%;
@@ -230,9 +231,33 @@
  */
 .edit-site-page-patterns-dataviews {
 	.page-patterns-preview-field {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		border-radius: 3px 3px 0 0;
+
 		&.is-viewtype-grid {
 			.block-editor-block-preview__container {
-				height: auto;
+				height: 100%;
+				border-radius: 3px 3px 0 0;
+			}
+		}
+
+		.page-patterns-preview-field__button {
+			box-shadow: none;
+			border: none;
+			padding: 0;
+			background-color: unset;
+			box-sizing: border-box;
+			cursor: pointer;
+			overflow: hidden;
+			height: 100%;
+			border-radius: 3px 3px 0 0;
+
+			&:focus-visible {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
 			}
 		}
 	}
@@ -254,6 +279,15 @@
 		top: 0;
 		z-index: 2;
 	}
+
+	.edit-site-patterns__pattern-title {
+		display: block;
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: inherit;
+	}
 }
 
 .dataviews-action-modal__duplicate-pattern {

package/src/components/{page-templates/template-actions.js → page-templates-template-parts/actions.js}

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { backup, trash } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { useMemo, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
@@ -19,6 +19,7 @@ import {
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import isTemplateRevertable from '../../utils/is-template-revertable';
 import isTemplateRemovable from '../../utils/is-template-removable';
@@ -32,39 +33,64 @@ export function useResetTemplateAction() {
 	return useMemo(
 		() => ( {
 			id: 'reset-template',
-			label: __( 'Reset template' ),
+			label: __( 'Reset' ),
 			isPrimary: true,
 			icon: backup,
 			isEligible: isTemplateRevertable,
-			async callback( template ) {
+			supportsBulk: true,
+			async callback( templates ) {
 				try {
-					await revertTemplate( template, { allowUndo: false } );
-					await saveEditedEntityRecord(
-						'postType',
-						template.type,
-						template.id
-					);
+					for ( const template of templates ) {
+						await revertTemplate( template, {
+							allowUndo: false,
+						} );
+						await saveEditedEntityRecord(
+							'postType',
+							template.type,
+							template.id
+						);
+					}
 
 					createSuccessNotice(
-						sprintf(
-							/* translators: The template/part's name. */
-							__( '"%s" reverted.' ),
-							decodeEntities( template.title.rendered )
-						),
+						templates.length > 1
+							? sprintf(
+									/* translators: The number of items. */
+									__( '%s items reverted.' ),
+									templates.length
+							  )
+							: sprintf(
+									/* translators: The template/part's name. */
+									__( '"%s" reverted.' ),
+									decodeEntities(
+										templates[ 0 ].title.rendered
+									)
+							  ),
 						{
 							type: 'snackbar',
 							id: 'edit-site-template-reverted',
 						}
 					);
 				} catch ( error ) {
-					const fallbackErrorMessage =
-						template.type === TEMPLATE_POST_TYPE
-							? __(
-									'An error occurred while reverting the template.'
-							  )
-							: __(
-									'An error occurred while reverting the template part.'
-							  );
+					let fallbackErrorMessage;
+					if ( templates[ 0 ].type === TEMPLATE_POST_TYPE ) {
+						fallbackErrorMessage =
+							templates.length === 1
+								? __(
+										'An error occurred while reverting the template.'
+								  )
+								: __(
+										'An error occurred while reverting the templates.'
+								  );
+					} else {
+						fallbackErrorMessage =
+							templates.length === 1
+								? __(
+										'An error occurred while reverting the template part.'
+								  )
+								: __(
+										'An error occurred while reverting the template parts.'
+								  );
+					}
 					const errorMessage =
 						error.message && error.code !== 'unknown_error'
 							? error.message
@@ -85,21 +111,34 @@ export function useResetTemplateAction() {
 
 export const deleteTemplateAction = {
 	id: 'delete-template',
-	label: __( 'Delete template' ),
+	label: __( 'Delete' ),
 	isPrimary: true,
 	icon: trash,
 	isEligible: isTemplateRemovable,
+	supportsBulk: true,
 	hideModalHeader: true,
-	RenderModal: ( { item: template, closeModal } ) => {
-		const { removeTemplate } = useDispatch( editSiteStore );
+	RenderModal: ( { items: templates, closeModal, onPerform } ) => {
+		const { removeTemplates } = unlock( useDispatch( editSiteStore ) );
 		return (
 			<VStack spacing="5">
 				<Text>
-					{ sprintf(
-						// translators: %s: The template or template part's title.
-						__( 'Are you sure you want to delete "%s"?' ),
-						decodeEntities( template.title.rendered )
-					) }
+					{ templates.length > 1
+						? sprintf(
+								// translators: %d: number of items to delete.
+								_n(
+									'Delete %d item?',
+									'Delete %d items?',
+									templates.length
+								),
+								templates.length
+						  )
+						: sprintf(
+								// translators: %s: The template or template part's titles
+								__( 'Delete "%s"?' ),
+								decodeEntities(
+									templates?.[ 0 ]?.title?.rendered
+								)
+						  ) }
 				</Text>
 				<HStack justify="right">
 					<Button variant="tertiary" onClick={ closeModal }>
@@ -107,11 +146,15 @@ export const deleteTemplateAction = {
 					</Button>
 					<Button
 						variant="primary"
-						onClick={ () =>
-							removeTemplate( template, {
+						onClick={ async () => {
+							await removeTemplates( templates, {
 								allowUndo: false,
-							} )
-						}
+							} );
+							if ( onPerform ) {
+								onPerform();
+							}
+							closeModal();
+						} }
 					>
 						{ __( 'Delete' ) }
 					</Button>
@@ -124,9 +167,19 @@ export const deleteTemplateAction = {
 export const renameTemplateAction = {
 	id: 'rename-template',
 	label: __( 'Rename' ),
-	isEligible: ( template ) =>
-		isTemplateRemovable( template ) && template.is_custom,
-	RenderModal: ( { item: template, closeModal } ) => {
+	isEligible: ( template ) => {
+		// We can only remove templates or template parts that can be removed.
+		// Additionally in the case of templates, we can only remove custom templates.
+		if (
+			! isTemplateRemovable( template ) ||
+			( template.type === TEMPLATE_POST_TYPE && ! template.is_custom )
+		) {
+			return false;
+		}
+		return true;
+	},
+	RenderModal: ( { items: templates, closeModal } ) => {
+		const template = templates[ 0 ];
 		const title = decodeEntities( template.title.rendered );
 		const [ editedTitle, setEditedTitle ] = useState( title );
 		const {