@wordpress/editor 13.35.0 → 14.0.0

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

@@ -9,6 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
 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 {
 	Button,
@@ -30,6 +31,39 @@ import {
 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';
+
+// Patterns.
+const { PATTERN_TYPES, CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+/**
+ * Check if a template is removable.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is removable.
+ */
+function isTemplateRemovable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+	// In patterns list page we map the templates parts to a different object
+	// 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
+	);
+}
+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' ) {
@@ -38,18 +72,101 @@ function getItemTitle( item ) {
 	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,
+		onActionStart,
+		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 );
+							if ( onActionStart ) {
+								onActionStart( items );
+							}
+							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',
 	label: __( 'Move to Trash' ),
 	isPrimary: true,
 	icon: trash,
-	isEligible( { status } ) {
-		return status !== 'trash';
+	isEligible( item ) {
+		return ! [ 'auto-draft', 'trash' ].includes( item.status );
 	},
 	supportsBulk: true,
 	hideModalHeader: true,
 	RenderModal: ( {
-		items: posts,
+		items,
 		closeModal,
 		onActionStart,
 		onActionPerformed,
@@ -61,20 +178,22 @@ const trashPostAction = {
 		return (
 			<VStack spacing="5">
 				<Text>
-					{ posts.length === 1
+					{ items.length === 1
 						? sprintf(
-								// translators: %s: The page's title.
-								__( 'Are you sure you want to delete "%s"?' ),
-								getItemTitle( posts[ 0 ] )
+								// translators: %s: The item's title.
+								__(
+									'Are you sure you want to move to trash "%s"?'
+								),
+								getItemTitle( items[ 0 ] )
 						  )
 						: sprintf(
-								// translators: %d: The number of pages (2 or more).
+								// translators: %d: The number of items (2 or more).
 								_n(
-									'Are you sure you want to delete %d page?',
-									'Are you sure you want to delete %d pages?',
-									posts.length
+									'Are you sure you want to move to trash %d item?',
+									'Are you sure you want to move to trash %d items?',
+									items.length
 								),
-								posts.length
+								items.length
 						  ) }
 				</Text>
 				<HStack justify="right">
@@ -91,18 +210,18 @@ const trashPostAction = {
 						onClick={ async () => {
 							setIsBusy( true );
 							if ( onActionStart ) {
-								onActionStart( posts );
+								onActionStart( items );
 							}
 							const promiseResult = await Promise.allSettled(
-								posts.map( ( post ) => {
-									return deleteEntityRecord(
+								items.map( ( item ) =>
+									deleteEntityRecord(
 										'postType',
-										post.type,
-										post.id,
+										item.type,
+										item.id,
 										{},
 										{ throwOnError: true }
-									);
-								} )
+									)
+								)
 							);
 							// If all the promises were fulfilled with success.
 							if (
@@ -113,41 +232,41 @@ const trashPostAction = {
 								let successMessage;
 								if ( promiseResult.length === 1 ) {
 									successMessage = sprintf(
-										/* translators: The posts's title. */
-										__( '"%s" moved to the Trash.' ),
-										getItemTitle( posts[ 0 ] )
+										/* translators: The item's title. */
+										__( '"%s" moved to trash.' ),
+										getItemTitle( items[ 0 ] )
 									);
-								} else if ( posts[ 0 ].type === 'page' ) {
+								} else if ( items[ 0 ].type === 'page' ) {
 									successMessage = sprintf(
-										/* translators: The number of pages. */
-										__( '%s pages moved to the Trash.' ),
-										posts.length
+										/* translators: The number of items. */
+										__( '%s items moved to trash.' ),
+										items.length
 									);
 								} else {
 									successMessage = sprintf(
 										/* translators: The number of posts. */
-										__( '%s posts moved to the Trash.' ),
-										posts.length
+										__( '%s items move to trash.' ),
+										items.length
 									);
 								}
 								createSuccessNotice( successMessage, {
 									type: 'snackbar',
-									id: 'trash-post-action',
+									id: 'move-to-trash-action',
 								} );
 							} else {
-								// If there was at lease one failure.
+								// If there was at least one failure.
 								let errorMessage;
-								// If we were trying to move a single post to the trash.
+								// If we were trying to delete a single item.
 								if ( promiseResult.length === 1 ) {
 									if ( promiseResult[ 0 ].reason?.message ) {
 										errorMessage =
 											promiseResult[ 0 ].reason.message;
 									} else {
 										errorMessage = __(
-											'An error occurred while moving the post to the trash.'
+											'An error occurred while moving to trash the item.'
 										);
 									}
-									// If we were trying to move multiple posts to the trash
+									// If we were trying to delete multiple items.
 								} else {
 									const errorMessages = new Set();
 									const failedPromises = promiseResult.filter(
@@ -162,13 +281,13 @@ const trashPostAction = {
 									}
 									if ( errorMessages.size === 0 ) {
 										errorMessage = __(
-											'An error occurred while moving the posts to the trash.'
+											'An error occurred while moving to trash the items.'
 										);
 									} else if ( errorMessages.size === 1 ) {
 										errorMessage = sprintf(
 											/* translators: %s: an error message */
 											__(
-												'An error occurred while moving the posts to the trash: %s'
+												'An error occurred while moving to trash the item: %s'
 											),
 											[ ...errorMessages ][ 0 ]
 										);
@@ -176,7 +295,7 @@ const trashPostAction = {
 										errorMessage = sprintf(
 											/* translators: %s: a list of comma separated error messages */
 											__(
-												'Some errors occurred while moving the pages to the trash: %s'
+												'Some errors occurred while moving to trash the items: %s'
 											),
 											[ ...errorMessages ].join( ',' )
 										);
@@ -187,7 +306,7 @@ const trashPostAction = {
 								} );
 							}
 							if ( onActionPerformed ) {
-								onActionPerformed( posts );
+								onActionPerformed( items );
 							}
 							setIsBusy( false );
 							closeModal();
@@ -196,7 +315,7 @@ const trashPostAction = {
 						disabled={ isBusy }
 						__experimentalIsFocusable
 					>
-						{ __( 'Delete' ) }
+						{ __( 'Trash' ) }
 					</Button>
 				</HStack>
 			</VStack>
@@ -464,8 +583,15 @@ const viewPostAction = {
 
 const postRevisionsAction = {
 	id: 'view-post-revisions',
-	label: __( 'View revisions' ),
-	isPrimary: false,
+	label( items ) {
+		const revisionsCount =
+			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return sprintf(
+			/* translators: %s: number of revisions */
+			__( 'View revisions (%s)' ),
+			revisionsCount
+		);
+	},
 	isEligible: ( post ) => {
 		if ( post.status === 'trash' ) {
 			return false;
@@ -492,7 +618,37 @@ const renamePostAction = {
 	id: 'rename-post',
 	label: __( 'Rename' ),
 	isEligible( post ) {
-		return post.status !== 'trash';
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		// Templates, template parts and patterns have special checks for renaming.
+		if (
+			! [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+				...Object.values( PATTERN_TYPES ),
+			].includes( post.type )
+		) {
+			return true;
+		}
+		// In the case of templates, we can only rename custom templates.
+		if ( post.type === TEMPLATE_POST_TYPE ) {
+			return isTemplateRemovable( post ) && post.is_custom;
+		}
+		// Make necessary checks for template parts and patterns.
+		const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE;
+		const isUserPattern = post.type === PATTERN_TYPES.user;
+		// In patterns list page we map the templates parts to a different object
+		// 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.
+		const isCustomPattern =
+			isUserPattern ||
+			( isTemplatePart &&
+				( post.isCustom || post.source === TEMPLATE_ORIGINS.custom ) );
+		const hasThemeFile =
+			isTemplatePart &&
+			( post.templatePart?.has_theme_file || post.has_theme_file );
+		return isCustomPattern && ! hasThemeFile;
 	},
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
@@ -680,10 +836,22 @@ const duplicatePostAction = {
 	},
 };
 
+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: isTemplateRevertable,
+	isEligible: ( item ) => {
+		return item.type === TEMPLATE_PART_POST_TYPE
+			? isTemplatePartRevertable( item )
+			: isTemplateRevertable( item );
+	},
 	icon: backup,
 	supportsBulk: true,
 	hideModalHeader: true,
@@ -694,40 +862,47 @@ const resetTemplateAction = {
 		onActionPerformed,
 	} ) => {
 		const [ isBusy, setIsBusy ] = useState( false );
-		const { revertTemplate } = unlock( useDispatch( editorStore ) );
+		const { revertTemplate, removeTemplates } = unlock(
+			useDispatch( editorStore )
+		);
 		const { saveEditedEntityRecord } = useDispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } =
 			useDispatch( noticesStore );
 		const onConfirm = async () => {
 			try {
-				for ( const template of items ) {
-					await revertTemplate( template, {
-						allowUndo: false,
-					} );
-					await saveEditedEntityRecord(
-						'postType',
-						template.type,
-						template.id
+				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',
+						}
 					);
 				}
-
-				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( items[ 0 ].title.rendered )
-						  ),
-					{
-						type: 'snackbar',
-						id: 'revert-template-action',
-					}
-				);
 			} catch ( error ) {
 				let fallbackErrorMessage;
 				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
@@ -780,8 +955,8 @@ const resetTemplateAction = {
 							}
 							await onConfirm( items );
 							onActionPerformed?.( items );
+							setIsBusy( false );
 							closeModal();
-							isBusy( false );
 						} }
 						isBusy={ isBusy }
 						disabled={ isBusy }
@@ -795,195 +970,61 @@ const resetTemplateAction = {
 	},
 };
 
-/**
- * Check if a template is removable.
- * Copy from packages/edit-site/src/utils/is-template-removable.js.
- *
- * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is revertable.
- */
-function isTemplateRemovable( template ) {
-	if ( ! template ) {
-		return false;
-	}
-
-	return (
-		template.source === TEMPLATE_ORIGINS.custom && ! template.has_theme_file
-	);
-}
-
-const deleteTemplateAction = {
-	id: 'delete-template',
-	label: __( 'Delete' ),
-	isEligible: isTemplateRemovable,
-	icon: trash,
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( {
-		items: templates,
-		closeModal,
-		onActionStart,
-		onActionPerformed,
-	} ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { removeTemplates } = unlock( useDispatch( editorStore ) );
+export const duplicatePatternAction = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
+	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,
+			onSuccess: () => closeModal(),
+		} );
 		return (
-			<VStack spacing="5">
-				<Text>
-					{ templates.length > 1
-						? sprintf(
-								// translators: %d: number of items to delete.
-								_n(
-									'Delete %d item?',
-									'Delete %d items?',
-									templates.length
-								),
-								templates.length
-						  )
-						: sprintf(
-								// translators: %s: The template or template part's titles
-								__( 'Delete "%s"?' ),
-								decodeEntities(
-									templates?.[ 0 ]?.title?.rendered
-								)
-						  ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						__experimentalIsFocusable
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							if ( onActionStart ) {
-								onActionStart( templates );
-							}
-							await removeTemplates( templates, {
-								allowUndo: false,
-							} );
-							onActionPerformed?.( templates );
-							setIsBusy( false );
-							closeModal();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						__experimentalIsFocusable
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
 		);
 	},
 };
 
-const renameTemplateAction = {
-	id: 'rename-template',
-	label: __( 'Rename' ),
-	isEligible: ( template ) => {
-		// We can only remove templates or template parts that can be removed.
-		// Additionally in the case of templates, we can only remove custom templates.
-		if (
-			! isTemplateRemovable( template ) ||
-			( template.type === TEMPLATE_POST_TYPE && ! template.is_custom )
-		) {
-			return false;
-		}
-		return true;
-	},
-	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
-		const template = templates[ 0 ];
-		const title = decodeEntities( template.title.rendered );
-		const [ editedTitle, setEditedTitle ] = useState( title );
-		const {
-			editEntityRecord,
-			__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-		} = useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		async function onTemplateRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord(
-					'postType',
-					template.type,
-					template.id,
-					{
-						title: editedTitle,
-					}
-				);
-				// Update state before saving rerenders the list.
-				setEditedTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveSpecifiedEntityEdits(
-					'postType',
-					template.type,
-					template.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',
-					}
-				);
-				onActionPerformed?.( templates );
-			} 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;
-
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
+export const duplicateTemplatePartAction = {
+	id: 'duplicate-template-part',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
+	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		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
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			closeModal();
 		}
 		return (
-			<form onSubmit={ onTemplateRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ editedTitle }
-						onChange={ setEditedTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							variant="tertiary"
-							onClick={ closeModal }
-							__next40pxDefaultSize
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							__next40pxDefaultSize
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
+			<CreateTemplatePartModalContents
+				blocks={ item.blocks }
+				defaultArea={ item.templatePart?.area || item.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					item.title
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+			/>
 		);
 	},
 };
@@ -1007,26 +1048,29 @@ export function usePostActions( postType, onActionPerformed ) {
 	].includes( postType );
 	const isPattern = postType === PATTERN_POST_TYPE;
 	const isLoaded = !! postTypeObject;
+	const supportsRevisions = !! postTypeObject?.supports?.revisions;
 	return useMemo( () => {
 		if ( ! isLoaded ) {
 			return [];
 		}
 
 		const actions = [
-			isTemplateOrTemplatePart && resetTemplateAction,
 			postTypeObject?.viewable && viewPostAction,
-			! isTemplateOrTemplatePart && restorePostAction,
-			isTemplateOrTemplatePart && deleteTemplateAction,
-			! isTemplateOrTemplatePart && permanentlyDeletePostAction,
-			postRevisionsAction,
-			process.env.IS_GUTENBERG_PLUGIN
+			supportsRevisions && postRevisionsAction,
+			globalThis.IS_GUTENBERG_PLUGIN
 				? ! isTemplateOrTemplatePart &&
 				  ! isPattern &&
 				  duplicatePostAction
 				: false,
-			! isTemplateOrTemplatePart && renamePostAction,
-			isTemplateOrTemplatePart && renameTemplateAction,
-			! isTemplateOrTemplatePart && trashPostAction,
+			isTemplateOrTemplatePart && duplicateTemplatePartAction,
+			isPattern && duplicatePatternAction,
+			renamePostAction,
+			isPattern && exportPatternAsJSONAction,
+			isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction,
+			isTemplateOrTemplatePart || isPattern
+				? deletePostAction
+				: trashPostAction,
+			! isTemplateOrTemplatePart && permanentlyDeletePostAction,
 		].filter( Boolean );
 
 		if ( onActionPerformed ) {
@@ -1079,5 +1123,6 @@ export function usePostActions( postType, onActionPerformed ) {
 		restorePostAction,
 		onActionPerformed,
 		isLoaded,
+		supportsRevisions,
 	] );
 }