diff --git a/package-lock.json b/package-lock.json index 9fceaac246b7ad..b2abc2d220b524 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53880,6 +53880,7 @@ "@babel/runtime": "^7.16.0", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", @@ -69130,6 +69131,7 @@ "@babel/runtime": "^7.16.0", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 3e4d617e9eb24c..800ebd363ca915 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -19,6 +19,7 @@ ### Enhancement - `label` prop in Actions API can be either a `string` value or a `function`, in case we want to use information from the selected items. ([#61942](https://github.com/WordPress/gutenberg/pull/61942)). +- Add `registry` argument to the callback of the actions API. ([#62505](https://github.com/WordPress/gutenberg/pull/62505)). ## 1.2.0 (2024-05-16) diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json index 500bb8a13090c2..5de3498c9f6471 100644 --- a/packages/dataviews/package.json +++ b/packages/dataviews/package.json @@ -32,6 +32,7 @@ "@babel/runtime": "^7.16.0", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", diff --git a/packages/dataviews/src/bulk-actions-toolbar.tsx b/packages/dataviews/src/bulk-actions-toolbar.tsx index 3cce31c5139047..56a8aa58e7dc40 100644 --- a/packages/dataviews/src/bulk-actions-toolbar.tsx +++ b/packages/dataviews/src/bulk-actions-toolbar.tsx @@ -12,6 +12,7 @@ import { useMemo, useState, useRef } from '@wordpress/element'; import { _n, sprintf, __ } from '@wordpress/i18n'; import { closeSmall } from '@wordpress/icons'; import { useReducedMotion } from '@wordpress/compose'; +import { useRegistry } from '@wordpress/data'; /** * Internal dependencies @@ -92,6 +93,7 @@ function ActionButton< Item extends AnyItem >( { actionInProgress, setActionInProgress, }: ActionButtonProps< Item > ) { + const registry = useRegistry(); const selectedEligibleItems = useMemo( () => { return selectedItems.filter( ( item ) => { return ! action.isEligible || action.isEligible( item ); @@ -113,7 +115,9 @@ function ActionButton< Item extends AnyItem >( { action={ action } onClick={ () => { setActionInProgress( action.id ); - action.callback( selectedItems ); + action.callback( selectedItems, { + registry, + } ); } } items={ selectedEligibleItems } isBusy={ actionInProgress === action.id } diff --git a/packages/dataviews/src/bulk-actions.tsx b/packages/dataviews/src/bulk-actions.tsx index 9be8f6b6d2d7f2..0382e9d836bc95 100644 --- a/packages/dataviews/src/bulk-actions.tsx +++ b/packages/dataviews/src/bulk-actions.tsx @@ -8,6 +8,7 @@ import { } from '@wordpress/components'; import { __, sprintf, _n } from '@wordpress/i18n'; import { useMemo, useState, useCallback, useEffect } from '@wordpress/element'; +import { useRegistry } from '@wordpress/data'; /** * Internal dependencies @@ -119,6 +120,7 @@ function BulkActionItem< Item extends AnyItem >( { selectedItems, setActionWithModal, }: BulkActionsItemProps< Item > ) { + const registry = useRegistry(); const eligibleItems = useMemo( () => { return selectedItems.filter( ( item ) => ! action.isEligible || action.isEligible( item ) @@ -136,7 +138,7 @@ function BulkActionItem< Item extends AnyItem >( { if ( shouldShowModal ) { setActionWithModal( action ); } else { - await action.callback( eligibleItems ); + action.callback( eligibleItems, { registry } ); } } } suffix={ diff --git a/packages/dataviews/src/item-actions.tsx b/packages/dataviews/src/item-actions.tsx index 90ae74b5f74ea6..370162130f1f2a 100644 --- a/packages/dataviews/src/item-actions.tsx +++ b/packages/dataviews/src/item-actions.tsx @@ -15,6 +15,7 @@ import { import { __ } from '@wordpress/i18n'; import { useMemo, useState } from '@wordpress/element'; import { moreVertical } from '@wordpress/icons'; +import { useRegistry } from '@wordpress/data'; /** * Internal dependencies @@ -116,12 +117,7 @@ export function ActionModal< Item extends AnyItem >( { action.id ) }` } > - + ); } @@ -159,6 +155,7 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( { actions, item, }: ActionsDropdownMenuGroupProps< Item > ) { + const registry = useRegistry(); return ( { actions.map( ( action ) => { @@ -176,7 +173,9 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( { action.callback( [ item ] ) } + onClick={ () => { + action.callback( [ item ], { registry } ); + } } items={ [ item ] } /> ); @@ -190,6 +189,7 @@ export default function ItemActions< Item extends AnyItem >( { actions, isCompact, }: ItemActionsProps< Item > ) { + const registry = useRegistry(); const { primaryActions, eligibleActions } = useMemo( () => { // If an action is eligible for all items, doesn't need // to provide the `isEligible` function. @@ -233,7 +233,9 @@ export default function ItemActions< Item extends AnyItem >( { action.callback( [ item ] ) } + onClick={ () => { + action.callback( [ item ], { registry } ); + } } items={ [ item ] } /> ); diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index e3d6d2dd158ecd..8c1819b3a7c674 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -327,28 +327,16 @@ interface ActionBase< Item extends AnyItem > { export interface ActionModal< Item extends AnyItem > extends ActionBase< Item > { - /** - * The callback to execute when the action has finished. - */ - onActionPerformed: ( ( items: Item[] ) => void ) | undefined; - - /** - * The callback to execute when the action is triggered. - */ - onActionStart: ( ( items: Item[] ) => void ) | undefined; - /** * Modal to render when the action is triggered. */ RenderModal: ( { items, closeModal, - onActionStart, onActionPerformed, }: { items: Item[]; closeModal?: () => void; - onActionStart?: ( items: Item[] ) => void; onActionPerformed?: ( items: Item[] ) => void; } ) => ReactElement; @@ -368,7 +356,13 @@ export interface ActionButton< Item extends AnyItem > /** * The callback to execute when the action is triggered. */ - callback: ( items: Item[] ) => void; + callback: ( + items: Item[], + context: { + registry: any; + onActionPerformed?: ( items: Item[] ) => void; + } + ) => void; } export type Action< Item extends AnyItem > = diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 0721a9b5d8ffe7..81dc9127c922aa 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -27,6 +27,7 @@ import { } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { moreVertical } from '@wordpress/icons'; +import { useRegistry } from '@wordpress/data'; /** * Internal dependencies @@ -67,6 +68,7 @@ function ListItem< Item extends AnyItem >( { store, visibleFields, }: ListViewItemProps< Item > ) { + const registry = useRegistry(); const itemRef = useRef< HTMLElement >( null ); const labelId = `${ id }-label`; const descriptionId = `${ id }-description`; @@ -235,11 +237,12 @@ function ListItem< Item extends AnyItem >( { primaryAction.isDestructive } size="compact" - onClick={ () => - primaryAction.callback( [ - item, - ] ) - } + onClick={ () => { + primaryAction.callback( + [ item ], + { registry } + ); + } } /> } /> diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json index 3a944ae6e2d1d4..869f9fcfb9b499 100644 --- a/packages/dataviews/tsconfig.json +++ b/packages/dataviews/tsconfig.json @@ -9,6 +9,7 @@ "references": [ { "path": "../components" }, { "path": "../compose" }, + { "path": "../data" }, { "path": "../element" }, { "path": "../i18n" }, { "path": "../icons" }, diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index b6ee097e850851..5cb208e23e7867 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -93,12 +93,7 @@ const deletePostAction = { }, supportsBulk: true, hideModalHeader: true, - RenderModal: ( { - items, - closeModal, - onActionStart, - onActionPerformed, - } ) => { + RenderModal: ( { items, closeModal, onActionPerformed } ) => { const [ isBusy, setIsBusy ] = useState( false ); const { removeTemplates } = unlock( useDispatch( editorStore ) ); return ( @@ -133,9 +128,6 @@ const deletePostAction = { variant="primary" onClick={ async () => { setIsBusy( true ); - if ( onActionStart ) { - onActionStart( items ); - } await removeTemplates( items, { allowUndo: false, } ); @@ -165,12 +157,7 @@ const trashPostAction = { }, supportsBulk: true, hideModalHeader: true, - RenderModal: ( { - items, - closeModal, - onActionStart, - onActionPerformed, - } ) => { + RenderModal: ( { items, closeModal, onActionPerformed } ) => { const [ isBusy, setIsBusy ] = useState( false ); const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); @@ -209,9 +196,6 @@ const trashPostAction = { variant="primary" onClick={ async () => { setIsBusy( true ); - if ( onActionStart ) { - onActionStart( items ); - } const promiseResult = await Promise.allSettled( items.map( ( item ) => deleteEntityRecord( @@ -323,246 +307,202 @@ const trashPostAction = { }, }; -function usePermanentlyDeletePostAction() { - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - const { deleteEntityRecord } = useDispatch( coreStore ); - - return useMemo( - () => ( { - id: 'permanently-delete', - label: __( 'Permanently delete' ), - supportsBulk: true, - isEligible( { status } ) { - return status === 'trash'; - }, - async callback( posts, onActionPerformed ) { - const promiseResult = await Promise.allSettled( - posts.map( ( post ) => { - return deleteEntityRecord( - 'postType', - post.type, - post.id, - { force: true }, - { throwOnError: true } - ); - } ) +const permanentlyDeletePostAction = { + id: 'permanently-delete', + label: __( 'Permanently delete' ), + supportsBulk: true, + isEligible( { status } ) { + return status === 'trash'; + }, + async callback( posts, { registry } ) { + 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', - } ); - if ( onActionPerformed ) { - onActionPerformed( posts ); - } + } ) + ); + // 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', + } ); + } 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 { - // 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( ',' ) - ); - } + 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 ); } - createErrorNotice( errorMessage, { - type: 'snackbar', - } ); } - }, - } ), - [ createSuccessNotice, createErrorNotice, deleteEntityRecord ] - ); -} + 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 useRestorePostAction() { - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - const { editEntityRecord, saveEditedEntityRecord } = - useDispatch( coreStore ); +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, + } ); + } ) + ); - return useMemo( - () => ( { - id: 'restore', - label: __( 'Restore' ), - isPrimary: true, - icon: backup, - supportsBulk: true, - isEligible( { status } ) { - return status === 'trash'; - }, - async callback( posts, onActionPerformed ) { - await Promise.allSettled( - posts.map( ( post ) => { - return editEntityRecord( - 'postType', - post.type, - post.id, - { - status: 'draft', - } - ); - } ) + 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 ] ) ); - const promiseResult = await Promise.allSettled( - posts.map( ( post ) => { - return saveEditedEntityRecord( - 'postType', - post.type, - post.id, - { throwOnError: true } - ); - } ) + } else if ( posts[ 0 ].type === 'page' ) { + successMessage = sprintf( + /* translators: The number of posts. */ + __( '%d pages have been restored.' ), + posts.length ); - - 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 { + 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 { - // 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( ',' ) - ); - } + 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 ); } - createErrorNotice( errorMessage, { - type: 'snackbar', - } ); } - }, - } ), - [ - createSuccessNotice, - createErrorNotice, - editEntityRecord, - saveEditedEntityRecord, - ] - ); -} + 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', + } ); + } + }, +}; const viewPostAction = { id: 'view-post', @@ -572,7 +512,7 @@ const viewPostAction = { isEligible( post ) { return post.status !== 'trash'; }, - callback( posts, onActionPerformed ) { + callback( posts, { onActionPerformed } ) { const post = posts[ 0 ]; window.open( post.link, '_blank' ); if ( onActionPerformed ) { @@ -603,7 +543,7 @@ const postRevisionsAction = { post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0; return lastRevisionId && revisionsCount > 1; }, - callback( posts, onActionPerformed ) { + callback( posts, { onActionPerformed } ) { const post = posts[ 0 ]; const href = addQueryArgs( 'revision.php', { revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id, @@ -900,12 +840,7 @@ const resetTemplateAction = { icon: backup, supportsBulk: true, hideModalHeader: true, - RenderModal: ( { - items, - closeModal, - onActionStart, - onActionPerformed, - } ) => { + RenderModal: ( { items, closeModal, onActionPerformed } ) => { const [ isBusy, setIsBusy ] = useState( false ); const { revertTemplate, removeTemplates } = unlock( useDispatch( editorStore ) @@ -995,9 +930,6 @@ const resetTemplateAction = { variant="primary" onClick={ async () => { setIsBusy( true ); - if ( onActionStart ) { - onActionStart( items ); - } await onConfirm( items ); onActionPerformed?.( items ); setIsBusy( false ); @@ -1087,8 +1019,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) { [ postType ] ); - const permanentlyDeletePostAction = usePermanentlyDeletePostAction(); - const restorePostAction = useRestorePostAction(); const duplicatePostAction = useDuplicatePostAction( postType ); const isTemplateOrTemplatePart = [ TEMPLATE_POST_TYPE, @@ -1141,7 +1071,7 @@ export function usePostActions( { postType, onActionPerformed, context } ) { const existingCallback = actions[ i ].callback; actions[ i ] = { ...actions[ i ], - callback: ( items, _onActionPerformed ) => { + callback: ( items, { _onActionPerformed } ) => { existingCallback( items, ( _items ) => { if ( _onActionPerformed ) { _onActionPerformed( _items ); @@ -1182,8 +1112,6 @@ export function usePostActions( { postType, onActionPerformed, context } ) { isTemplateOrTemplatePart, isPattern, postTypeObject?.viewable, - permanentlyDeletePostAction, - restorePostAction, duplicatePostAction, onActionPerformed, isLoaded,