@wordpress/edit-site 5.32.0 → 5.34.0

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

@@ -43,12 +43,6 @@
 }
 
 .edit-site-page-patterns-dataviews {
-	margin-top: 60px;
-
-	@include break-medium {
-		margin-top: 0;
-	}
-
 	.page-patterns-preview-field {
 		display: flex;
 		flex-direction: column;
@@ -57,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;
@@ -78,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;
+			}
 		}
 	}
 
@@ -111,6 +118,13 @@
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
 	}
+
+	.dataviews-view-grid__badge-fields {
+		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
+			background: rgba(var(--wp-block-synced-color--rgb), 0.04);
+			color: var(--wp-block-synced-color);
+		}
+	}
 }
 
 .dataviews-action-modal__duplicate-pattern {

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

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
 import { parse } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, createSelector } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -45,6 +40,7 @@ const templatePartToPattern = ( templatePart ) => ( {
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	title: decodeEntities( templatePart.title.rendered ),
 	type: templatePart.type,
+	_links: templatePart._links,
 	templatePart,
 } );
 
@@ -227,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

@@ -28,27 +28,21 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
+import { Async } from '../async';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
 import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	ENUMERATION_TYPE,
 	OPERATOR_IS_ANY,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
 } from '../../utils/constants';
-import {
-	resetTemplateAction,
-	deleteTemplateAction,
-	renameTemplateAction,
-} from './actions';
+
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import AddNewTemplatePart from './add-new-template-part';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -66,7 +60,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
-		displayAsColumnFields: [ 'description' ],
+		columnFields: [ 'description' ],
 	},
 	[ LAYOUT_LIST ]: {
 		primaryField: 'title',
@@ -75,7 +69,7 @@ const defaultConfigPerViewType = {
 };
 
 const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_GRID,
 	search: '',
 	page: 1,
 	perPage: 20,
@@ -86,7 +80,7 @@ const DEFAULT_VIEW = {
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'preview' ],
-	layout: defaultConfigPerViewType[ LAYOUT_TABLE ],
+	layout: defaultConfigPerViewType[ LAYOUT_GRID ],
 	filters: [],
 };
 
@@ -101,11 +95,6 @@ function Title( { item, viewType } ) {
 			canvas: 'edit',
 		},
 	};
-	if ( item.type === TEMPLATE_PART_POST_TYPE ) {
-		linkProps.state = {
-			backPath: '/wp_template_part/all',
-		};
-	}
 	return (
 		<Link { ...linkProps }>
 			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
@@ -173,7 +162,9 @@ function Preview( { item, viewType } ) {
 				style={ { backgroundColor } }
 			>
 				{ viewType === LAYOUT_LIST && ! isEmpty && (
-					<BlockPreview blocks={ blocks } />
+					<Async>
+						<BlockPreview blocks={ blocks } />
+					</Async>
 				) }
 				{ viewType !== LAYOUT_LIST && (
 					<button
@@ -182,11 +173,12 @@ 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 && <BlockPreview blocks={ blocks } /> }
+						{ isEmpty && __( 'Empty template' ) }
+						{ ! isEmpty && (
+							<Async>
+								<BlockPreview blocks={ blocks } />
+							</Async>
+						) }
 					</button>
 				) }
 			</div>
@@ -194,7 +186,15 @@ function Preview( { item, viewType } ) {
 	);
 }
 
-export default function PageTemplatesTemplateParts( { postType } ) {
+const TEMPLATE_ACTIONS = [
+	'edit-post',
+	'reset-template',
+	'rename-template',
+	'view-post-revisions',
+	'delete-template',
+];
+
+export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
@@ -234,7 +234,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	const { records, isResolving: isLoadingData } = useEntityRecords(
 		'postType',
-		postType,
+		TEMPLATE_POST_TYPE,
 		{
 			per_page: -1,
 		}
@@ -266,8 +266,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 		} ) );
 	}, [ records ] );
 
-	const fields = useMemo( () => {
-		const _fields = [
+	const fields = useMemo(
+		() => [
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
@@ -279,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 } ) => (
@@ -292,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 } ) => {
@@ -319,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 );
@@ -354,20 +346,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 		},
 		[ history ]
 	);
-	const [ editAction, viewRevisionsAction ] = usePostActions(
-		onActionPerformed,
-		[ 'edit-post', 'view-post-revisions' ]
-	);
-	const actions = useMemo(
-		() => [
-			editAction,
-			resetTemplateAction,
-			renameTemplateAction,
-			viewRevisionsAction,
-			deleteTemplateAction,
-		],
-		[ editAction, viewRevisionsAction ]
-	);
+
+	const actions = usePostActions( onActionPerformed, TEMPLATE_ACTIONS );
 
 	const onChangeView = useCallback(
 		( newView ) => {
@@ -392,23 +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
-						templateType={ postType }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				) : (
-					<AddNewTemplatePart />
-				)
-			}
+			className="edit-site-page-templates"
+			title={ __( 'Templates' ) }
+			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
 				paginationInfo={ paginationInfo }
@@ -419,10 +385,6 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
-				deferredRendering={
-					view.type === LAYOUT_GRID ||
-					! view.hiddenFields?.includes( 'preview' )
-				}
 			/>
 		</Page>
 	);

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

@@ -2,10 +2,9 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 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';
 
 /**
  * Internal dependencies
@@ -16,11 +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/pattern-modal/rename.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { RenamePatternModal } = unlock( patternsPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternRenameModal() {
 	const { record: pattern } = useEditedEntityRecord();

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/{template-actions/rename-menu-item.js → rename-post-menu-item/index.js}

@@ -21,8 +21,10 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-export default function RenameMenuItem( { template, onClose } ) {
-	const title = decodeEntities( template.title.rendered );
+export default function RenamePostMenuItem( { post } ) {
+	const title = decodeEntities(
+		typeof post.title === 'string' ? post.title : post.title.rendered
+	);
 	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
@@ -33,53 +35,46 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
+	if ( post.type === TEMPLATE_POST_TYPE && ! post.is_custom ) {
 		return null;
 	}
 
-	async function onTemplateRename( event ) {
+	async function onRename( event ) {
 		event.preventDefault();
 
+		if ( editedTitle === title ) {
+			return;
+		}
+
 		try {
-			await editEntityRecord( 'postType', template.type, template.id, {
+			await editEntityRecord( 'postType', post.type, post.id, {
 				title: editedTitle,
 			} );
 
 			// Update state before saving rerenders the list.
 			setEditedTitle( '' );
 			setIsModalOpen( false );
-			onClose();
 
 			// Persist edited entity.
 			await saveSpecifiedEntityEdits(
 				'postType',
-				template.type,
-				template.id,
+				post.type,
+				post.id,
 				[ 'title' ], // Only save title to avoid persisting other edits.
 				{
 					throwOnError: true,
 				}
 			);
 
-			createSuccessNotice(
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'Template renamed.' )
-					: __( 'Template part renamed.' ),
-				{
-					type: 'snackbar',
-				}
-			);
+			createSuccessNotice( __( 'Name updated.' ), {
+				id: 'template-update',
+				type: 'snackbar',
+			} );
 		} catch ( error ) {
-			const fallbackErrorMessage =
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'An error occurred while renaming the template.' )
-					: __(
-							'An error occurred while renaming the template part.'
-					  );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: fallbackErrorMessage;
+					: __( 'An error occurred while updating the name.' );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -102,8 +97,9 @@ export default function RenameMenuItem( { template, onClose } ) {
 						setIsModalOpen( false );
 					} }
 					overlayClassName="edit-site-list__rename-modal"
+					focusOnMount="firstContentElement"
 				>
-					<form onSubmit={ onTemplateRename }>
+					<form onSubmit={ onRename }>
 						<VStack spacing="5">
 							<TextControl
 								__nextHasNoMarginBottom

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 }
@@ -302,16 +303,12 @@ function ResizableFrame( {
 			} ) }
 			showHandle={ false } // Do not show the default handle, as we're using a custom one.
 		>
-			<motion.div
+			<div
 				className="edit-site-resizable-frame__inner-content"
-				animate={ {
-					borderRadius: isFullWidth ? 0 : 8,
-				} }
-				transition={ FRAME_TRANSITION }
 				style={ innerContentStyle }
 			>
 				{ children }
-			</motion.div>
+			</div>
 		</ResizableBox>
 	);
 }

package/src/components/save-panel/index.js

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-import { NavigableRegion } from '@wordpress/interface';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -26,7 +25,8 @@ import { useActivateTheme } from '../../utils/use-activate-theme';
 import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+const { EntitiesSavedStatesExtensible, NavigableRegion } =
+	unlock( privateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();