Dataviews: Add: Bulk actions toolbar. #59714
Conversation
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @jarekmorawski. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
|
Size Change: +1.24 kB (+0.07%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
Thanks for kicking this off :) A couple of quick comments on the functionality:
|
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
2 times, most recently
from
73b6929 to
f390ab4
Compare
|
Thank you for the review @jameskoster!
We already have a subtle on the popover. It's the default behavior and we are not removing it. If we want something more disabled I guess we would need to introduce different animations on the popover component itself or change the animation for all the popover. Would it be possible to share which Gutenberg animation would you want to replicate?
I think it should be fixed, the popover should now automatically find a place visible to show the toolbar if it is not possible to show it at the buttom.
It should also be fixed now. |
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
from
f390ab4 to
00fa9c5
Compare
|
I made a quick prototype to demonstrate the animation and scroll behavior. The animation is based on the Snackbar component. toolbar.mp4Appreciate the animation may be tricky to replicate if we're using the popover component. The fixed position during scroll is more important. |
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
from
3b8f0c1 to
a4f6a06
Compare
|
Hi @jameskoster, I updated this PR. Now the toolbar should always be visible, and I introduced an animation similar to the SnackBar. Let me know if this is the expected behavior. |
|
@jorgefilipecosta thanks for the updates! I pushed some style adjustments – in terms of design we're looking pretty good. One observation; I'm only seeing the toolbar on the pages data view, not on the Patterns or Templates data view 🤔 |
|
@jorgefilipecosta one other observation: when you view Trash, select an item, and click "Restore" in the toolbar there's a brief flash of different actions before the toolbar disappears. You can see it briefly in this video: bulk-actions-toolbar.mp4It is much more apparent when you have a large selection (also notice the flashing save button in the bottom left): bulk-actions.mp4 |
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
2 times, most recently
from
5939c3d to
6a151ed
Compare
|
Hi @jameskoster, thank you for the reviews. Regarding the flashing issue on post restore, it is something complex, I made some changes which should reduce the perception of the issue. |
|
Flaky tests detected in 628d64e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8921921204
|
|
Thanks for the update :) I see the toolbar on the Templates page, but not the Patterns page. For Patterns, 'Delete' and 'Export as json' should be available as bulk actions ('Delete' should invoke a confirmationdialog). There seems to be a z-index issue on the templates page: 
Here's what I see: trash.mp4It's an improvement, but it feels a bit laggy. I think it's because it's not obvious anything is happening until you see the records disappearing in the background. An idea to try:
In the resulting Snackbar, instead of "Pages moved to trash", could it read "X pages moved to trash"? |
|
This is working better with the frozen modal, thanks for working on it! Could we also try adding the On a similar train of thought; I wonder if it would it be possible to apply this treatment to the bulk action toolbar itself? IE when there is no confirmdialog for an action (e.g. restoring trashed pages), freeze the toolbar on-click and add 
|
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
from
e019c92 to
324614f
Compare
|
Hi @jameskoster, |
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
from
324614f to
bf911cb
Compare
|
Thanks @jorgefilipecosta, it's close now! The busy prop is working well for actions without a confirmation modal. But when there's a confirmation modal (e.g. trashing) it's the button in the modal that should receive the busy prop. Is that possible? 
|
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
from
bf911cb to
9494ff6
Compare
|
Hi @jameskoster, Untitled.mov(This test has code to simulate a very slow server response while reverting each post to make it easier to see busy states but without that, the busy states are also shown on the modal it is just much faster). The busy states appear on the button that opens the modal and on the modal. Would you prefer them to be just shown on the modal? |
Yeah, if it's possible? 🙏 I think it will be less distracting. |
Hi @jameskoster, the change was applied, when there is a modal the busy state is now only reflected on the modal button. |
|
Thanks @jorgefilipecosta, it's working well now. I think the last thing to tweak before getting wider feedback is the busy state on the toolbar buttons. It's a bit strange how the button spans the full height of the toolbar here: 
I'll see if I can push a fix for that. Not to fix here, but noting there's an issue where the busy state on the button is overridden by the hover state. If you don't move the mouse after clicking the button you don't see the busy animation at all. busy.mp4It would be good to follow up to ensure the animation persists on hover. |
|
Thanks @jorgefilipecosta, very close now! I noticed there's a small bug with the template delete action when invoked from the toolbar, it seems to do both; reset and delete. To replicate:
delete.mp4 |
|
Hi @jameskoster, good catch, the bug where delete also reverts the customizations was fixed. |
|
Nice, I think this is ready for wider feedback :) |
|
I just took it for a spin and it's looking great! I have a few thoughts but feel free to disregard them if you plan on making further UX changes.
|
I share this concern, and making the toolbar dark could be something to try. I'd lean towards looking into that separately because there could be other options (different animation effect, dark border, etc.).
Do you have a suggestion? Maybe we don't need the cancel button given you can use the checkbox in the table header?
Do you mean the label, or the menu itself? I think we still need the menu – it's much more accessible quick-action interface for screen readers and keyboard users. The quick-actions toolbar is mostly an affordance for sighted mouse/trackpad users. It would be nice to combine them somehow down the road but until now a solid design hasn't presented itself.
There's a nuance that makes the labelling a bit tricky, the options in this menu / toolbar aren't really "edits", they're "actions". It's an important distinction because we need to entertain bulk editing down the road. This may also be one to look into separately there's a bright idea.
If it's trivial for @jorgefilipecosta to implement I reckon that's worth a try.
Good catch, I'll tweak that. |
|
@jorgefilipecosta I think there's one last small change to make here. When the button (both in the toolbar and the modal) are busy, can they also be Thanks! |
jorgefilipecosta
force-pushed
the
add/bulk-actions-toolbar
branch
from
04ea69b to
e2e3ebe
Compare
|
Hi @jameskoster, The disabled of the buttons while busy was added, let me know if it is the expected behavior. Regarding:
We can explore this in a follow-up PR, as this one is already big, but it seems like a good thing to add. |
|
I see the button in the toolbars are not |
Hi @jameskoster, I'm sorry there was an error while pushing and my changes were not yet there 😅 |
There was a problem hiding this comment.
It's working now :)
A tiny detail to fix:
- The 'restored' snackbar refers to
posts, but these are pages. - The 'moved to trash' snackbar could show the count.
Otherwise this looks good in terms of design, and is ready for a code review. Thanks for all the hard work!
Hi @jameskoster, Thank you for all the reviews and suggestions you made on this PR. |
ajlende
added
the
[Feature] DataViews
Implements a toolbar to make bulk actions more visible as suggested by @jameskoster in #59043 (comment).
Testing
Select some items and verify a toolbar with bulk actions appears.
Apply some bulk actions and verify things work as expected.
Screenshot