-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update bulk header with actions #67743
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove header file created in previous PR: #67390
export default function PostActions( { postType, postId, onActionPerformed } ) { | ||
const [ activeModalAction, setActiveModalAction ] = useState( null ); | ||
const { item, permissions } = useSelect( | ||
function useEditedEntityRecordsWithPermissions( postType, postIds ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved this logic to its own hook. It gets all the edited records and adds permissions.
It's similar to this hook:
export function useEntityRecordsWithPermissions< RecordType >( |
edited
records specifically.
Would it be worth moving to the core-data package as well?
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
postId={ | ||
ids.length === 1 ? parseInt( ids[ 0 ], 10 ) : undefined | ||
} | ||
postIds={ ids.length > 1 ? ids : undefined } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this be just postId
prop and accept an array or a scalar there?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah that works for me, I chose postIds
for clarity, but for consumers a single prop
would be easier.
Size Change: -94 B (-0.01%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
itemsWithPermissions.some( ( itemWithPermissions ) => | ||
action.isEligible( itemWithPermissions ) | ||
) ) && | ||
( itemsWithPermissions.length < 2 || action.supportsBulk ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remark: Some of this logic and the UI component itself to render the actions dropdown... is already present in the DataViews package. It seems like instead of duplicating all of that, we should be exposing a DataActions
component from the DataViews package :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes that would make sense, as there is a lot of duplication. But it appears this was also done on purpose, given this inline comment:
https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/components/post-actions/index.js#L88-L91
From now on all the functions on this file are copied as from the dataviews packages,
The editor packages should not be using the dataviews packages directly,
and the dataviews package should not be using the editor packages directly,
so duplicating the code here seems like the least bad option.
Should we still go ahead with this, or is there a specific reason these packages can't depend on each other?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't understand why the editor shouldn't be using dataviews package.
(Regardless, this should be a follow-up and not block this PR from shipping)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me 👍
items: postIds.map( ( postId ) => | ||
getEditedEntityRecord( 'postType', postType, postId ) | ||
), | ||
permissions: postIds.map( ( postId ) => | ||
getEntityRecordPermissions( 'postType', postType, postId ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change has a couple of issues:
- Iterating over values here results in different
items
andpermissions
arrays on everymapSelect
call. - Technically, it can also result in multiple HTTP calls if entity data isn't available in the store.
You can fetch permissions for multiple entities using getEntityRecordsPermissions
, but we don't have a similar substitute for getEditedEntityRecord
. The getEntityRecords
could work but will trigger a REST API request for each new post selection in DataViews.
Screenshot
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @Mamaduka, will push up a fix for this today.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Followed up in this PR: #67872
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @louwie17; I'll have a look later today or tomorrow.
What?
As part of #67390 I introduced a specific header component to handle the bulk view. Given the logic overlaps with the
PostCardPanel
especially around the actions, it was suggested to update thePostCardPanel
to handle multiple post ids.This PR updates the
PostCardPanel
component to support multiple postIds.Why?
This allows us to re-use it fully within the DataViews quick edit.
How?
I added an extra prop to the
PostCardPanel
calledpostIds
. This will update the title to<number> <post type>
and update the actions to only show the ones that supportbulkActions
.Testing Instructions
Move to trash
actionPage
tab in the editing settings menu ( on the far right )Testing Instructions for Keyboard
Screenshots or screencast
bulk-editing-with-actions.mp4