@wordpress/edit-site 5.32.0 → 5.34.0

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

@@ -1,37 +1,25 @@
-.page-pages-preview-field__button {
-	box-shadow: none;
-	border: none;
-	padding: 0;
-	background-color: unset;
-	box-sizing: border-box;
-	cursor: pointer;
-	overflow: hidden;
+.edit-site-page-pages__featured-image {
 	height: 100%;
+	object-fit: cover;
 	width: 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;
-	}
+.edit-site-page-pages__featured-image-wrapper {
+	height: 100%;
+	width: 100%;
+	border-radius: $grid-unit-05;
 
-	&.edit-site-page-pages__media-wrapper {
+	&.is-layout-table:not(:has(.page-pages-preview-field__button)),
+	&.is-layout-table .page-pages-preview-field__button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
 		border-radius: $grid-unit-05;
 		position: relative;
-		background-color: $gray-100;
 		overflow: hidden;
+		background-color: $gray-100;
 		flex-grow: 0 !important;
 
-		.edit-site-page-pages__featured-image {
-			height: 100%;
-			object-fit: cover;
-			width: 100%;
-		}
-
 		&::after {
 			border-radius: 4px;
 			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
@@ -44,3 +32,33 @@
 		}
 	}
 }
+
+.page-pages-preview-field__button {
+	box-shadow: none;
+	border: none;
+	padding: 0;
+	background-color: unset;
+	box-sizing: border-box;
+	cursor: pointer;
+	overflow: hidden;
+	height: 100%;
+	width: 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;
+	}
+
+	// Make the button targetable for clicks
+	&::after {
+		content: "";
+		height: 100%;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		z-index: 1;
+	}
+}

package/src/components/page-patterns/dataviews-pattern-actions.js

@@ -7,7 +7,6 @@ import { downloadZip } from 'client-zip';
 /**
  * WordPress dependencies
  */
-import { getQueryArgs } from '@wordpress/url';
 import { downloadBlob } from '@wordpress/blob';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import {
@@ -23,6 +22,7 @@ import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { store as editorStore } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 
@@ -38,7 +38,7 @@ import {
 } from '../../utils/constants';
 import { CreateTemplatePartModalContents } from '../create-template-part-modal';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
@@ -198,7 +198,7 @@ export const deleteAction = {
 			useDispatch( reusableBlocksStore );
 		const { createErrorNotice, createSuccessNotice } =
 			useDispatch( noticesStore );
-		const { removeTemplates } = unlock( useDispatch( editSiteStore ) );
+		const { removeTemplates } = unlock( useDispatch( editorStore ) );
 
 		const deletePattern = async () => {
 			const promiseResult = await Promise.allSettled(
@@ -326,7 +326,7 @@ export const deleteAction = {
 
 export const resetAction = {
 	id: 'reset-action',
-	label: __( 'Clear customizations' ),
+	label: __( 'Reset' ),
 	isEligible: ( item ) => {
 		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
@@ -339,9 +339,7 @@ export const resetAction = {
 		return (
 			<VStack spacing="5">
 				<Text>
-					{ __(
-						'Are you sure you want to clear these customizations?'
-					) }
+					{ __( 'Reset to default and clear all customizations?' ) }
 				</Text>
 				<HStack justify="right">
 					<Button variant="tertiary" onClick={ closeModal }>
@@ -351,7 +349,7 @@ export const resetAction = {
 						variant="primary"
 						onClick={ () => removeTemplate( item ) }
 					>
-						{ __( 'Clear' ) }
+						{ __( 'Reset' ) }
 					</Button>
 				</HStack>
 			</VStack>
@@ -366,9 +364,9 @@ export const duplicatePatternAction = {
 	modalHeader: _x( 'Duplicate pattern', 'action label' ),
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
-		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
-			window.location.href
-		);
+		const {
+			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
+		} = useLocation();
 		const isThemePattern = item.type === PATTERN_TYPES.theme;
 		const history = useHistory();
 		function onPatternSuccess( { pattern } ) {
@@ -402,11 +400,11 @@ export const duplicateTemplatePartAction = {
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
 		const { createSuccessNotice } = useDispatch( noticesStore );
-		const { categoryId = PATTERN_DEFAULT_CATEGORY } = getQueryArgs(
-			window.location.href
-		);
+		const {
+			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
+		} = useLocation();
 		const history = useHistory();
-		async function onTemplatePartSuccess( templatePart ) {
+		function onTemplatePartSuccess( templatePart ) {
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.

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

@@ -40,8 +40,10 @@ export default function PatternsHeader( {
 		const templatePartArea = templatePartAreas.find(
 			( area ) => area.area === categoryId
 		);
-		title = templatePartArea?.label;
-		description = templatePartArea?.description;
+		title = templatePartArea?.label || __( 'All Template Parts' );
+		description =
+			templatePartArea?.description ||
+			__( 'Includes every template part defined for any area.' );
 	} else if ( type === PATTERN_TYPES.theme ) {
 		patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId
@@ -50,7 +52,9 @@ export default function PatternsHeader( {
 		description = patternCategory?.description;
 	}
 
-	if ( ! title ) return null;
+	if ( ! title ) {
+		return null;
+	}
 
 	return (
 		<VStack className="edit-site-patterns__section-header">

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,7 +12,6 @@ import {
 	Tooltip,
 	Flex,
 } from '@wordpress/components';
-import { getQueryArgs } from '@wordpress/url';
 import { __, _x } from '@wordpress/i18n';
 import {
 	useState,
@@ -21,28 +25,25 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import {
-	Icon,
-	header,
-	footer,
-	symbolFilled as uncategorized,
-	symbol,
-	lockSmall,
-} from '@wordpress/icons';
+import { Icon, lockSmall } from '@wordpress/icons';
 import { usePrevious } from '@wordpress/compose';
+import { useEntityRecords } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
+import { Async } from '../async';
 import Page from '../page';
 import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
+	LAYOUT_LIST,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
-	ENUMERATION_TYPE,
 	OPERATOR_IS,
 } from '../../utils/constants';
 import {
@@ -58,12 +59,14 @@ import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
 import PatternsHeader from './header';
 import { useLink } from '../routes/link';
+import { useAddedBy } from '../page-templates/hooks';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
+const { usePostActions } = unlock( editorPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-const templatePartIcons = { header, footer, uncategorized };
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
 	[ LAYOUT_TABLE ]: {
@@ -72,6 +75,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
+		badgeFields: [ 'sync-status' ],
 	},
 };
 const DEFAULT_VIEW = {
@@ -79,7 +83,7 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
-	hiddenFields: [ 'sync-status' ],
+	hiddenFields: [],
 	layout: {
 		...defaultConfigPerViewType[ LAYOUT_GRID ],
 	},
@@ -105,16 +109,14 @@ const SYNC_FILTERS = [
 ];
 
 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 }
+			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
 			aria-label={ item.title }
 			aria-describedby={ ariaDescribedBy }
+			aria-disabled={ item.type === PATTERN_TYPES.theme }
 		>
 			{ children }
 		</button>
@@ -124,27 +126,9 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 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,
@@ -155,53 +139,71 @@ function Preview( { item, categoryId, viewType } ) {
 	} );
 
 	return (
-		<>
-			<div
-				className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
-				style={ { backgroundColor } }
+		<div
+			className={ `page-patterns-preview-field is-viewtype-${ viewType }` }
+			style={ { backgroundColor } }
+		>
+			<PreviewWrapper
+				item={ item }
+				onClick={ onClick }
+				ariaDescribedBy={ item.description ? descriptionId : undefined }
 			>
-				<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 && (
+				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+				{ ! isEmpty && (
+					<Async>
 						<BlockPreview
 							blocks={ item.blocks }
 							viewportWidth={ item.viewportWidth }
 						/>
-					) }
-				</PreviewWrapper>
-			</div>
-			{ ariaDescriptions.map( ( ariaDescription, index ) => (
+					</Async>
+				) }
+			</PreviewWrapper>
+			{ item.description && (
+				<div hidden id={ descriptionId }>
+					{ item.description }
+				</div>
+			) }
+		</div>
+	);
+}
+
+function Author( { item, viewType } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+	const withIcon = viewType !== LAYOUT_LIST;
+
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ withIcon && imageUrl && (
 				<div
-					key={ index }
-					hidden
-					id={ `${ descriptionId }-${ index }` }
+					className={ classnames(
+						'page-templates-author-field__avatar',
+						{
+							'is-loaded': isImageLoaded,
+						}
+					) }
 				>
-					{ ariaDescription }
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
 				</div>
-			) ) }
-		</>
+			) }
+			{ withIcon && ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
 	);
 }
 
 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,
@@ -209,12 +211,6 @@ function Title( { item, categoryId } ) {
 		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
-	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 }>
 			<Flex
@@ -237,19 +233,6 @@ function Title( { item, categoryId } ) {
 					</Button>
 				) }
 			</Flex>
-			{ 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"
@@ -267,9 +250,11 @@ function Title( { item, categoryId } ) {
 }
 
 export default function DataviewsPatterns() {
-	const { categoryType, categoryId = PATTERN_DEFAULT_CATEGORY } =
-		getQueryArgs( window.location.href );
+	const {
+		params: { categoryType, categoryId: categoryIdFromURL },
+	} = useLocation();
 	const type = categoryType || PATTERN_TYPES.theme;
+	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const isUncategorizedThemePatterns =
 		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
@@ -285,6 +270,24 @@ export default function DataviewsPatterns() {
 			syncStatus: viewSyncStatus,
 		}
 	);
+
+	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
+		per_page: -1,
+	} );
+	const authors = useMemo( () => {
+		if ( ! records ) {
+			return EMPTY_ARRAY;
+		}
+		const authorsSet = new Set();
+		records.forEach( ( template ) => {
+			authorsSet.add( template.author_text );
+		} );
+		return Array.from( authorsSet ).map( ( author ) => ( {
+			value: author,
+			label: author,
+		} ) );
+	}, [ records ] );
+
 	const fields = useMemo( () => {
 		const _fields = [
 			{
@@ -299,6 +302,7 @@ export default function DataviewsPatterns() {
 				),
 				enableSorting: false,
 				enableHiding: false,
+				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -309,24 +313,28 @@ export default function DataviewsPatterns() {
 				enableHiding: false,
 			},
 		];
+
 		if ( type === PATTERN_TYPES.theme ) {
 			_fields.push( {
-				header: __( 'Sync Status' ),
+				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
+						<span
+							className={ `edit-site-patterns__field-sync-status-${ item.syncStatus }` }
+						>
+							{ SYNC_FILTERS.find(
+								( { value } ) => value === item.syncStatus
+							)?.label ||
+								SYNC_FILTERS.find(
+									( { value } ) =>
+										value === PATTERN_SYNC_TYPES.unsynced
+								).label }
+						</span>
 					);
 				},
-				type: ENUMERATION_TYPE,
 				elements: SYNC_FILTERS,
 				filterBy: {
 					operators: [ OPERATOR_IS ],
@@ -334,9 +342,25 @@ export default function DataviewsPatterns() {
 				},
 				enableSorting: false,
 			} );
+		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
+			_fields.push( {
+				header: __( 'Author' ),
+				id: 'author',
+				getValue: ( { item } ) => item.templatePart.author_text,
+				render: ( { item } ) => {
+					return <Author viewType={ view.type } item={ item } />;
+				},
+				elements: authors,
+				filterBy: {
+					isPrimary: true,
+				},
+				width: '1%',
+			} );
 		}
+
 		return _fields;
-	}, [ view.type, categoryId, type ] );
+	}, [ view.type, categoryId, type, authors ] );
+
 	// Reset the page number when the category changes.
 	useEffect( () => {
 		if ( previousCategoryId !== categoryId ) {
@@ -344,25 +368,55 @@ export default function DataviewsPatterns() {
 		}
 	}, [ categoryId, previousCategoryId ] );
 	const { data, paginationInfo } = useMemo( () => {
-		// Since filters are applied server-side,
-		// we need to remove them from the view
+		// Search is managed server-side as well as filters for patterns.
+		// However, the author filter in template parts is done client-side.
 		const viewWithoutFilters = { ...view };
 		delete viewWithoutFilters.search;
-		viewWithoutFilters.filters = [];
+		if ( type !== TEMPLATE_PART_POST_TYPE ) {
+			viewWithoutFilters.filters = [];
+		}
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
-	}, [ patterns, view, fields ] );
+	}, [ patterns, view, fields, type ] );
 
-	const actions = useMemo(
-		() => [
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'edit-post' ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					categoryId,
+					categoryType: type,
+					canvas: 'edit',
+				} );
+			}
+		},
+		[ history, categoryId, type ]
+	);
+	const [ editAction, viewRevisionsAction ] = usePostActions(
+		onActionPerformed,
+		[ 'edit-post', 'view-post-revisions' ]
+	);
+	const actions = useMemo( () => {
+		if ( type === TEMPLATE_PART_POST_TYPE ) {
+			return [
+				editAction,
+				renameAction,
+				duplicateTemplatePartAction,
+				viewRevisionsAction,
+				resetAction,
+				deleteAction,
+			];
+		}
+		return [
 			renameAction,
 			duplicatePatternAction,
-			duplicateTemplatePartAction,
 			exportJSONaction,
 			resetAction,
 			deleteAction,
-		],
-		[]
-	);
+		];
+	}, [ type, editAction, viewRevisionsAction ] );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -404,7 +458,6 @@ export default function DataviewsPatterns() {
 					isLoading={ isResolving }
 					view={ view }
 					onChangeView={ onChangeView }
-					deferredRendering
 					supportedLayouts={ [ LAYOUT_GRID, LAYOUT_TABLE ] }
 				/>
 			</Page>

package/src/components/page-patterns/search-items.js

@@ -16,6 +16,7 @@ const { extractWords, getNormalizedSearchTerms, normalizeString } = unlock(
  * Internal dependencies
  */
 import {
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
 	PATTERN_TYPES,
@@ -48,6 +49,7 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
  */
 export const searchItems = ( items = [], searchInput = '', config = {} ) => {
 	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+
 	// Filter patterns by category: the default category indicates that all patterns will be shown.
 	const onlyFilterByCategory =
 		config.categoryId !== PATTERN_DEFAULT_CATEGORY &&
@@ -100,6 +102,7 @@ function getItemSearchRank( item, searchTerm, config ) {
 
 	let rank =
 		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		categoryId === TEMPLATE_PART_ALL_AREAS_CATEGORY ||
 		( categoryId === PATTERN_USER_CATEGORY &&
 			item.type === PATTERN_TYPES.user ) ||
 		hasCategory( item, categoryId )