@wordpress/edit-site 5.33.0 → 5.34.0

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

@@ -22,7 +22,6 @@ import {
 	DEFAULT_CONFIG_PER_VIEW_TYPE,
 } from '../sidebar-dataviews/default-views';
 import {
-	ENUMERATION_TYPE,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
@@ -189,7 +188,7 @@ function FeaturedImage( { item, viewType } ) {
 	);
 }
 
-const PAGE_ACTIONS = [
+let PAGE_ACTIONS = [
 	'edit-post',
 	'view-post',
 	'restore',
@@ -199,6 +198,19 @@ const PAGE_ACTIONS = [
 	'move-to-trash',
 ];
 
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	PAGE_ACTIONS = [
+		'edit-post',
+		'view-post',
+		'restore',
+		'permanently-delete',
+		'view-post-revisions',
+		'duplicate-post',
+		'rename-post',
+		'move-to-trash',
+	];
+}
+
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
@@ -316,7 +328,6 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
-				type: ENUMERATION_TYPE,
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
@@ -329,7 +340,6 @@ export default function PagePages() {
 				getValue: ( { item } ) =>
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
-				type: ENUMERATION_TYPE,
 				elements: STATUSES,
 				enableSorting: false,
 				filterBy: {

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

@@ -50,4 +50,15 @@
 		// 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 {
@@ -39,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 );
 
@@ -365,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 } ) {
@@ -401,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

@@ -52,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

@@ -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,7 +44,6 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
-	ENUMERATION_TYPE,
 	OPERATOR_IS,
 } from '../../utils/constants';
 import {
@@ -68,15 +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-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, 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>
 	);
 }
@@ -242,9 +203,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 +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
@@ -280,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"
@@ -310,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';
@@ -360,6 +302,7 @@ export default function DataviewsPatterns() {
 				),
 				enableSorting: false,
 				enableHiding: false,
+				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -392,7 +335,6 @@ export default function DataviewsPatterns() {
 						</span>
 					);
 				},
-				type: ENUMERATION_TYPE,
 				elements: SYNC_FILTERS,
 				filterBy: {
 					operators: [ OPERATOR_IS ],
@@ -408,7 +350,6 @@ export default function DataviewsPatterns() {
 				render: ( { item } ) => {
 					return <Author viewType={ view.type } item={ item } />;
 				},
-				type: ENUMERATION_TYPE,
 				elements: authors,
 				filterBy: {
 					isPrimary: true,

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

@@ -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,6 @@ import {
 
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import AddNewTemplatePart from './add-new-template-part';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -175,10 +173,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 } />
@@ -199,7 +194,7 @@ const TEMPLATE_ACTIONS = [
 	'delete-template',
 ];
 
-export default function PageTemplatesTemplateParts( { postType } ) {
+export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
@@ -239,7 +234,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	const { records, isResolving: isLoadingData } = useEntityRecords(
 		'postType',
-		postType,
+		TEMPLATE_POST_TYPE,
 		{
 			per_page: -1,
 		}
@@ -271,8 +266,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 		} ) );
 	}, [ records ] );
 
-	const fields = useMemo( () => {
-		const _fields = [
+	const fields = useMemo(
+		() => [
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
@@ -284,10 +279,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 +289,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				enableHiding: false,
 				enableGlobalSearch: true,
 			},
-		];
-		if ( postType === TEMPLATE_POST_TYPE ) {
-			_fields.push( {
+			{
 				header: __( 'Description' ),
 				id: 'description',
 				render: ( { item } ) => {
@@ -324,23 +314,20 @@ 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 );
@@ -385,19 +372,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/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

package/src/components/resizable-frame/index.js

@@ -203,11 +203,11 @@ function ResizableFrame( {
 		},
 		visible: {
 			opacity: 1,
-			left: -16,
+			left: -14, // Account for the handle's width.
 		},
 		active: {
 			opacity: 1,
-			left: -16,
+			left: -14, // Account for the handle's width.
 			scaleY: 1.3,
 		},
 	};
@@ -226,8 +226,9 @@ function ResizableFrame( {
 			variants={ frameAnimationVariants }
 			animate={ isFullWidth ? 'fullWidth' : 'default' }
 			onAnimationComplete={ ( definition ) => {
-				if ( definition === 'fullWidth' )
+				if ( definition === 'fullWidth' ) {
 					setFrameSize( { width: '100%', height: '100%' } );
+				}
 			} }
 			transition={ FRAME_TRANSITION }
 			size={ frameSize }

package/src/components/sidebar-edit-mode/index.js

@@ -11,7 +11,13 @@ import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	PageAttributesPanel,
+	PostDiscussionPanel,
+	PostLastRevisionPanel,
+	PostTaxonomiesPanel,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -25,7 +31,7 @@ import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
-const { interfaceStore, useAutoSwitchEditorSidebars } =
+const { interfaceStore, useAutoSwitchEditorSidebars, PatternOverridesPanel } =
 	unlock( editorPrivateApis );
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
@@ -91,6 +97,11 @@ const FillContents = ( { tabName, isEditingPage, supportsGlobalStyles } ) => {
 						focusable={ false }
 					>
 						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
+						<PostLastRevisionPanel />
+						<PostTaxonomiesPanel />
+						<PostDiscussionPanel />
+						<PageAttributesPanel />
+						<PatternOverridesPanel />
 					</Tabs.TabPanel>
 					<Tabs.TabPanel tabId="edit-post/block" focusable={ false }>
 						<InspectorSlot bubblesVirtually />