@wordpress/editor 14.3.0 → 14.5.0

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

@@ -1,21 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { external, trash, backup } from '@wordpress/icons';
+import { external } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
-import { useDispatch, useSelect, useRegistry } 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, _x } from '@wordpress/i18n';
+import { __, sprintf, _x } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useEffect } from '@wordpress/element';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { parse } from '@wordpress/blocks';
-import { DataForm } from '@wordpress/dataviews';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
 import {
 	Button,
 	TextControl,
-	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -38,19 +37,29 @@ import { getItemTitle } from '../../dataviews/actions/utils';
 const { PATTERN_TYPES, CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
-// TODO: this should be shared with other components (page-pages).
+// TODO: this should be shared with other components (see post-fields in edit-site).
 const fields = [
 	{
 		type: 'text',
-		header: __( 'Title' ),
 		id: 'title',
+		label: __( 'Title' ),
 		placeholder: __( 'No title' ),
 		getValue: ( { item } ) => item.title,
 	},
+	{
+		type: 'integer',
+		id: 'menu_order',
+		label: __( 'Order' ),
+		description: __( 'Determines the order of pages.' ),
+	},
 ];
 
-const form = {
-	visibleFields: [ 'title' ],
+const formDuplicateAction = {
+	fields: [ 'title' ],
+};
+
+const formOrderAction = {
+	fields: [ 'menu_order' ],
 };
 
 /**
@@ -72,404 +81,6 @@ function isTemplateRemovable( template ) {
 	);
 }
 
-const trashPostAction = {
-	id: 'move-to-trash',
-	label: __( 'Move to Trash' ),
-	isPrimary: true,
-	icon: trash,
-	isEligible( item ) {
-		return ! [ 'auto-draft', 'trash' ].includes( item.status );
-	},
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		const { deleteEntityRecord } = useDispatch( coreStore );
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ items.length === 1
-						? sprintf(
-								// 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 items (2 or more).
-								_n(
-									'Are you sure you want to move to trash %d item?',
-									'Are you sure you want to move to trash %d items?',
-									items.length
-								),
-								items.length
-						  ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							const promiseResult = await Promise.allSettled(
-								items.map( ( item ) =>
-									deleteEntityRecord(
-										'postType',
-										item.type,
-										item.id,
-										{},
-										{ throwOnError: true }
-									)
-								)
-							);
-							// If all the promises were fulfilled with success.
-							if (
-								promiseResult.every(
-									( { status } ) => status === 'fulfilled'
-								)
-							) {
-								let successMessage;
-								if ( promiseResult.length === 1 ) {
-									successMessage = sprintf(
-										/* translators: The item's title. */
-										__( '"%s" moved to trash.' ),
-										getItemTitle( items[ 0 ] )
-									);
-								} else {
-									successMessage = sprintf(
-										/* translators: The number of items. */
-										_n(
-											'%s item moved to trash.',
-											'%s items moved to trash.',
-											items.length
-										),
-										items.length
-									);
-								}
-								createSuccessNotice( successMessage, {
-									type: 'snackbar',
-									id: 'move-to-trash-action',
-								} );
-							} else {
-								// If there was at least one failure.
-								let errorMessage;
-								// 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 to trash the item.'
-										);
-									}
-									// If we were trying to delete multiple items.
-								} else {
-									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 moving to trash the items.'
-										);
-									} else if ( errorMessages.size === 1 ) {
-										errorMessage = sprintf(
-											/* translators: %s: an error message */
-											__(
-												'An error occurred while moving to trash the item: %s'
-											),
-											[ ...errorMessages ][ 0 ]
-										);
-									} else {
-										errorMessage = sprintf(
-											/* translators: %s: a list of comma separated error messages */
-											__(
-												'Some errors occurred while moving to trash the items: %s'
-											),
-											[ ...errorMessages ].join( ',' )
-										);
-									}
-								}
-								createErrorNotice( errorMessage, {
-									type: 'snackbar',
-								} );
-							}
-							if ( onActionPerformed ) {
-								onActionPerformed( items );
-							}
-							setIsBusy( false );
-							closeModal();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Trash' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-function useCanUserEligibilityCheckPostType( capability, resource, action ) {
-	const registry = useRegistry();
-	return useMemo(
-		() => ( {
-			...action,
-			isEligible( item ) {
-				return (
-					action.isEligible( item ) &&
-					registry
-						.select( coreStore )
-						.canUser( capability, resource, item.id )
-				);
-			},
-		} ),
-		[ action, registry, capability, resource ]
-	);
-}
-
-function useTrashPostAction( resource ) {
-	return useCanUserEligibilityCheckPostType(
-		'delete',
-		resource,
-		trashPostAction
-	);
-}
-
-const permanentlyDeletePostAction = {
-	id: 'permanently-delete',
-	label: __( 'Permanently delete' ),
-	supportsBulk: true,
-	isEligible( { status } ) {
-		return status === 'trash';
-	},
-	async callback( posts, { registry, onActionPerformed } ) {
-		const { createSuccessNotice, createErrorNotice } =
-			registry.dispatch( noticesStore );
-		const { deleteEntityRecord } = registry.dispatch( coreStore );
-		const promiseResult = await Promise.allSettled(
-			posts.map( ( post ) => {
-				return deleteEntityRecord(
-					'postType',
-					post.type,
-					post.id,
-					{ force: true },
-					{ throwOnError: true }
-				);
-			} )
-		);
-		// If all the promises were fulfilled with success.
-		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
-			let successMessage;
-			if ( promiseResult.length === 1 ) {
-				successMessage = sprintf(
-					/* translators: The posts's title. */
-					__( '"%s" permanently deleted.' ),
-					getItemTitle( posts[ 0 ] )
-				);
-			} else {
-				successMessage = __( 'The posts were permanently deleted.' );
-			}
-			createSuccessNotice( successMessage, {
-				type: 'snackbar',
-				id: 'permanently-delete-post-action',
-			} );
-			onActionPerformed?.( posts );
-		} else {
-			// If there was at lease one failure.
-			let errorMessage;
-			// If we were trying to permanently delete a single post.
-			if ( promiseResult.length === 1 ) {
-				if ( promiseResult[ 0 ].reason?.message ) {
-					errorMessage = promiseResult[ 0 ].reason.message;
-				} else {
-					errorMessage = __(
-						'An error occurred while permanently deleting the post.'
-					);
-				}
-				// If we were trying to permanently delete multiple posts
-			} else {
-				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 permanently deleting the posts.'
-					);
-				} else if ( errorMessages.size === 1 ) {
-					errorMessage = sprintf(
-						/* translators: %s: an error message */
-						__(
-							'An error occurred while permanently deleting the posts: %s'
-						),
-						[ ...errorMessages ][ 0 ]
-					);
-				} else {
-					errorMessage = sprintf(
-						/* translators: %s: a list of comma separated error messages */
-						__(
-							'Some errors occurred while permanently deleting the posts: %s'
-						),
-						[ ...errorMessages ].join( ',' )
-					);
-				}
-			}
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	},
-};
-
-function usePermanentlyDeletePostAction( resource ) {
-	return useCanUserEligibilityCheckPostType(
-		'delete',
-		resource,
-		permanentlyDeletePostAction
-	);
-}
-
-const restorePostAction = {
-	id: 'restore',
-	label: __( 'Restore' ),
-	isPrimary: true,
-	icon: backup,
-	supportsBulk: true,
-	isEligible( { status } ) {
-		return status === 'trash';
-	},
-	async callback( posts, { registry, onActionPerformed } ) {
-		const { createSuccessNotice, createErrorNotice } =
-			registry.dispatch( noticesStore );
-		const { editEntityRecord, saveEditedEntityRecord } =
-			registry.dispatch( coreStore );
-		await Promise.allSettled(
-			posts.map( ( post ) => {
-				return editEntityRecord( 'postType', post.type, post.id, {
-					status: 'draft',
-				} );
-			} )
-		);
-		const promiseResult = await Promise.allSettled(
-			posts.map( ( post ) => {
-				return saveEditedEntityRecord( 'postType', post.type, post.id, {
-					throwOnError: true,
-				} );
-			} )
-		);
-
-		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 );
-			}
-		} else {
-			// If there was at lease one failure.
-			let errorMessage;
-			// 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 {
-				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',
-			} );
-		}
-	},
-};
-
-function useRestorePostAction( resource ) {
-	return useCanUserEligibilityCheckPostType(
-		'update',
-		resource,
-		restorePostAction
-	);
-}
-
 const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
@@ -536,11 +147,15 @@ const renamePostAction = {
 				...Object.values( PATTERN_TYPES ),
 			].includes( post.type )
 		) {
-			return true;
+			return post.permissions?.update;
 		}
 		// In the case of templates, we can only rename custom templates.
 		if ( post.type === TEMPLATE_POST_TYPE ) {
-			return isTemplateRemovable( post ) && post.is_custom;
+			return (
+				isTemplateRemovable( post ) &&
+				post.is_custom &&
+				post.permissions?.update
+			);
 		}
 		// Make necessary checks for template parts and patterns.
 		const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE;
@@ -552,7 +167,7 @@ const renamePostAction = {
 			isUserPattern ||
 			( isTemplatePart && post.source === TEMPLATE_ORIGINS.custom );
 		const hasThemeFile = post?.has_theme_file;
-		return isCustomPattern && ! hasThemeFile;
+		return isCustomPattern && ! hasThemeFile && post.permissions?.update;
 	},
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
@@ -623,22 +238,117 @@ const renamePostAction = {
 	},
 };
 
-function useRenamePostAction( resource ) {
-	return useCanUserEligibilityCheckPostType(
-		'update',
-		resource,
-		renamePostAction
+function ReorderModal( { items, closeModal, onActionPerformed } ) {
+	const [ item, setItem ] = useState( items[ 0 ] );
+	const orderInput = item.menu_order;
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onOrder( event ) {
+		event.preventDefault();
+
+		if ( ! isItemValid( item, fields, formOrderAction ) ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, {
+				menu_order: orderInput,
+			} );
+			closeModal();
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Order updated' ), {
+				type: 'snackbar',
+			} );
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the order' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
+	return (
+		<form onSubmit={ onOrder }>
+			<VStack spacing="5">
+				<div>
+					{ __(
+						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
+					) }
+				</div>
+				<DataForm
+					data={ item }
+					fields={ fields }
+					form={ formOrderAction }
+					onChange={ setItem }
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ isSaveDisabled }
+						__experimentalIsFocusable
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+function useReorderPagesAction( postType ) {
+	const supportsPageAttributes = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			const postTypeObject = getPostType( postType );
+
+			return !! postTypeObject?.supports?.[ 'page-attributes' ];
+		},
+		[ postType ]
+	);
+
+	return useMemo(
+		() =>
+			supportsPageAttributes && {
+				id: 'order-pages',
+				label: __( 'Order' ),
+				isEligible( { status } ) {
+					return status !== 'trash';
+				},
+				RenderModal: ReorderModal,
+			},
+		[ supportsPageAttributes ]
 	);
 }
 
 const useDuplicatePostAction = ( postType ) => {
-	const { userCanCreatePost } = useSelect(
+	const userCanCreatePost = useSelect(
 		( select ) => {
-			const { getPostType, canUser } = select( coreStore );
-			const resource = getPostType( postType )?.rest_base || '';
-			return {
-				userCanCreatePost: canUser( 'create', resource ),
-			};
+			return select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: postType,
+			} );
 		},
 		[ postType ]
 	);
@@ -763,7 +473,7 @@ const useDuplicatePostAction = ( postType ) => {
 								<DataForm
 									data={ item }
 									fields={ fields }
-									form={ form }
+									form={ formDuplicateAction }
 									onChange={ setItem }
 								/>
 								<HStack spacing={ 2 } justify="end">
@@ -824,11 +534,16 @@ export const duplicateTemplatePartAction = {
 		const blocks = useMemo( () => {
 			return (
 				item.blocks ??
-				parse( item.content.raw, {
-					__unstableSkipMigrationLogs: true,
-				} )
+				parse(
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				)
 			);
-		}, [ item?.content?.raw, item.blocks ] );
+		}, [ item.content, item.blocks ] );
 		const { createSuccessNotice } = useDispatch( noticesStore );
 		function onTemplatePartSuccess() {
 			createSuccessNotice(
@@ -859,36 +574,28 @@ export const duplicateTemplatePartAction = {
 };
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
-	const {
-		defaultActions,
-		postTypeObject,
-		userCanCreatePostType,
-		resource,
-		cachedCanUserResolvers,
-	} = useSelect(
+	const { defaultActions, postTypeObject, userCanCreatePostType } = useSelect(
 		( select ) => {
-			const { getPostType, canUser, getCachedResolvers } =
-				select( coreStore );
+			const { getPostType, canUser } = select( coreStore );
 			const { getEntityActions } = unlock( select( editorStore ) );
-			const _postTypeObject = getPostType( postType );
-			const _resource = _postTypeObject?.rest_base || '';
 			return {
-				postTypeObject: _postTypeObject,
+				postTypeObject: getPostType( postType ),
 				defaultActions: getEntityActions( 'postType', postType ),
-				userCanCreatePostType: canUser( 'create', _resource ),
-				resource: _resource,
-				cachedCanUserResolvers: getCachedResolvers()?.canUser,
+				userCanCreatePostType: canUser( 'create', {
+					kind: 'postType',
+					name: postType,
+				} ),
 			};
 		},
 		[ postType ]
 	);
+	const { registerPostTypeActions } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		registerPostTypeActions( postType );
+	}, [ registerPostTypeActions, postType ] );
 
 	const duplicatePostAction = useDuplicatePostAction( postType );
-	const trashPostActionForPostType = useTrashPostAction( resource );
-	const permanentlyDeletePostActionForPostType =
-		usePermanentlyDeletePostAction( resource );
-	const renamePostActionForPostType = useRenamePostAction( resource );
-	const restorePostActionForPostType = useRestorePostAction( resource );
+	const reorderPagesAction = useReorderPagesAction( postType );
 	const isTemplateOrTemplatePart = [
 		TEMPLATE_POST_TYPE,
 		TEMPLATE_PART_POST_TYPE,
@@ -914,13 +621,8 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				userCanCreatePostType &&
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
-			supportsTitle && renamePostActionForPostType,
-			! isTemplateOrTemplatePart && restorePostActionForPostType,
-			! isTemplateOrTemplatePart &&
-				! isPattern &&
-				trashPostActionForPostType,
-			! isTemplateOrTemplatePart &&
-				permanentlyDeletePostActionForPostType,
+			supportsTitle && renamePostAction,
+			reorderPagesAction,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -946,7 +648,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 							existingCallback( items, {
 								...argsObject,
 								onActionPerformed: ( _items ) => {
-									if ( argsObject.onActionPerformed ) {
+									if ( argsObject?.onActionPerformed ) {
 										argsObject.onActionPerformed( _items );
 									}
 									onActionPerformed(
@@ -984,9 +686,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		}
 
 		return actions;
-		// We are making this use memo depend on cachedCanUserResolvers as a way to make the component using this hook re-render
-		// when user capabilities are resolved. This makes sure the isEligible functions of actions dependent on capabilities are re-evaluated.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		defaultActions,
 		userCanCreatePostType,
@@ -994,15 +693,11 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		isPattern,
 		postTypeObject?.viewable,
 		duplicatePostAction,
-		trashPostActionForPostType,
-		restorePostActionForPostType,
-		renamePostActionForPostType,
-		permanentlyDeletePostActionForPostType,
+		reorderPagesAction,
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
 		supportsTitle,
 		context,
-		cachedCanUserResolvers,
 	] );
 }