@wordpress/editor 14.3.0 → 14.5.0

package/build-module/components/post-actions/actions.js

@@ -1,18 +1,18 @@
 /**
  * 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 { Button, TextControl, __experimentalText as Text, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
+import { Button, TextControl, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -32,18 +32,26 @@ const {
   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']
 };
 
 /**
@@ -61,307 +69,6 @@ function isTemplateRemovable(template) {
   // two props whether is custom or has a theme file.
   return template?.source === TEMPLATE_ORIGINS.custom && !template?.has_theme_file;
 }
-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 /*#__PURE__*/_jsxs(VStack, {
-      spacing: "5",
-      children: [/*#__PURE__*/_jsx(Text, {
-        children: 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)
-      }), /*#__PURE__*/_jsxs(HStack, {
-        justify: "right",
-        children: [/*#__PURE__*/_jsx(Button, {
-          variant: "tertiary",
-          onClick: closeModal,
-          disabled: isBusy,
-          accessibleWhenDisabled: true,
-          children: __('Cancel')
-        }), /*#__PURE__*/_jsx(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: true,
-          children: __('Trash')
-        })]
-      })]
-    });
-  }
-};
-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'),
@@ -420,11 +127,11 @@ const renamePostAction = {
     }
     // 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;
+      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;
@@ -434,7 +141,7 @@ const renamePostAction = {
     // two props whether is custom or has a theme file.
     const isCustomPattern = isUserPattern || isTemplatePart && post.source === TEMPLATE_ORIGINS.custom;
     const hasThemeFile = post?.has_theme_file;
-    return isCustomPattern && !hasThemeFile;
+    return isCustomPattern && !hasThemeFile && post.permissions?.update;
   },
   RenderModal: ({
     items,
@@ -506,21 +213,105 @@ const renamePostAction = {
     });
   }
 };
-function useRenamePostAction(resource) {
-  return useCanUserEligibilityCheckPostType('update', resource, renamePostAction);
-}
-const useDuplicatePostAction = postType => {
+function ReorderModal({
+  items,
+  closeModal,
+  onActionPerformed
+}) {
+  const [item, setItem] = useState(items[0]);
+  const orderInput = item.menu_order;
   const {
-    userCanCreatePost
-  } = useSelect(select => {
+    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 /*#__PURE__*/_jsx("form", {
+    onSubmit: onOrder,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      spacing: "5",
+      children: [/*#__PURE__*/_jsx("div", {
+        children: __('Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.')
+      }), /*#__PURE__*/_jsx(DataForm, {
+        data: item,
+        fields: fields,
+        form: formOrderAction,
+        onChange: setItem
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justify: "right",
+        children: [/*#__PURE__*/_jsx(Button, {
+          __next40pxDefaultSize: true,
+          variant: "tertiary",
+          onClick: () => {
+            closeModal();
+          },
+          children: __('Cancel')
+        }), /*#__PURE__*/_jsx(Button, {
+          __next40pxDefaultSize: true,
+          variant: "primary",
+          type: "submit",
+          accessibleWhenDisabled: true,
+          disabled: isSaveDisabled,
+          __experimentalIsFocusable: true,
+          children: __('Save')
+        })]
+      })]
+    })
+  });
+}
+function useReorderPagesAction(postType) {
+  const supportsPageAttributes = useSelect(select => {
     const {
-      getPostType,
-      canUser
+      getPostType
     } = select(coreStore);
-    const resource = getPostType(postType)?.rest_base || '';
-    return {
-      userCanCreatePost: canUser('create', resource)
-    };
+    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(select => {
+    return select(coreStore).canUser('create', {
+      kind: 'postType',
+      name: postType
+    });
   }, [postType]);
   return useMemo(() => userCanCreatePost && {
     id: 'duplicate-post',
@@ -609,7 +400,7 @@ const useDuplicatePostAction = postType => {
           children: [/*#__PURE__*/_jsx(DataForm, {
             data: item,
             fields: fields,
-            form: form,
+            form: formDuplicateAction,
             onChange: setItem
           }), /*#__PURE__*/_jsxs(HStack, {
             spacing: 2,
@@ -666,10 +457,10 @@ export const duplicateTemplatePartAction = {
     const [item] = items;
     const blocks = useMemo(() => {
       var _item$blocks;
-      return (_item$blocks = item.blocks) !== null && _item$blocks !== void 0 ? _item$blocks : parse(item.content.raw, {
+      return (_item$blocks = item.blocks) !== null && _item$blocks !== void 0 ? _item$blocks : 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);
@@ -701,33 +492,32 @@ export function usePostActions({
   const {
     defaultActions,
     postTypeObject,
-    userCanCreatePostType,
-    resource,
-    cachedCanUserResolvers
+    userCanCreatePostType
   } = useSelect(select => {
     const {
       getPostType,
-      canUser,
-      getCachedResolvers
+      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].includes(postType);
   const isPattern = postType === PATTERN_POST_TYPE;
   const isLoaded = !!postTypeObject;
@@ -737,7 +527,7 @@ export function usePostActions({
     if (!isLoaded) {
       return [];
     }
-    let actions = [postTypeObject?.viewable && viewPostAction, supportsRevisions && postRevisionsAction, globalThis.IS_GUTENBERG_PLUGIN ? !isTemplateOrTemplatePart && !isPattern && duplicatePostAction : false, isTemplateOrTemplatePart && userCanCreatePostType && duplicateTemplatePartAction, isPattern && userCanCreatePostType && duplicatePatternAction, supportsTitle && renamePostActionForPostType, !isTemplateOrTemplatePart && restorePostActionForPostType, !isTemplateOrTemplatePart && !isPattern && trashPostActionForPostType, !isTemplateOrTemplatePart && permanentlyDeletePostActionForPostType, ...defaultActions].filter(Boolean);
+    let actions = [postTypeObject?.viewable && viewPostAction, supportsRevisions && postRevisionsAction, globalThis.IS_GUTENBERG_PLUGIN ? !isTemplateOrTemplatePart && !isPattern && duplicatePostAction : false, isTemplateOrTemplatePart && userCanCreatePostType && duplicateTemplatePartAction, isPattern && userCanCreatePostType && duplicatePatternAction, supportsTitle && renamePostAction, reorderPagesAction, ...defaultActions].filter(Boolean);
     // Filter actions based on provided context. If not provided
     // all actions are returned. We'll have a single entry for getting the actions
     // and the consumer should provide the context to filter the actions, if needed.
@@ -760,7 +550,7 @@ export function usePostActions({
               existingCallback(items, {
                 ...argsObject,
                 onActionPerformed: _items => {
-                  if (argsObject.onActionPerformed) {
+                  if (argsObject?.onActionPerformed) {
                     argsObject.onActionPerformed(_items);
                   }
                   onActionPerformed(actions[i].id, _items);
@@ -789,9 +579,6 @@ export function usePostActions({
       }
     }
     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, isTemplateOrTemplatePart, isPattern, postTypeObject?.viewable, duplicatePostAction, trashPostActionForPostType, restorePostActionForPostType, renamePostActionForPostType, permanentlyDeletePostActionForPostType, onActionPerformed, isLoaded, supportsRevisions, supportsTitle, context, cachedCanUserResolvers]);
+  }, [defaultActions, userCanCreatePostType, isTemplateOrTemplatePart, isPattern, postTypeObject?.viewable, duplicatePostAction, reorderPagesAction, onActionPerformed, isLoaded, supportsRevisions, supportsTitle, context]);
 }
 //# sourceMappingURL=actions.js.map