Dataviews: Add: Bulk actions toolbar.

[jorgefilipecosta]

Implements a toolbar to make bulk actions more visible as suggested by @jameskoster in https://github.com/WordPress/gutenberg/issues/59043#issuecomment-1979230772.

Testing

Select some items and verify a toolbar with bulk actions appears. Apply some bulk actions and verify things work as expected.

Screenshot

[github-actions[bot]]

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 props-bot label.

Unlinked Accounts

The 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.

Unlinked contributors: jarekmorawski.

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: jameskoster <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions[bot]]

Size Change: +1.24 kB (+0.07%)

Total Size: 1.74 MB

Filename	Size	Change
build/components/index.min.js	220 kB	+10 B (0%)
build/core-commands/index.min.js	2.81 kB	+46 B (+1.66%)
build/edit-site/index.min.js	223 kB	+729 B (+0.33%)
build/edit-site/style-rtl.css	12.9 kB	+158 B (+1.24%)
build/edit-site/style.css	12.9 kB	+157 B (+1.23%)
build/editor/index.min.js	83.2 kB	+143 B (+0.17%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.27 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.1 kB
build/blob/index.min.js	578 B
build/block-directory/index.min.js	7.26 kB
build/block-directory/style-rtl.css	1.03 kB
build/block-directory/style.css	1.03 kB
build/block-editor/content-rtl.css	4.5 kB
build/block-editor/content.css	4.49 kB
build/block-editor/default-editor-styles-rtl.css	395 B
build/block-editor/default-editor-styles.css	395 B
build/block-editor/index.min.js	258 kB
build/block-editor/style-rtl.css	15.5 kB
build/block-editor/style.css	15.4 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	133 B
build/block-library/blocks/audio/theme.css	133 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/block/editor-rtl.css	277 B
build/block-library/blocks/block/editor.css	277 B
build/block-library/blocks/button/editor-rtl.css	415 B
build/block-library/blocks/button/editor.css	414 B
build/block-library/blocks/button/style-rtl.css	627 B
build/block-library/blocks/button/style.css	626 B
build/block-library/blocks/buttons/editor-rtl.css	337 B
build/block-library/blocks/buttons/editor.css	337 B
build/block-library/blocks/buttons/style-rtl.css	332 B
build/block-library/blocks/buttons/style.css	332 B
build/block-library/blocks/calendar/style-rtl.css	239 B
build/block-library/blocks/calendar/style.css	239 B
build/block-library/blocks/categories/editor-rtl.css	113 B
build/block-library/blocks/categories/editor.css	112 B
build/block-library/blocks/categories/style-rtl.css	124 B
build/block-library/blocks/categories/style.css	124 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	421 B
build/block-library/blocks/columns/style.css	421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	199 B
build/block-library/blocks/comment-template/style.css	198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	840 B
build/block-library/blocks/comments/editor.css	839 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	636 B
build/block-library/blocks/cover/editor-rtl.css	671 B
build/block-library/blocks/cover/editor.css	674 B
build/block-library/blocks/cover/style-rtl.css	1.7 kB
build/block-library/blocks/cover/style.css	1.69 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	312 B
build/block-library/blocks/embed/editor.css	312 B
build/block-library/blocks/embed/style-rtl.css	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	133 B
build/block-library/blocks/embed/theme.css	133 B
build/block-library/blocks/file/editor-rtl.css	326 B
build/block-library/blocks/file/editor.css	327 B
build/block-library/blocks/file/style-rtl.css	280 B
build/block-library/blocks/file/style.css	281 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	201 B
build/block-library/blocks/footnotes/style.css	199 B
build/block-library/blocks/form-input/editor-rtl.css	227 B
build/block-library/blocks/form-input/editor.css	227 B
build/block-library/blocks/form-input/style-rtl.css	343 B
build/block-library/blocks/form-input/style.css	343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	340 B
build/block-library/blocks/form-submission-notification/editor.css	340 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	471 B
build/block-library/blocks/freeform/editor-rtl.css	2.61 kB
build/block-library/blocks/freeform/editor.css	2.61 kB
build/block-library/blocks/gallery/editor-rtl.css	956 B
build/block-library/blocks/gallery/editor.css	960 B
build/block-library/blocks/gallery/style-rtl.css	1.72 kB
build/block-library/blocks/gallery/style.css	1.72 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	394 B
build/block-library/blocks/group/editor.css	394 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	189 B
build/block-library/blocks/heading/style.css	189 B
build/block-library/blocks/html/editor-rtl.css	336 B
build/block-library/blocks/html/editor.css	337 B
build/block-library/blocks/image/editor-rtl.css	891 B
build/block-library/blocks/image/editor.css	891 B
build/block-library/blocks/image/style-rtl.css	1.6 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	133 B
build/block-library/blocks/image/theme.css	133 B
build/block-library/blocks/image/view.min.js	1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css	357 B
build/block-library/blocks/latest-comments/style.css	357 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	478 B
build/block-library/blocks/latest-posts/style.css	478 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	306 B
build/block-library/blocks/media-text/editor.css	305 B
build/block-library/blocks/media-text/style-rtl.css	505 B
build/block-library/blocks/media-text/style.css	503 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	668 B
build/block-library/blocks/navigation-link/editor.css	669 B
build/block-library/blocks/navigation-link/style-rtl.css	193 B
build/block-library/blocks/navigation-link/style.css	192 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	296 B
build/block-library/blocks/navigation-submenu/editor.css	295 B
build/block-library/blocks/navigation/editor-rtl.css	2.26 kB
build/block-library/blocks/navigation/editor.css	2.26 kB
build/block-library/blocks/navigation/style-rtl.css	2.26 kB
build/block-library/blocks/navigation/style.css	2.25 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	377 B
build/block-library/blocks/page-list/editor.css	377 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	235 B
build/block-library/blocks/paragraph/editor.css	235 B
build/block-library/blocks/paragraph/style-rtl.css	335 B
build/block-library/blocks/paragraph/style.css	335 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	508 B
build/block-library/blocks/post-comments-form/style.css	508 B
build/block-library/blocks/post-content/editor-rtl.css	74 B
build/block-library/blocks/post-content/editor.css	74 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	141 B
build/block-library/blocks/post-excerpt/style.css	141 B
build/block-library/blocks/post-featured-image/editor-rtl.css	734 B
build/block-library/blocks/post-featured-image/editor.css	732 B
build/block-library/blocks/post-featured-image/style-rtl.css	342 B
build/block-library/blocks/post-featured-image/style.css	342 B
build/block-library/blocks/post-navigation-link/style-rtl.css	215 B
build/block-library/blocks/post-navigation-link/style.css	214 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	409 B
build/block-library/blocks/post-template/style.css	408 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	69 B
build/block-library/blocks/post-time-to-read/style.css	69 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 B
build/block-library/blocks/preformatted/style-rtl.css	125 B
build/block-library/blocks/preformatted/style.css	125 B
build/block-library/blocks/pullquote/editor-rtl.css	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	354 B
build/block-library/blocks/pullquote/style.css	353 B
build/block-library/blocks/pullquote/theme-rtl.css	174 B
build/block-library/blocks/pullquote/theme.css	174 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	288 B
build/block-library/blocks/query-pagination/style.css	284 B
build/block-library/blocks/query-title/style-rtl.css	63 B
build/block-library/blocks/query-title/style.css	63 B
build/block-library/blocks/query/editor-rtl.css	486 B
build/block-library/blocks/query/editor.css	486 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	237 B
build/block-library/blocks/quote/style.css	237 B
build/block-library/blocks/quote/theme-rtl.css	233 B
build/block-library/blocks/quote/theme.css	235 B
build/block-library/blocks/read-more/style-rtl.css	140 B
build/block-library/blocks/read-more/style.css	140 B
build/block-library/blocks/rss/editor-rtl.css	149 B
build/block-library/blocks/rss/editor.css	149 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	184 B
build/block-library/blocks/search/editor.css	184 B
build/block-library/blocks/search/style-rtl.css	690 B
build/block-library/blocks/search/style.css	689 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/search/view.min.js	478 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	239 B
build/block-library/blocks/separator/style.css	239 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	323 B
build/block-library/blocks/shortcode/editor.css	323 B
build/block-library/blocks/site-logo/editor-rtl.css	805 B
build/block-library/blocks/site-logo/editor.css	805 B
build/block-library/blocks/site-logo/style-rtl.css	204 B
build/block-library/blocks/site-logo/style.css	204 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	116 B
build/block-library/blocks/site-title/editor.css	116 B
build/block-library/blocks/site-title/style-rtl.css	57 B
build/block-library/blocks/site-title/style.css	57 B
build/block-library/blocks/social-link/editor-rtl.css	324 B
build/block-library/blocks/social-link/editor.css	324 B
build/block-library/blocks/social-links/editor-rtl.css	676 B
build/block-library/blocks/social-links/editor.css	675 B
build/block-library/blocks/social-links/style-rtl.css	1.48 kB
build/block-library/blocks/social-links/style.css	1.48 kB
build/block-library/blocks/spacer/editor-rtl.css	350 B
build/block-library/blocks/spacer/editor.css	350 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	395 B
build/block-library/blocks/table/editor.css	395 B
build/block-library/blocks/table/style-rtl.css	639 B
build/block-library/blocks/table/style.css	639 B
build/block-library/blocks/table/theme-rtl.css	152 B
build/block-library/blocks/table/theme.css	152 B
build/block-library/blocks/tag-cloud/style-rtl.css	251 B
build/block-library/blocks/tag-cloud/style.css	253 B
build/block-library/blocks/template-part/editor-rtl.css	393 B
build/block-library/blocks/template-part/editor.css	393 B
build/block-library/blocks/template-part/theme-rtl.css	107 B
build/block-library/blocks/template-part/theme.css	107 B
build/block-library/blocks/term-description/style-rtl.css	111 B
build/block-library/blocks/term-description/style.css	111 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	99 B
build/block-library/blocks/verse/style.css	99 B
build/block-library/blocks/video/editor-rtl.css	552 B
build/block-library/blocks/video/editor.css	555 B
build/block-library/blocks/video/style-rtl.css	185 B
build/block-library/blocks/video/style.css	185 B
build/block-library/blocks/video/theme-rtl.css	133 B
build/block-library/blocks/video/theme.css	133 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.11 kB
build/block-library/common.css	1.11 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	12.3 kB
build/block-library/editor.css	12.2 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	218 kB
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.8 kB
build/block-library/style.css	14.8 kB
build/block-library/theme-rtl.css	707 B
build/block-library/theme.css	713 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	51.7 kB
build/commands/index.min.js	15.1 kB
build/commands/style-rtl.css	953 B
build/commands/style.css	951 B
build/components/style-rtl.css	11.9 kB
build/components/style.css	11.9 kB
build/compose/index.min.js	12.8 kB
build/core-data/index.min.js	72.5 kB
build/customize-widgets/index.min.js	10.9 kB
build/customize-widgets/style-rtl.css	1.36 kB
build/customize-widgets/style.css	1.36 kB
build/data-controls/index.min.js	640 B
build/data/index.min.js	9 kB
build/date/index.min.js	17.9 kB
build/deprecated/index.min.js	451 B
build/dom-ready/index.min.js	324 B
build/dom/index.min.js	4.65 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	578 B
build/edit-post/index.min.js	14.4 kB
build/edit-post/style-rtl.css	2.68 kB
build/edit-post/style.css	2.68 kB
build/edit-widgets/index.min.js	17.5 kB
build/edit-widgets/style-rtl.css	4.17 kB
build/edit-widgets/style.css	4.16 kB
build/editor/style-rtl.css	8.25 kB
build/editor/style.css	8.26 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.07 kB
build/format-library/style-rtl.css	493 B
build/format-library/style.css	492 B
build/hooks/index.min.js	1.55 kB
build/html-entities/index.min.js	448 B
build/i18n/index.min.js	3.58 kB
build/interactivity/debug.min.js	16.2 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.67 kB
build/interactivity/index.min.js	13 kB
build/interactivity/navigation.min.js	1.17 kB
build/interactivity/query.min.js	740 B
build/interactivity/router.min.js	2.79 kB
build/interactivity/search.min.js	618 B
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.3 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.11 kB
build/list-reusable-blocks/style-rtl.css	851 B
build/list-reusable-blocks/style.css	851 B
build/media-utils/index.min.js	2.92 kB
build/modules/importmap-polyfill.min.js	12.2 kB
build/notices/index.min.js	948 B
build/nux/index.min.js	1.57 kB
build/nux/style-rtl.css	748 B
build/nux/style.css	744 B
build/patterns/index.min.js	6.45 kB
build/patterns/style-rtl.css	595 B
build/patterns/style.css	595 B
build/plugins/index.min.js	1.8 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.85 kB
build/preferences/style-rtl.css	710 B
build/preferences/style.css	712 B
build/primitives/index.min.js	809 B
build/priority-queue/index.min.js	1.52 kB
build/private-apis/index.min.js	1 kB
build/react-i18n/index.min.js	623 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.78 kB
build/redux-routine/index.min.js	2.7 kB
build/reusable-blocks/index.min.js	2.7 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	10.1 kB
build/router/index.min.js	1.93 kB
build/server-side-render/index.min.js	1.96 kB
build/shortcode/index.min.js	1.39 kB
build/style-engine/index.min.js	2.02 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.74 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react.min.js	4.03 kB
build/viewport/index.min.js	957 B
build/warning/index.min.js	249 B
build/widgets/index.min.js	7.11 kB
build/widgets/style-rtl.css	1.17 kB
build/widgets/style.css	1.17 kB
build/wordcount/index.min.js	1.02 kB

_{compressed-size-action}

[jameskoster]

Thanks for kicking this off :) A couple of quick comments on the functionality:

• Would it be possible to make the toolbar appear with some subtle animation, similar to Snackbars? This will help bring it to the users attention.
• Can we also fix it in position? Currently if many records are visible the toolbar is hidden from view until you scroll.
• There's a regression with the pagination bar – it should be sticky link on trunk.

[jorgefilipecosta]

Thank you for the review @jameskoster!

• Would it be possible to make the toolbar appear with some subtle animation, similar to Snackbars? This will help bring it to the users attention.

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?

• Can we also fix it in position? Currently if many records are visible the toolbar is hidden from view until you scroll.

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.

• There's a regression with the pagination bar – it should be sticky link on trunk.

It should also be fixed now.

[jameskoster]

I made a quick prototype to demonstrate the animation and scroll behavior. The animation is based on the Snackbar component.

https://github.com/WordPress/gutenberg/assets/846565/491a16c3-46df-4cb4-a269-c27955c27655

Appreciate the animation may be tricky to replicate if we're using the popover component. The fixed position during scroll is more important.

[jorgefilipecosta]

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.

[jameskoster]

@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 🤔

[jameskoster]

@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:

https://github.com/WordPress/gutenberg/assets/846565/e3835f58-f250-4712-a2a8-c8c68d73b0e8

It is much more apparent when you have a large selection (also notice the flashing save button in the bottom left):

https://github.com/WordPress/gutenberg/assets/846565/bb981ddf-61d9-4571-bf6d-96c313d3e00c

[jorgefilipecosta]

Hi @jameskoster, thank you for the reviews. The toolbar was not showing on templates because we were only including primary actions and templates don't have any primary action. I updated and now the toolbar is available for any bulk action with an icon.

Regarding the flashing issue on post restore, it is something complex, I made some changes which should reduce the perception of the issue.

[github-actions[bot]]

Flaky tests detected in 628d64e632a2f0ca53bc2395b7cd3c4418e189d9. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8921921204 📝 Reported issues:

• #48372 in /test/e2e/specs/editor/various/inserting-blocks.spec.js

[jameskoster]

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:

Regarding the flashing issue on post restore, it is something complex, I made some changes which should reduce the perception of the issue.

Here's what I see:

https://github.com/WordPress/gutenberg/assets/846565/025d166d-6df6-47a0-b9f9-998d3354a860

It'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:

1. Add the isBusy prop to the 'Delete' button when records are being deleted.
2. Do not update the count ("Are you sure you want to delete 20 pages?") in the modal each time a record is deleted.

In the resulting Snackbar, instead of "Pages moved to trash", could it read "X pages moved to trash"?

[jameskoster]

This is working better with the frozen modal, thanks for working on it! Could we also try adding the isBusy prop to the button?

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 isBusy to the selected action:

[jorgefilipecosta]

Hi @jameskoster, I implemented the busy states as suggested. I ended up inspired by @mcsf approach to avoid rerendering using references (it was a really nice idea that had not occurred to me before). I continued with the reference idea but added logic for busy states. I think this is ready for another pass.

[jameskoster]

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]

Hi @jameskoster, I tested this in multiple browsers and it seems the busy state is reflected also on the button inside the modal. This is what I'm seeing:

https://github.com/WordPress/gutenberg/assets/11271197/23465a6c-048e-4ea2-a1d9-e0040d902360

(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?

[jameskoster]

Would you prefer them to be just shown on the modal?

Yeah, if it's possible? 🙏 I think it will be less distracting.

[jorgefilipecosta]

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.

[jameskoster]

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.

https://github.com/WordPress/gutenberg/assets/846565/5c065591-48f4-4629-b2be-12c5f57ac094

It would be good to follow up to ensure the animation persists on hover.

[jameskoster]

Pushed some adjustments. I see one remaining issue. On the templates page, the actions in the toolbar are inconsistent with the actions in the menu. In the screenshot below notice how I can reset / delete via the menu, but in the toolbar these actions are disabled.

Ideally the actions in the toolbar should be enabled too.

I noticed that no actions appear in the Patterns page, but I assume that's because there are no primary actions on that page?

[jorgefilipecosta]

Hi @jameskoster,

Pushed some adjustments. I see one remaining issue. On the templates page, the actions in the toolbar are inconsistent with the actions in the menu. In the screenshot below notice how I can reset / delete via the menu, but in the toolbar these actions are disabled.

This was fixed.

I noticed that no actions appear in the Patterns page, but I assume that's because there are no primary actions on that page?

Exactly we don't have primary actions there yet. As a follow up we can decide if some of the pattern actions should be primary.

[jameskoster]

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:

1. Edit a theme template
2. Create a custom template
3. Go to templates data view and select the theme template you edited and the custom template
4. Click "Delete" in the quick actions toolbar
5. Notice that the custom template is deleted as expected, but also the theme template gets reset. This is inconsistent with the "Delete" action in the bulk actions menu which behaves correctly.

https://github.com/WordPress/gutenberg/assets/846565/aea0cc8f-de0c-41ab-b259-babcd47862ef

[jorgefilipecosta]

Hi @jameskoster, good catch, the bug where delete also reverts the customizations was fixed.

[jameskoster]

Nice, I think this is ready for wider feedback :)

[jarekmorawski]

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 wonder if the toolbar should be dark to stand out more against the white background of the table. If there are not enough items to fill the screen, it's pretty easy to miss (especially on larger screens where the toolbar is pretty far away from the top of the table).
• Should we make the X/Cancel button subtler? It could be just me, but it looks like a content-related action, similar to Move to trash. The tooltip only says Cancel, which doesn't make it clear if I'll be canceling the bulk editing flow or the item (in some products, Cancel can be an actual action).
• Do we still need the Edit X items in the top right corner given that we now have the toolbar?
• If so, can we align the copy so it's clear both elements do the same thing? We could use the toolbar's description as the button label (X items selected vs. Edit X items).
• Would it make sense to reveal additional selection options when the user clicks X items selected in the toolbar? Being able to select or deselect all can be useful in some situations.
• Minor details, but we can display the tooltip above the button? Currently, we show it under the toolbar, which makes it a bit difficult to read because it's too close to the edge of the screen.

[jameskoster]

I wonder if the toolbar should be dark to stand out more against the white background of the table. If there are not enough items to fill the screen, it's pretty easy to miss

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.).

Should we make the X/Cancel button subtler?

Do you have a suggestion? Maybe we don't need the cancel button given you can use the checkbox in the table header?

Do we still need the Edit X items in the top right corner given that we now have the toolbar?

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.

If so, can we align the copy so it's clear both elements do the same thing?

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.

Would it make sense to reveal additional selection options when the user clicks X items selected in the toolbar? Being able to select or deselect all can be useful in some situations.

If it's trivial for @jorgefilipecosta to implement I reckon that's worth a try.

Minor details, but we can display the tooltip above the button?

Good catch, I'll tweak that.

[jameskoster]

@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 disabled (with __experimentalIsFocusable)?

Thanks!

[jorgefilipecosta]

Hi @jameskoster,

The disabled of the buttons while busy was added, let me know if it is the expected behavior.

Regarding:

Would it make sense to reveal additional selection options when the user clicks X items selected in the toolbar? Being able to select or deselect all can be useful in some situations.

We can explore this in a follow-up PR, as this one is already big, but it seems like a good thing to add.

[jameskoster]

I see the button in the toolbars are not disabled + busy, but the one in the modal (the 'Delete' button) is still only busy.

[jorgefilipecosta]

I see the button in the toolbars are not disabled + busy, but the one in the modal (the 'Delete' button) is still only busy.

Hi @jameskoster, I'm sorry there was an error while pushing and my changes were not yet there 😅 The changes should now be available.

[jorgefilipecosta]

It's working now :)

A tiny detail to fix:

1. The 'restored' snackbar refers to `post`s, but these are pages. 2. 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, I improved the messages in a separate PR because this issue already existed. The fix is available https://github.com/WordPress/gutenberg/pull/61539.

Thank you for all the reviews and suggestions you made on this PR.