@wordpress/edit-site 5.33.0 → 5.35.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,6 @@ import {
 	Tooltip,
 	Flex,
 } from '@wordpress/components';
-import { getQueryArgs } from '@wordpress/url';
 import { __, _x } from '@wordpress/i18n';
 import {
 	useState,
@@ -26,14 +25,7 @@ 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';
@@ -52,12 +44,10 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
-	ENUMERATION_TYPE,
 	OPERATOR_IS,
 } from '../../utils/constants';
 import {
 	exportJSONaction,
-	renameAction,
 	resetAction,
 	deleteAction,
 	duplicatePatternAction,
@@ -68,15 +58,15 @@ import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
 import PatternsHeader from './header';
 import { useLink } from '../routes/link';
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
-const templatePartIcons = { header, footer, uncategorized };
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
 	[ LAYOUT_TABLE ]: {
@@ -93,7 +83,7 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
-	hiddenFields: [ 'sync-status' ],
+	hiddenFields: [],
 	layout: {
 		...defaultConfigPerViewType[ LAYOUT_GRID ],
 	},
@@ -119,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>
@@ -138,21 +126,8 @@ 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 );
-	}
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { onClick } = useLink( {
@@ -171,16 +146,7 @@ function Preview( { item, categoryId, viewType } ) {
 			<PreviewWrapper
 				item={ item }
 				onClick={ onClick }
-				ariaDescribedBy={
-					ariaDescriptions.length
-						? ariaDescriptions
-								.map(
-									( _, index ) =>
-										`${ descriptionId }-${ index }`
-								)
-								.join( ' ' )
-						: undefined
-				}
+				ariaDescribedBy={ item.description ? descriptionId : undefined }
 			>
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
@@ -193,16 +159,11 @@ function Preview( { item, categoryId, viewType } ) {
 					</Async>
 				) }
 			</PreviewWrapper>
-			{ ! isNonUserPattern &&
-				ariaDescriptions.map( ( ariaDescription, index ) => (
-					<div
-						key={ index }
-						hidden
-						id={ `${ descriptionId }-${ index }` }
-					>
-						{ ariaDescription }
-					</div>
-				) ) }
+			{ item.description && (
+				<div hidden id={ descriptionId }>
+					{ item.description }
+				</div>
+			) }
 		</div>
 	);
 }
@@ -216,12 +177,9 @@ function Author( { item, viewType } ) {
 		<HStack alignment="left" spacing={ 1 }>
 			{ withIcon && imageUrl && (
 				<div
-					className={ classnames(
-						'page-templates-author-field__avatar',
-						{
-							'is-loaded': isImageLoaded,
-						}
-					) }
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
 				>
 					<img
 						onLoad={ () => setIsImageLoaded( true ) }
@@ -242,9 +200,7 @@ function Author( { item, viewType } ) {
 
 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,
@@ -252,12 +208,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
@@ -280,19 +230,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"
@@ -310,9 +247,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';
@@ -360,6 +299,7 @@ export default function DataviewsPatterns() {
 				),
 				enableSorting: false,
 				enableHiding: false,
+				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -392,7 +332,6 @@ export default function DataviewsPatterns() {
 						</span>
 					);
 				},
-				type: ENUMERATION_TYPE,
 				elements: SYNC_FILTERS,
 				filterBy: {
 					operators: [ OPERATOR_IS ],
@@ -408,7 +347,6 @@ export default function DataviewsPatterns() {
 				render: ( { item } ) => {
 					return <Author viewType={ view.type } item={ item } />;
 				},
-				type: ENUMERATION_TYPE,
 				elements: authors,
 				filterBy: {
 					isPrimary: true,
@@ -437,45 +375,29 @@ export default function DataviewsPatterns() {
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields, type ] );
 
-	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 templatePartActions = usePostActions( TEMPLATE_PART_POST_TYPE );
+	const patternActions = usePostActions( PATTERN_TYPES.user );
+	const editAction = useEditPostAction();
+
 	const actions = useMemo( () => {
 		if ( type === TEMPLATE_PART_POST_TYPE ) {
 			return [
 				editAction,
-				renameAction,
+				...templatePartActions,
 				duplicateTemplatePartAction,
-				viewRevisionsAction,
 				resetAction,
 				deleteAction,
-			];
+			].filter( Boolean );
 		}
 		return [
-			renameAction,
+			editAction,
+			...patternActions,
 			duplicatePatternAction,
 			exportJSONaction,
 			resetAction,
 			deleteAction,
-		];
-	}, [ type, editAction, viewRevisionsAction ] );
+		].filter( Boolean );
+	}, [ editAction, type, templatePartActions, patternActions ] );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {

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

@@ -51,11 +51,20 @@
 
 		&.is-viewtype-grid {
 			.block-editor-block-preview__container {
-				height: 100%;
 				border-radius: 3px 3px 0 0;
 			}
 		}
 
+		&.is-viewtype-table {
+			width: 96px;
+			flex-grow: 0;
+			border-radius: 2px;
+
+			.page-patterns-preview-field__button {
+				border-radius: 2px;
+			}
+		}
+
 		.page-patterns-preview-field__button {
 			box-shadow: none;
 			border: none;
@@ -72,6 +81,10 @@
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
+
+			&[aria-disabled="true"] {
+				cursor: default;
+			}
 		}
 	}
 

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

@@ -223,6 +223,7 @@ const convertPatternPostToItem = ( patternPost, categories ) => ( {
 	syncStatus: patternPost.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
 	title: patternPost.title.raw,
 	type: patternPost.type,
+	description: patternPost.excerpt.raw,
 	patternPost,
 } );
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,6 @@ import AddNewTemplate from '../add-new-template';
 import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
-	ENUMERATION_TYPE,
 	OPERATOR_IS_ANY,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
@@ -44,7 +43,7 @@ import {
 
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import AddNewTemplatePart from './add-new-template-part';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -113,12 +112,9 @@ function AuthorField( { item, viewType } ) {
 		<HStack alignment="left" spacing={ 1 }>
 			{ withIcon && imageUrl && (
 				<div
-					className={ classnames(
-						'page-templates-author-field__avatar',
-						{
-							'is-loaded': isImageLoaded,
-						}
-					) }
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
 				>
 					<img
 						onLoad={ () => setIsImageLoaded( true ) }
@@ -175,10 +171,7 @@ function Preview( { item, viewType } ) {
 						onClick={ onClick }
 						aria-label={ item.title?.rendered || item.title }
 					>
-						{ isEmpty &&
-							( item.type === TEMPLATE_POST_TYPE
-								? __( 'Empty template' )
-								: __( 'Empty template part' ) ) }
+						{ isEmpty && __( 'Empty template' ) }
 						{ ! isEmpty && (
 							<Async>
 								<BlockPreview blocks={ blocks } />
@@ -191,15 +184,7 @@ function Preview( { item, viewType } ) {
 	);
 }
 
-const TEMPLATE_ACTIONS = [
-	'edit-post',
-	'reset-template',
-	'rename-template',
-	'view-post-revisions',
-	'delete-template',
-];
-
-export default function PageTemplatesTemplateParts( { postType } ) {
+export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
@@ -239,7 +224,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	const { records, isResolving: isLoadingData } = useEntityRecords(
 		'postType',
-		postType,
+		TEMPLATE_POST_TYPE,
 		{
 			per_page: -1,
 		}
@@ -271,8 +256,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 		} ) );
 	}, [ records ] );
 
-	const fields = useMemo( () => {
-		const _fields = [
+	const fields = useMemo(
+		() => [
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
@@ -284,10 +269,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				enableSorting: false,
 			},
 			{
-				header:
-					postType === TEMPLATE_POST_TYPE
-						? __( 'Template' )
-						: __( 'Template Part' ),
+				header: __( 'Template' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => (
@@ -297,9 +279,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				enableHiding: false,
 				enableGlobalSearch: true,
 			},
-		];
-		if ( postType === TEMPLATE_POST_TYPE ) {
-			_fields.push( {
+			{
 				header: __( 'Description' ),
 				id: 'description',
 				render: ( { item } ) => {
@@ -324,44 +304,32 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				minWidth: 320,
 				enableSorting: false,
 				enableGlobalSearch: true,
-			} );
-		}
-		// TODO: The plan is to support fields reordering, which would require an API like `order` or something
-		// similar. With the aforementioned API we wouldn't need to construct the fields array like this.
-		_fields.push( {
-			header: __( 'Author' ),
-			id: 'author',
-			getValue: ( { item } ) => item.author_text,
-			render: ( { item } ) => {
-				return <AuthorField viewType={ view.type } item={ item } />;
 			},
-			type: ENUMERATION_TYPE,
-			elements: authors,
-			width: '1%',
-		} );
-		return _fields;
-	}, [ postType, authors, view.type ] );
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				getValue: ( { item } ) => item.author_text,
+				render: ( { item } ) => {
+					return <AuthorField viewType={ view.type } item={ item } />;
+				},
+				elements: authors,
+				width: '1%',
+			},
+		],
+		[ authors, view.type ]
+	);
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );
 	}, [ records, view, fields ] );
 
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history ]
+	const postTypeActions = usePostActions( TEMPLATE_POST_TYPE );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
 
-	const actions = usePostActions( onActionPerformed, TEMPLATE_ACTIONS );
-
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -385,19 +353,9 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	return (
 		<Page
-			className="edit-site-page-template-template-parts-dataviews"
-			title={
-				postType === TEMPLATE_POST_TYPE
-					? __( 'Templates' )
-					: __( 'Template Parts' )
-			}
-			actions={
-				postType === TEMPLATE_POST_TYPE ? (
-					<AddNewTemplate />
-				) : (
-					<AddNewTemplatePart />
-				)
-			}
+			className="edit-site-page-templates"
+			title={ __( 'Templates' ) }
+			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
 				paginationInfo={ paginationInfo }

package/src/components/{page-templates-template-parts → page-templates}/style.scss

@@ -30,7 +30,7 @@
 
 	&.is-viewtype-grid {
 		.block-editor-block-preview__container {
-			height: auto;
+			height: 100%;
 		}
 
 		.page-templates-preview-field__button {
@@ -59,7 +59,7 @@
 	white-space: normal;
 }
 
-.edit-site-page-template-template-parts-dataviews {
+.edit-site-page-templates {
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}

package/src/components/pagination/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ export default function Pagination( {
 			aria-label={ label }
 			spacing={ 3 }
 			justify="flex-start"
-			className={ classnames( 'edit-site-pagination', className ) }
+			className={ clsx( 'edit-site-pagination', className ) }
 		>
 			<Text variant="muted" className="edit-site-pagination__total">
 				{

package/src/components/pattern-modal/duplicate.js

@@ -4,7 +4,6 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { getQueryArgs } from '@wordpress/url';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
@@ -16,12 +15,14 @@ import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternDuplicateModal() {
 	const { record } = useEditedEntityRecord();
-	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const {
+		params: { categoryType, categoryId },
+	} = useLocation();
 	const { closeModal } = useDispatch( interfaceStore );
 	const history = useHistory();
 

package/src/components/plugin-template-setting-panel/index.js

@@ -8,10 +8,16 @@
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { createSlotFill } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 
 const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' );
 
 const PluginTemplateSettingPanel = ( { children } ) => {
+	deprecated( 'wp.editSite.PluginTemplateSettingPanel', {
+		since: '6.6',
+		version: '6.8',
+		alternative: 'wp.editor.PluginDocumentSettingPanel',
+	} );
 	const isCurrentEntityTemplate = useSelect(
 		( select ) =>
 			select( editorStore ).getCurrentPostType() === 'wp_template',
@@ -29,6 +35,8 @@ PluginTemplateSettingPanel.Slot = Slot;
  * Renders items in the Template Sidebar below the main information
  * like the Template Card.
  *
+ * @deprecated since 6.6. Use `wp.editor.PluginDocumentSettingPanel` instead.
+ *
  * @example
  * ```jsx
  * // Using ESNext syntax