@wordpress/editor 13.33.0 → 13.35.0

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

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { external, trash, edit, backup } from '@wordpress/icons';
+import { external, trash, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, useState } from '@wordpress/element';
 
@@ -21,7 +21,12 @@ import {
 /**
  * Internal dependencies
  */
-import { TEMPLATE_ORIGINS, TEMPLATE_POST_TYPE } from '../../store/constants';
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+	PATTERN_POST_TYPE,
+} from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import isTemplateRevertable from '../../store/utils/is-template-revertable';
@@ -43,7 +48,13 @@ const trashPostAction = {
 	},
 	supportsBulk: true,
 	hideModalHeader: true,
-	RenderModal: ( { items: posts, closeModal, onActionPerformed } ) => {
+	RenderModal: ( {
+		items: posts,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	} ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
 		const { createSuccessNotice, createErrorNotice } =
 			useDispatch( noticesStore );
 		const { deleteEntityRecord } = useDispatch( coreStore );
@@ -67,12 +78,21 @@ const trashPostAction = {
 						  ) }
 				</Text>
 				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						__experimentalIsFocusable
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
 						variant="primary"
 						onClick={ async () => {
+							setIsBusy( true );
+							if ( onActionStart ) {
+								onActionStart( posts );
+							}
 							const promiseResult = await Promise.allSettled(
 								posts.map( ( post ) => {
 									return deleteEntityRecord(
@@ -97,14 +117,22 @@ const trashPostAction = {
 										__( '"%s" moved to the Trash.' ),
 										getItemTitle( posts[ 0 ] )
 									);
+								} else if ( posts[ 0 ].type === 'page' ) {
+									successMessage = sprintf(
+										/* translators: The number of pages. */
+										__( '%s pages moved to the Trash.' ),
+										posts.length
+									);
 								} else {
-									successMessage = __(
-										'Pages moved to the Trash.'
+									successMessage = sprintf(
+										/* translators: The number of posts. */
+										__( '%s posts moved to the Trash.' ),
+										posts.length
 									);
 								}
 								createSuccessNotice( successMessage, {
 									type: 'snackbar',
-									id: 'edit-site-page-trashed',
+									id: 'trash-post-action',
 								} );
 							} else {
 								// If there was at lease one failure.
@@ -161,8 +189,12 @@ const trashPostAction = {
 							if ( onActionPerformed ) {
 								onActionPerformed( posts );
 							}
+							setIsBusy( false );
 							closeModal();
 						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						__experimentalIsFocusable
 					>
 						{ __( 'Delete' ) }
 					</Button>
@@ -217,7 +249,7 @@ function usePermanentlyDeletePostAction() {
 					}
 					createSuccessNotice( successMessage, {
 						type: 'snackbar',
-						id: 'edit-site-post-permanently-deleted',
+						id: 'permanently-delete-post-action',
 					} );
 					if ( onActionPerformed ) {
 						onActionPerformed( posts );
@@ -296,9 +328,9 @@ function useRestorePostAction() {
 				return status === 'trash';
 			},
 			async callback( posts, onActionPerformed ) {
-				try {
-					for ( const post of posts ) {
-						await editEntityRecord(
+				await Promise.allSettled(
+					posts.map( ( post ) => {
+						return editEntityRecord(
 							'postType',
 							post.type,
 							post.id,
@@ -306,53 +338,101 @@ function useRestorePostAction() {
 								status: 'draft',
 							}
 						);
-						await saveEditedEntityRecord(
+					} )
+				);
+				const promiseResult = await Promise.allSettled(
+					posts.map( ( post ) => {
+						return saveEditedEntityRecord(
 							'postType',
 							post.type,
 							post.id,
 							{ throwOnError: true }
 						);
-					}
+					} )
+				);
 
-					createSuccessNotice(
-						posts.length > 1
-							? sprintf(
-									/* translators: The number of posts. */
-									__( '%d posts have been restored.' ),
-									posts.length
-							  )
-							: sprintf(
-									/* translators: The number of posts. */
-									__( '"%s" has been restored.' ),
-									getItemTitle( posts[ 0 ] )
-							  ),
-						{
-							type: 'snackbar',
-							id: 'edit-site-post-restored',
-						}
-					);
+				if (
+					promiseResult.every(
+						( { status } ) => status === 'fulfilled'
+					)
+				) {
+					let successMessage;
+					if ( posts.length === 1 ) {
+						successMessage = sprintf(
+							/* translators: The number of posts. */
+							__( '"%s" has been restored.' ),
+							getItemTitle( posts[ 0 ] )
+						);
+					} else if ( posts[ 0 ].type === 'page' ) {
+						successMessage = sprintf(
+							/* translators: The number of posts. */
+							__( '%d pages have been restored.' ),
+							posts.length
+						);
+					} else {
+						successMessage = sprintf(
+							/* translators: The number of posts. */
+							__( '%d posts have been restored.' ),
+							posts.length
+						);
+					}
+					createSuccessNotice( successMessage, {
+						type: 'snackbar',
+						id: 'restore-post-action',
+					} );
 					if ( onActionPerformed ) {
 						onActionPerformed( posts );
 					}
-				} catch ( error ) {
+				} else {
+					// If there was at lease one failure.
 					let errorMessage;
-					if (
-						error.message &&
-						error.code !== 'unknown_error' &&
-						error.message
-					) {
-						errorMessage = error.message;
-					} else if ( posts.length > 1 ) {
-						errorMessage = __(
-							'An error occurred while restoring the posts.'
-						);
+					// If we were trying to move a single post to the trash.
+					if ( promiseResult.length === 1 ) {
+						if ( promiseResult[ 0 ].reason?.message ) {
+							errorMessage = promiseResult[ 0 ].reason.message;
+						} else {
+							errorMessage = __(
+								'An error occurred while restoring the post.'
+							);
+						}
+						// If we were trying to move multiple posts to the trash
 					} else {
-						errorMessage = __(
-							'An error occurred while restoring the post.'
+						const errorMessages = new Set();
+						const failedPromises = promiseResult.filter(
+							( { status } ) => status === 'rejected'
 						);
+						for ( const failedPromise of failedPromises ) {
+							if ( failedPromise.reason?.message ) {
+								errorMessages.add(
+									failedPromise.reason.message
+								);
+							}
+						}
+						if ( errorMessages.size === 0 ) {
+							errorMessage = __(
+								'An error occurred while restoring the posts.'
+							);
+						} else if ( errorMessages.size === 1 ) {
+							errorMessage = sprintf(
+								/* translators: %s: an error message */
+								__(
+									'An error occurred while restoring the posts: %s'
+								),
+								[ ...errorMessages ][ 0 ]
+							);
+						} else {
+							errorMessage = sprintf(
+								/* translators: %s: a list of comma separated error messages */
+								__(
+									'Some errors occurred while restoring the posts: %s'
+								),
+								[ ...errorMessages ].join( ',' )
+							);
+						}
 					}
-
-					createErrorNotice( errorMessage, { type: 'snackbar' } );
+					createErrorNotice( errorMessage, {
+						type: 'snackbar',
+					} );
 				}
 			},
 		} ),
@@ -382,20 +462,6 @@ const viewPostAction = {
 	},
 };
 
-const editPostAction = {
-	id: 'edit-post',
-	label: __( 'Edit' ),
-	isPrimary: true,
-	icon: edit,
-	isEligible( { status } ) {
-		return status !== 'trash';
-	},
-	callback( posts, onActionPerformed ) {
-		if ( onActionPerformed ) {
-			onActionPerformed( posts );
-		}
-	},
-};
 const postRevisionsAction = {
 	id: 'view-post-revisions',
 	label: __( 'View revisions' ),
@@ -500,13 +566,134 @@ const renamePostAction = {
 	},
 };
 
+const duplicatePostAction = {
+	id: 'duplicate-post',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		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 } =
+			useDispatch( noticesStore );
+
+		async function createPage( event ) {
+			event.preventDefault();
+
+			if ( isCreatingPage ) {
+				return;
+			}
+			setIsCreatingPage( true );
+			try {
+				const newItem = await saveEntityRecord(
+					'postType',
+					item.type,
+					{
+						status: 'draft',
+						title,
+						slug: title || __( 'No title' ),
+						author: item.author,
+						comment_status: item.comment_status,
+						content:
+							typeof item.content === 'string'
+								? item.content
+								: item.content.raw,
+						excerpt: item.excerpt.raw,
+						meta: item.meta,
+						parent: item.parent,
+						password: item.password,
+						template: item.template,
+						format: item.format,
+						featured_media: item.featured_media,
+						menu_order: item.menu_order,
+						ping_status: item.ping_status,
+						categories: item.categories,
+						tags: item.tags,
+					},
+					{ throwOnError: true }
+				);
+
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: Title of the created template e.g: "Category".
+						__( '"%s" successfully created.' ),
+						newItem.title?.rendered || title
+					),
+					{
+						id: 'duplicate-post-action',
+						type: 'snackbar',
+					}
+				);
+
+				if ( onActionPerformed ) {
+					onActionPerformed( [ newItem ] );
+				}
+			} catch ( error ) {
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: __( 'An error occurred while duplicating the page.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				setIsCreatingPage( false );
+				closeModal();
+			}
+		}
+		return (
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<TextControl
+						label={ __( 'Title' ) }
+						onChange={ setTitle }
+						placeholder={ __( 'No title' ) }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button variant="tertiary" onClick={ closeModal }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+						>
+							{ _x( 'Duplicate', 'action label' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
 const resetTemplateAction = {
 	id: 'reset-template',
 	label: __( 'Reset' ),
 	isEligible: isTemplateRevertable,
+	icon: backup,
 	supportsBulk: true,
 	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	} ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
 		const { revertTemplate } = unlock( useDispatch( editorStore ) );
 		const { saveEditedEntityRecord } = useDispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } =
@@ -538,7 +725,7 @@ const resetTemplateAction = {
 						  ),
 					{
 						type: 'snackbar',
-						id: 'edit-site-template-reverted',
+						id: 'revert-template-action',
 					}
 				);
 			} catch ( error ) {
@@ -576,16 +763,29 @@ const resetTemplateAction = {
 					{ __( 'Reset to default and clear all customizations?' ) }
 				</Text>
 				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						__experimentalIsFocusable
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
 						variant="primary"
 						onClick={ async () => {
+							setIsBusy( true );
+							if ( onActionStart ) {
+								onActionStart( items );
+							}
 							await onConfirm( items );
 							onActionPerformed?.( items );
 							closeModal();
+							isBusy( false );
 						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						__experimentalIsFocusable
 					>
 						{ __( 'Reset' ) }
 					</Button>
@@ -616,9 +816,16 @@ const deleteTemplateAction = {
 	id: 'delete-template',
 	label: __( 'Delete' ),
 	isEligible: isTemplateRemovable,
+	icon: trash,
 	supportsBulk: true,
 	hideModalHeader: true,
-	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
+	RenderModal: ( {
+		items: templates,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	} ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
 		const { removeTemplates } = unlock( useDispatch( editorStore ) );
 		return (
 			<VStack spacing="5">
@@ -642,18 +849,31 @@ const deleteTemplateAction = {
 						  ) }
 				</Text>
 				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
+					<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>
@@ -768,95 +988,96 @@ const renameTemplateAction = {
 	},
 };
 
-export function usePostActions( onActionPerformed, actionIds = null ) {
+export function usePostActions( postType, onActionPerformed ) {
+	const { postTypeObject } = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return {
+				postTypeObject: getPostType( postType ),
+			};
+		},
+		[ postType ]
+	);
+
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
 	const restorePostAction = useRestorePostAction();
-	return useMemo(
-		() => {
-			// By default, return all actions...
-			const defaultActions = [
-				editPostAction,
-				resetTemplateAction,
-				viewPostAction,
-				restorePostAction,
-				deleteTemplateAction,
-				permanentlyDeletePostAction,
-				postRevisionsAction,
-				renamePostAction,
-				renameTemplateAction,
-				trashPostAction,
-			];
-
-			// ... unless `actionIds` was specified, in which case we find the
-			// actions matching the given IDs.
-			const actions = actionIds
-				? actionIds.map( ( actionId ) =>
-						defaultActions.find( ( { id } ) => actionId === id )
-				  )
-				: defaultActions;
-
-			if ( onActionPerformed ) {
-				for ( let i = 0; i < actions.length; ++i ) {
-					if ( actions[ i ].callback ) {
-						const existingCallback = actions[ i ].callback;
-						actions[ i ] = {
-							...actions[ i ],
-							callback: ( items, _onActionPerformed ) => {
-								existingCallback( items, ( _items ) => {
-									if ( _onActionPerformed ) {
-										_onActionPerformed( _items );
-									}
-									onActionPerformed(
-										actions[ i ].id,
-										_items
-									);
-								} );
-							},
-						};
-					}
-					if ( actions[ i ].RenderModal ) {
-						const ExistingRenderModal = actions[ i ].RenderModal;
-						actions[ i ] = {
-							...actions[ i ],
-							RenderModal: ( props ) => {
-								return (
-									<ExistingRenderModal
-										items={ props.items }
-										closeModal={ props.closeModal }
-										onActionPerformed={ ( _items ) => {
-											if ( props.onActionPerformed ) {
-												props.onActionPerformed(
-													_items
-												);
-											}
-											onActionPerformed(
-												actions[ i ].id,
-												_items
-											);
-										} }
-									/>
-								);
-							},
-						};
-					}
+	const isTemplateOrTemplatePart = [
+		TEMPLATE_POST_TYPE,
+		TEMPLATE_PART_POST_TYPE,
+	].includes( postType );
+	const isPattern = postType === PATTERN_POST_TYPE;
+	const isLoaded = !! postTypeObject;
+	return useMemo( () => {
+		if ( ! isLoaded ) {
+			return [];
+		}
+
+		const actions = [
+			isTemplateOrTemplatePart && resetTemplateAction,
+			postTypeObject?.viewable && viewPostAction,
+			! isTemplateOrTemplatePart && restorePostAction,
+			isTemplateOrTemplatePart && deleteTemplateAction,
+			! isTemplateOrTemplatePart && permanentlyDeletePostAction,
+			postRevisionsAction,
+			process.env.IS_GUTENBERG_PLUGIN
+				? ! isTemplateOrTemplatePart &&
+				  ! isPattern &&
+				  duplicatePostAction
+				: false,
+			! isTemplateOrTemplatePart && renamePostAction,
+			isTemplateOrTemplatePart && renameTemplateAction,
+			! isTemplateOrTemplatePart && trashPostAction,
+		].filter( Boolean );
+
+		if ( onActionPerformed ) {
+			for ( let i = 0; i < actions.length; ++i ) {
+				if ( actions[ i ].callback ) {
+					const existingCallback = actions[ i ].callback;
+					actions[ i ] = {
+						...actions[ i ],
+						callback: ( items, _onActionPerformed ) => {
+							existingCallback( items, ( _items ) => {
+								if ( _onActionPerformed ) {
+									_onActionPerformed( _items );
+								}
+								onActionPerformed( actions[ i ].id, _items );
+							} );
+						},
+					};
+				}
+				if ( actions[ i ].RenderModal ) {
+					const ExistingRenderModal = actions[ i ].RenderModal;
+					actions[ i ] = {
+						...actions[ i ],
+						RenderModal: ( props ) => {
+							return (
+								<ExistingRenderModal
+									{ ...props }
+									onActionPerformed={ ( _items ) => {
+										if ( props.onActionPerformed ) {
+											props.onActionPerformed( _items );
+										}
+										onActionPerformed(
+											actions[ i ].id,
+											_items
+										);
+									} }
+								/>
+							);
+						},
+					};
 				}
 			}
-			return actions;
-		},
+		}
 
-		// Disable reason: if provided, `actionIds` is a shallow array of
-		// strings, and the strings themselves should be part of the useMemo
-		// dependencies. Two different disable statements are needed, as the
-		// first flags what it thinks are missing dependencies, and the second
-		// flags the array spread operation.
-		//
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-			...( actionIds || [] ),
-			permanentlyDeletePostAction,
-			restorePostAction,
-			onActionPerformed,
-		]
-	);
+		return actions;
+	}, [
+		isTemplateOrTemplatePart,
+		isPattern,
+		postTypeObject?.viewable,
+		permanentlyDeletePostAction,
+		restorePostAction,
+		onActionPerformed,
+		isLoaded,
+	] );
 }