@wordpress/editor 14.4.0 → 14.5.0

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

@@ -1,24 +1,22 @@
 /**
  * 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,
-	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 
 /**
@@ -39,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' ],
 };
 
 /**
@@ -73,406 +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, postType, action ) {
-	const registry = useRegistry();
-	return useMemo(
-		() => ( {
-			...action,
-			isEligible( item ) {
-				return (
-					action.isEligible( item ) &&
-					registry.select( coreStore ).canUser( capability, {
-						kind: 'postType',
-						name: postType,
-						id: item.id,
-					} )
-				);
-			},
-		} ),
-		[ action, registry, capability, postType ]
-	);
-}
-
-function useTrashPostAction( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'delete',
-		postType,
-		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( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'delete',
-		postType,
-		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( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'update',
-		postType,
-		restorePostAction
-	);
-}
-
 const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
@@ -539,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;
@@ -555,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;
@@ -626,30 +238,21 @@ const renamePostAction = {
 	},
 };
 
-function useRenamePostAction( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'update',
-		postType,
-		renamePostAction
-	);
-}
-
 function ReorderModal( { items, closeModal, onActionPerformed } ) {
-	const [ item ] = items;
+	const [ item, setItem ] = useState( items[ 0 ] );
+	const orderInput = item.menu_order;
 	const { editEntityRecord, saveEditedEntityRecord } =
 		useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
-	const [ orderInput, setOrderInput ] = useState( item.menu_order );
 
 	async function onOrder( event ) {
 		event.preventDefault();
-		if (
-			! Number.isInteger( Number( orderInput ) ) ||
-			orderInput?.trim?.() === ''
-		) {
+
+		if ( ! isItemValid( item, fields, formOrderAction ) ) {
 			return;
 		}
+
 		try {
 			await editEntityRecord( 'postType', item.type, item.id, {
 				menu_order: orderInput,
@@ -673,9 +276,7 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) {
 			} );
 		}
 	}
-	const saveIsDisabled =
-		! Number.isInteger( Number( orderInput ) ) ||
-		orderInput?.trim?.() === '';
+	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
 	return (
 		<form onSubmit={ onOrder }>
 			<VStack spacing="5">
@@ -684,12 +285,11 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) {
 						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
 					) }
 				</div>
-				<NumberControl
-					__next40pxDefaultSize
-					label={ __( 'Order' ) }
-					help={ __( 'Set the page order.' ) }
-					value={ orderInput }
-					onChange={ setOrderInput }
+				<DataForm
+					data={ item }
+					fields={ fields }
+					form={ formOrderAction }
+					onChange={ setItem }
 				/>
 				<HStack justify="right">
 					<Button
@@ -706,7 +306,7 @@ function ReorderModal( { items, closeModal, onActionPerformed } ) {
 						variant="primary"
 						type="submit"
 						accessibleWhenDisabled
-						disabled={ saveIsDisabled }
+						disabled={ isSaveDisabled }
 						__experimentalIsFocusable
 					>
 						{ __( 'Save' ) }
@@ -873,7 +473,7 @@ const useDuplicatePostAction = ( postType ) => {
 								<DataForm
 									data={ item }
 									fields={ fields }
-									form={ form }
+									form={ formDuplicateAction }
 									onChange={ setItem }
 								/>
 								<HStack spacing={ 2 } justify="end">
@@ -974,36 +574,27 @@ export const duplicateTemplatePartAction = {
 };
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
-	const {
-		defaultActions,
-		postTypeObject,
-		userCanCreatePostType,
-		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 );
 			return {
-				postTypeObject: _postTypeObject,
+				postTypeObject: getPostType( postType ),
 				defaultActions: getEntityActions( 'postType', postType ),
 				userCanCreatePostType: canUser( 'create', {
 					kind: 'postType',
 					name: postType,
 				} ),
-				cachedCanUserResolvers: getCachedResolvers()?.canUser,
 			};
 		},
 		[ postType ]
 	);
+	const { registerPostTypeActions } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		registerPostTypeActions( postType );
+	}, [ registerPostTypeActions, postType ] );
 
 	const duplicatePostAction = useDuplicatePostAction( postType );
-	const trashPostActionForPostType = useTrashPostAction( postType );
-	const permanentlyDeletePostActionForPostType =
-		usePermanentlyDeletePostAction( postType );
-	const renamePostActionForPostType = useRenamePostAction( postType );
-	const restorePostActionForPostType = useRestorePostAction( postType );
 	const reorderPagesAction = useReorderPagesAction( postType );
 	const isTemplateOrTemplatePart = [
 		TEMPLATE_POST_TYPE,
@@ -1030,14 +621,8 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 				userCanCreatePostType &&
 				duplicateTemplatePartAction,
 			isPattern && userCanCreatePostType && duplicatePatternAction,
-			supportsTitle && renamePostActionForPostType,
+			supportsTitle && renamePostAction,
 			reorderPagesAction,
-			! isTemplateOrTemplatePart && restorePostActionForPostType,
-			! isTemplateOrTemplatePart &&
-				! isPattern &&
-				trashPostActionForPostType,
-			! isTemplateOrTemplatePart &&
-				permanentlyDeletePostActionForPostType,
 			...defaultActions,
 		].filter( Boolean );
 		// Filter actions based on provided context. If not provided
@@ -1101,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,
@@ -1112,15 +694,10 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		postTypeObject?.viewable,
 		duplicatePostAction,
 		reorderPagesAction,
-		trashPostActionForPostType,
-		restorePostActionForPostType,
-		renamePostActionForPostType,
-		permanentlyDeletePostActionForPostType,
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
 		supportsTitle,
 		context,
-		cachedCanUserResolvers,
 	] );
 }

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

@@ -29,26 +29,38 @@ const {
 
 export default function PostActions( { onActionPerformed, buttonProps } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { item, postType } = useSelect( ( select ) => {
+	const { item, permissions, postType } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
+		const { getEditedEntityRecord, getEntityRecordPermissions } = unlock(
+			select( coreStore )
+		);
 		const _postType = getCurrentPostType();
+		const _id = getCurrentPostId();
 		return {
-			item: getEditedEntityRecord(
+			item: getEditedEntityRecord( 'postType', _postType, _id ),
+			permissions: getEntityRecordPermissions(
 				'postType',
 				_postType,
-				getCurrentPostId()
+				_id
 			),
 			postType: _postType,
 		};
 	}, [] );
+	const itemWithPermissions = useMemo( () => {
+		return {
+			...item,
+			permissions,
+		};
+	}, [ item, permissions ] );
 	const allActions = usePostActions( { postType, onActionPerformed } );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
-			return ! action.isEligible || action.isEligible( item );
+			return (
+				! action.isEligible || action.isEligible( itemWithPermissions )
+			);
 		} );
-	}, [ allActions, item ] );
+	}, [ allActions, itemWithPermissions ] );
 
 	return (
 		<DropdownMenu
@@ -72,7 +84,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 		>
 			<ActionsDropdownMenuGroup
 				actions={ actions }
-				item={ item }
+				item={ itemWithPermissions }
 				onClose={ () => {
 					setIsActionsMenuOpen( false );
 				} }