@wordpress/editor 14.2.0 → 14.3.0

package/src/components/post-actions/actions.js

@@ -10,7 +10,8 @@ import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-
+import { parse } from '@wordpress/blocks';
+import { DataForm } from '@wordpress/dataviews';
 import {
 	Button,
 	TextControl,
@@ -30,14 +31,28 @@ import {
 } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import isTemplateRevertable from '../../store/utils/is-template-revertable';
-import { exportPatternAsJSONAction } from './export-pattern-action';
 import { CreateTemplatePartModalContents } from '../create-template-part-modal';
+import { getItemTitle } from '../../dataviews/actions/utils';
 
 // Patterns.
 const { PATTERN_TYPES, CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
+// TODO: this should be shared with other components (page-pages).
+const fields = [
+	{
+		type: 'text',
+		header: __( 'Title' ),
+		id: 'title',
+		placeholder: __( 'No title' ),
+		getValue: ( { item } ) => item.title,
+	},
+];
+
+const form = {
+	visibleFields: [ 'title' ],
+};
+
 /**
  * Check if a template is removable.
  *
@@ -52,100 +67,10 @@ function isTemplateRemovable( template ) {
 	// than the one returned from the endpoint. This is why we need to check for
 	// two props whether is custom or has a theme file.
 	return (
-		[ template.source, template.templatePart?.source ].includes(
-			TEMPLATE_ORIGINS.custom
-		) &&
-		! template.has_theme_file &&
-		! template.templatePart?.has_theme_file
+		template?.source === TEMPLATE_ORIGINS.custom &&
+		! template?.has_theme_file
 	);
 }
-const canDeleteOrReset = ( item ) => {
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	return isUserPattern || ( isTemplatePart && item.isCustom );
-};
-
-function getItemTitle( item ) {
-	if ( typeof item.title === 'string' ) {
-		return decodeEntities( item.title );
-	}
-	return decodeEntities( item.title?.rendered || '' );
-}
-
-// This action is used for templates, patterns and template parts.
-// Every other post type uses the similar `trashPostAction` which
-// moves the post to trash.
-const deletePostAction = {
-	id: 'delete-post',
-	label: __( 'Delete' ),
-	isPrimary: true,
-	icon: trash,
-	isEligible( post ) {
-		if (
-			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
-				post.type
-			)
-		) {
-			return isTemplateRemovable( post );
-		}
-		// We can only remove user patterns.
-		return post.type === PATTERN_TYPES.user;
-	},
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { removeTemplates } = unlock( useDispatch( editorStore ) );
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ items.length > 1
-						? sprintf(
-								// translators: %d: number of items to delete.
-								_n(
-									'Delete %d item?',
-									'Delete %d items?',
-									items.length
-								),
-								items.length
-						  )
-						: sprintf(
-								// translators: %s: The template or template part's titles
-								__( 'Delete "%s"?' ),
-								getItemTitle( items[ 0 ] )
-						  ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						__experimentalIsFocusable
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							await removeTemplates( items, {
-								allowUndo: false,
-							} );
-							onActionPerformed?.( items );
-							setIsBusy( false );
-							closeModal();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						__experimentalIsFocusable
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
 
 const trashPostAction = {
 	id: 'move-to-trash',
@@ -188,7 +113,7 @@ const trashPostAction = {
 						variant="tertiary"
 						onClick={ closeModal }
 						disabled={ isBusy }
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 					>
 						{ __( 'Cancel' ) }
 					</Button>
@@ -220,16 +145,14 @@ const trashPostAction = {
 										__( '"%s" moved to trash.' ),
 										getItemTitle( items[ 0 ] )
 									);
-								} else if ( items[ 0 ].type === 'page' ) {
-									successMessage = sprintf(
-										/* translators: The number of items. */
-										__( '%s items moved to trash.' ),
-										items.length
-									);
 								} else {
 									successMessage = sprintf(
-										/* translators: The number of posts. */
-										__( '%s items move to trash.' ),
+										/* translators: The number of items. */
+										_n(
+											'%s item moved to trash.',
+											'%s items moved to trash.',
+											items.length
+										),
 										items.length
 									);
 								}
@@ -297,7 +220,7 @@ const trashPostAction = {
 						} }
 						isBusy={ isBusy }
 						disabled={ isBusy }
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 					>
 						{ __( 'Trash' ) }
 					</Button>
@@ -340,7 +263,7 @@ const permanentlyDeletePostAction = {
 	isEligible( { status } ) {
 		return status === 'trash';
 	},
-	async callback( posts, { registry } ) {
+	async callback( posts, { registry, onActionPerformed } ) {
 		const { createSuccessNotice, createErrorNotice } =
 			registry.dispatch( noticesStore );
 		const { deleteEntityRecord } = registry.dispatch( coreStore );
@@ -371,6 +294,7 @@ const permanentlyDeletePostAction = {
 				type: 'snackbar',
 				id: 'permanently-delete-post-action',
 			} );
+			onActionPerformed?.( posts );
 		} else {
 			// If there was at lease one failure.
 			let errorMessage;
@@ -626,19 +550,13 @@ const renamePostAction = {
 		// two props whether is custom or has a theme file.
 		const isCustomPattern =
 			isUserPattern ||
-			( isTemplatePart &&
-				( post.isCustom || post.source === TEMPLATE_ORIGINS.custom ) );
-		const hasThemeFile =
-			isTemplatePart &&
-			( post.templatePart?.has_theme_file || post.has_theme_file );
+			( isTemplatePart && post.source === TEMPLATE_ORIGINS.custom );
+		const hasThemeFile = post?.has_theme_file;
 		return isCustomPattern && ! hasThemeFile;
 	},
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
-		const originalTitle = decodeEntities(
-			typeof item.title === 'string' ? item.title : item.title.rendered
-		);
-		const [ title, setTitle ] = useState( () => originalTitle );
+		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
 		const { editEntityRecord, saveEditedEntityRecord } =
 			useDispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } =
@@ -733,16 +651,17 @@ const useDuplicatePostAction = ( postType ) => {
 					return status !== 'trash';
 				},
 				RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-					const [ item ] = items;
+					const [ item, setItem ] = useState( {
+						...items[ 0 ],
+						title: sprintf(
+							/* translators: %s: Existing template title */
+							__( '%s (Copy)' ),
+							getItemTitle( items[ 0 ] )
+						),
+					} );
+
 					const [ isCreatingPage, setIsCreatingPage ] =
 						useState( false );
-					const [ title, setTitle ] = useState(
-						sprintf(
-							/* translators: %s: Existing item title */
-							__( '%s (Copy)' ),
-							getItemTitle( item )
-						)
-					);
 
 					const { saveEntityRecord } = useDispatch( coreStore );
 					const { createSuccessNotice, createErrorNotice } =
@@ -757,8 +676,8 @@ const useDuplicatePostAction = ( postType ) => {
 
 						const newItemOject = {
 							status: 'draft',
-							title,
-							slug: title || __( 'No title' ),
+							title: item.title,
+							slug: item.title || __( 'No title' ),
 							comment_status: item.comment_status,
 							content:
 								typeof item.content === 'string'
@@ -809,7 +728,7 @@ const useDuplicatePostAction = ( postType ) => {
 									// translators: %s: Title of the created template e.g: "Category".
 									__( '"%s" successfully created.' ),
 									decodeEntities(
-										newItem.title?.rendered || title
+										newItem.title?.rendered || item.title
 									)
 								),
 								{
@@ -837,19 +756,21 @@ const useDuplicatePostAction = ( postType ) => {
 							closeModal();
 						}
 					}
+
 					return (
 						<form onSubmit={ createPage }>
 							<VStack spacing={ 3 }>
-								<TextControl
-									label={ __( 'Title' ) }
-									onChange={ setTitle }
-									placeholder={ __( 'No title' ) }
-									value={ title }
+								<DataForm
+									data={ item }
+									fields={ fields }
+									form={ form }
+									onChange={ setItem }
 								/>
 								<HStack spacing={ 2 } justify="end">
 									<Button
 										variant="tertiary"
 										onClick={ closeModal }
+										__next40pxDefaultSize
 									>
 										{ __( 'Cancel' ) }
 									</Button>
@@ -858,6 +779,7 @@ const useDuplicatePostAction = ( postType ) => {
 										type="submit"
 										isBusy={ isCreatingPage }
 										aria-disabled={ isCreatingPage }
+										__next40pxDefaultSize
 									>
 										{ _x( 'Duplicate', 'action label' ) }
 									</Button>
@@ -871,132 +793,6 @@ const useDuplicatePostAction = ( postType ) => {
 	);
 };
 
-const isTemplatePartRevertable = ( item ) => {
-	if ( ! item ) {
-		return false;
-	}
-	const hasThemeFile = item.templatePart?.has_theme_file;
-	return canDeleteOrReset( item ) && hasThemeFile;
-};
-
-const resetTemplateAction = {
-	id: 'reset-template',
-	label: __( 'Reset' ),
-	isEligible: ( item ) => {
-		return item.type === TEMPLATE_PART_POST_TYPE
-			? isTemplatePartRevertable( item )
-			: isTemplateRevertable( item );
-	},
-	icon: backup,
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { revertTemplate, removeTemplates } = unlock(
-			useDispatch( editorStore )
-		);
-		const { saveEditedEntityRecord } = useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		const onConfirm = async () => {
-			try {
-				if ( items[ 0 ].type === TEMPLATE_PART_POST_TYPE ) {
-					await removeTemplates( items );
-				} else {
-					for ( const template of items ) {
-						if ( template.type === TEMPLATE_POST_TYPE ) {
-							await revertTemplate( template, {
-								allowUndo: false,
-							} );
-							await saveEditedEntityRecord(
-								'postType',
-								template.type,
-								template.id
-							);
-						}
-					}
-					createSuccessNotice(
-						items.length > 1
-							? sprintf(
-									/* translators: The number of items. */
-									__( '%s items reset.' ),
-									items.length
-							  )
-							: sprintf(
-									/* translators: The template/part's name. */
-									__( '"%s" reset.' ),
-									decodeEntities( getItemTitle( items[ 0 ] ) )
-							  ),
-						{
-							type: 'snackbar',
-							id: 'revert-template-action',
-						}
-					);
-				}
-			} catch ( error ) {
-				let fallbackErrorMessage;
-				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
-					fallbackErrorMessage =
-						items.length === 1
-							? __(
-									'An error occurred while reverting the template.'
-							  )
-							: __(
-									'An error occurred while reverting the templates.'
-							  );
-				} else {
-					fallbackErrorMessage =
-						items.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
-						: fallbackErrorMessage;
-
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		};
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ __( 'Reset to default and clear all customizations?' ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						__experimentalIsFocusable
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							await onConfirm( items );
-							onActionPerformed?.( items );
-							setIsBusy( false );
-							closeModal();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						__experimentalIsFocusable
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
 export const duplicatePatternAction = {
 	id: 'duplicate-pattern',
 	label: _x( 'Duplicate', 'action label' ),
@@ -1004,10 +800,8 @@ export const duplicatePatternAction = {
 	modalHeader: _x( 'Duplicate pattern', 'action label' ),
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
-		const isThemePattern = item.type === PATTERN_TYPES.theme;
 		const duplicatedProps = useDuplicatePatternProps( {
-			pattern:
-				isThemePattern || ! item.patternPost ? item : item.patternPost,
+			pattern: item,
 			onSuccess: () => closeModal(),
 		} );
 		return (
@@ -1027,13 +821,21 @@ export const duplicateTemplatePartAction = {
 	modalHeader: _x( 'Duplicate template part', 'action label' ),
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
+		const blocks = useMemo( () => {
+			return (
+				item.blocks ??
+				parse( item.content.raw, {
+					__unstableSkipMigrationLogs: true,
+				} )
+			);
+		}, [ item?.content?.raw, item.blocks ] );
 		const { createSuccessNotice } = useDispatch( noticesStore );
 		function onTemplatePartSuccess() {
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
 					__( '"%s" duplicated.' ),
-					item.title
+					getItemTitle( item )
 				),
 				{ type: 'snackbar', id: 'edit-site-patterns-success' }
 			);
@@ -1041,12 +843,12 @@ export const duplicateTemplatePartAction = {
 		}
 		return (
 			<CreateTemplatePartModalContents
-				blocks={ item.blocks }
-				defaultArea={ item.templatePart?.area || item.area }
+				blocks={ blocks }
+				defaultArea={ item.area }
 				defaultTitle={ sprintf(
 					/* translators: %s: Existing template part title */
 					__( '%s (Copy)' ),
-					item.title
+					getItemTitle( item )
 				) }
 				onCreate={ onTemplatePartSuccess }
 				onError={ closeModal }
@@ -1113,13 +915,10 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
 			supportsTitle && renamePostActionForPostType,
-			isPattern && exportPatternAsJSONAction,
-			isTemplateOrTemplatePart
-				? resetTemplateAction
-				: restorePostActionForPostType,
-			isTemplateOrTemplatePart || isPattern
-				? deletePostAction
-				: trashPostActionForPostType,
+			! isTemplateOrTemplatePart && restorePostActionForPostType,
+			! isTemplateOrTemplatePart &&
+				! isPattern &&
+				trashPostActionForPostType,
 			! isTemplateOrTemplatePart &&
 				permanentlyDeletePostActionForPostType,
 			...defaultActions,
@@ -1143,12 +942,18 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 					const existingCallback = actions[ i ].callback;
 					actions[ i ] = {
 						...actions[ i ],
-						callback: ( items, { _onActionPerformed } ) => {
-							existingCallback( items, ( _items ) => {
-								if ( _onActionPerformed ) {
-									_onActionPerformed( _items );
-								}
-								onActionPerformed( actions[ i ].id, _items );
+						callback: ( items, argsObject ) => {
+							existingCallback( items, {
+								...argsObject,
+								onActionPerformed: ( _items ) => {
+									if ( argsObject.onActionPerformed ) {
+										argsObject.onActionPerformed( _items );
+									}
+									onActionPerformed(
+										actions[ i ].id,
+										_items
+									);
+								},
 							} );
 						},
 					};

package/src/components/post-actions/index.js

@@ -59,7 +59,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					disabled={ ! actions.length }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					className="editor-all-actions-button"
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )

package/src/components/post-excerpt/panel.js

@@ -173,7 +173,7 @@ function PrivateExcerpt() {
 		return false;
 	}
 	const excerptText = !! excerpt && (
-		<Text align="left" numberOfLines={ 4 } truncate>
+		<Text align="left" numberOfLines={ 4 } truncate={ allowEditing }>
 			{ decodeEntities( excerpt ) }
 		</Text>
 	);

package/src/components/post-featured-image/style.scss

@@ -20,6 +20,21 @@
 			opacity: 1;
 		}
 	}
+
+	.components-drop-zone__content {
+		border-radius: $radius-block-ui;
+	}
+
+	// Align text and icons horizontally to avoid clipping when the featured image is not set.
+	&:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+
+		.components-drop-zone__content-icon {
+			margin: 0;
+		}
+	}
 }
 
 .editor-post-featured-image__toggle,

package/src/components/post-panel-row/style.scss

@@ -25,6 +25,7 @@
 	.components-button {
 		max-width: 100%;
 		text-align: left;
+		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 		height: auto;

package/src/components/post-preview-button/index.js

@@ -183,7 +183,7 @@ export default function PostPreviewButton( {
 			className={ className || 'editor-post-preview' }
 			href={ href }
 			target={ targetId }
-			__experimentalIsFocusable
+			accessibleWhenDisabled
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }

package/src/components/post-publish-panel/index.js

@@ -93,7 +93,7 @@ export class PostPublishPanel extends Component {
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
-									__experimentalIsFocusable
+									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"

package/src/components/post-saved-state/index.js

@@ -21,6 +21,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Internal dependencies
  */
+import { STATUS_OPTIONS } from '../../components/post-status';
 import { store as editorStore } from '../../store';
 
 /**
@@ -104,10 +105,19 @@ export default function PostSavedState( { forceIsDirty } ) {
 		return null;
 	}
 
+	// We shouldn't render the button if the post has not one of the following statuses: pending, draft, auto-draft.
+	// The reason for this is that this button handles the `save as pending` and `save draft` actions.
+	// An exception for this is when the post has a custom status and there should be a way to save changes without
+	// having to publish. This should be handled better in the future when custom statuses have better support.
+	// @see https://github.com/WordPress/gutenberg/issues/3144.
+	const isIneligibleStatus =
+		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) &&
+		STATUS_OPTIONS.map( ( { value } ) => value ).includes( postStatus );
+
 	if (
 		isPublished ||
 		isScheduled ||
-		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) ||
+		isIneligibleStatus ||
 		( postStatusHasChanged &&
 			[ 'pending', 'draft' ].includes( postStatus ) )
 	) {

package/src/components/post-schedule/index.js

@@ -7,6 +7,7 @@ import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
  * WordPress dependencies
  */
 import { getSettings } from '@wordpress/date';
+import { _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
@@ -98,6 +99,10 @@ export function PrivatePostSchedule( {
 			currentDate={ postDate }
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
+			dateOrder={
+				/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+				_x( 'dmy', 'date order' )
+			}
 			events={ events }
 			onMonthPreviewed={ ( date ) =>
 				setPreviewedMonth( parseISO( date ) )

package/src/components/post-status/index.js

@@ -40,7 +40,7 @@ const labels = {
 	publish: __( 'Published' ),
 };
 
-const STATUS_OPTIONS = [
+export const STATUS_OPTIONS = [
 	{
 		label: (
 			<>

package/src/components/post-taxonomies/README.md

@@ -3,7 +3,7 @@
 `PostTaxonomies` is a component used to render the taxonomy picker
 UI. It uses the `FlatTermSelector` or `HierarchicalTermSelector` components
 based on the value of the `hierarchical` argument specified in
-[register_taxonomy](https://codex.wordpress.org/Function_Reference/register_taxonomy).
+[register_taxonomy](https://developer.wordpress.org/reference/functions/register_taxonomy).
 
 The output of the respective taxonomy components can be customized using
 the following filter:

package/src/components/post-title/index.js

@@ -85,21 +85,14 @@ function PostTitle( _, forwardedRef ) {
 		let plainText = '';
 		let html = '';
 
-		// IE11 only supports `Text` as an argument for `getData` and will
-		// otherwise throw an invalid argument error, so we try the standard
-		// arguments first, then fallback to `Text` if they fail.
 		try {
 			plainText = clipboardData.getData( 'text/plain' );
 			html = clipboardData.getData( 'text/html' );
-		} catch ( error1 ) {
-			try {
-				html = clipboardData.getData( 'Text' );
-			} catch ( error2 ) {
-				// Some browsers like UC Browser paste plain text by default and
-				// don't support clipboardData at all, so allow default
-				// behaviour.
-				return;
-			}
+		} catch ( error ) {
+			// Some browsers like UC Browser paste plain text by default and
+			// don't support clipboardData at all, so allow default
+			// behaviour.
+			return;
 		}
 
 		// Allows us to ask for this information when we get a report.