Data views: Align 'Bulk edit' menu trigger with 'View options' menu trigger

[jameskoster]

There's something uncanny about the 'View options' menu being triggered by an icon button while the 'Bulk edit' menu is triggered by a text button. The contrast in prominence between them is not altogether helpful.

This PR seeks to align their prominence and the general UX by updating the bulk actions menu trigger to use an icon button:

On the surface this seems a simple enough change, however there are a couple of challenges:

1. Coming up with an icon that clearly represents 'bulk actions'.
2. Indicating the selection. The text button label adapts dynamically to read, for example; "Edit 20 items".

The icon is something we can explore in this PR.

For indicating the selection the Button is populated by text: "Edit items: X", where 'Edit items' is visually hidden and X = the selection count displayed as a small pill at the top-right corner of the button. A similar label is present and appears as a tooltip.

To test

• Go to a dataview that supports bulk actions like Templates
• Play around with the menu

Video demo

https://github.com/WordPress/gutenberg/assets/846565/7f9d3735-ad37-4a57-a7a4-30d6bb700688

cc @andrewhayward

[github-actions[bot]]

Size Change: +960 B (0%)

Total Size: 1.71 MB

Filename	Size	Change
build/edit-site/index.min.js	215 kB	+922 B (0%)
build/edit-site/style-rtl.css	15.3 kB	+19 B (0%)
build/edit-site/style.css	15.3 kB	+19 B (0%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.69 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.22 kB
build/block-directory/style-rtl.css	1.02 kB
build/block-directory/style.css	1.02 kB
build/block-editor/content-rtl.css	4.35 kB
build/block-editor/content.css	4.35 kB
build/block-editor/default-editor-styles-rtl.css	381 B
build/block-editor/default-editor-styles.css	381 B
build/block-editor/index.min.js	250 kB
build/block-editor/style-rtl.css	15.4 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	126 B
build/block-library/blocks/audio/theme.css	126 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	305 B
build/block-library/blocks/block/editor.css	305 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	647 B
build/block-library/blocks/cover/editor.css	650 B
build/block-library/blocks/cover/style-rtl.css	1.69 kB
build/block-library/blocks/cover/style.css	1.68 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	98 B
build/block-library/blocks/details/style.css	98 B
build/block-library/blocks/embed/editor-rtl.css	322 B
build/block-library/blocks/embed/editor.css	322 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	126 B
build/block-library/blocks/embed/theme.css	126 B
build/block-library/blocks/file/editor-rtl.css	316 B
build/block-library/blocks/file/editor.css	316 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	947 B
build/block-library/blocks/gallery/editor.css	952 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	647 B
build/block-library/blocks/group/editor.css	647 B
build/block-library/blocks/group/style-rtl.css	57 B
build/block-library/blocks/group/style.css	57 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	894 B
build/block-library/blocks/image/editor.css	893 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	126 B
build/block-library/blocks/image/theme.css	126 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	266 B
build/block-library/blocks/media-text/editor.css	263 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	259 B
build/block-library/blocks/navigation-link/style.css	257 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.02 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	666 B
build/block-library/blocks/post-featured-image/editor.css	662 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	354 B
build/block-library/blocks/pullquote/theme-rtl.css	168 B
build/block-library/blocks/pullquote/theme.css	168 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	223 B
build/block-library/blocks/quote/theme.css	226 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	629 B
build/block-library/blocks/search/style.css	628 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	229 B
build/block-library/blocks/separator/style.css	229 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	754 B
build/block-library/blocks/site-logo/editor.css	754 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	184 B
build/block-library/blocks/social-link/editor.css	184 B
build/block-library/blocks/social-links/editor-rtl.css	682 B
build/block-library/blocks/social-links/editor.css	681 B
build/block-library/blocks/social-links/style-rtl.css	1.49 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	146 B
build/block-library/blocks/table/theme.css	146 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	403 B
build/block-library/blocks/template-part/editor.css	403 B
build/block-library/blocks/template-part/theme-rtl.css	101 B
build/block-library/blocks/template-part/theme.css	101 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	126 B
build/block-library/blocks/video/theme.css	126 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 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.4 kB
build/block-library/editor.css	12.3 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	216 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	688 B
build/block-library/theme.css	693 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.8 kB
build/commands/index.min.js	15.6 kB
build/commands/style-rtl.css	921 B
build/commands/style.css	918 B
build/components/index.min.js	223 kB
build/components/style-rtl.css	11.8 kB
build/components/style.css	11.9 kB
build/compose/index.min.js	12.6 kB
build/core-commands/index.min.js	2.77 kB
build/core-data/index.min.js	72.8 kB
build/customize-widgets/index.min.js	12.1 kB
build/customize-widgets/style-rtl.css	1.32 kB
build/customize-widgets/style.css	1.32 kB
build/data-controls/index.min.js	640 B
build/data/index.min.js	8.93 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	544 B
build/edit-post/classic.css	545 B
build/edit-post/index.min.js	23.8 kB
build/edit-post/style-rtl.css	5.64 kB
build/edit-post/style.css	5.63 kB
build/edit-widgets/index.min.js	17.3 kB
build/edit-widgets/style-rtl.css	4.22 kB
build/edit-widgets/style.css	4.22 kB
build/editor/index.min.js	63.9 kB
build/editor/style-rtl.css	5.32 kB
build/editor/style.css	5.32 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	7.89 kB
build/format-library/style-rtl.css	478 B
build/format-library/style.css	477 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/file.min.js	447 B
build/interactivity/image.min.js	1.67 kB
build/interactivity/index.min.js	12.8 kB
build/interactivity/navigation.min.js	1.15 kB
build/interactivity/query.min.js	740 B
build/interactivity/router.min.js	1.29 kB
build/interactivity/search.min.js	618 B
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.74 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	836 B
build/list-reusable-blocks/style.css	836 B
build/media-utils/index.min.js	2.9 kB
build/modules/importmap-polyfill.min.js	12.2 kB
build/notices/index.min.js	948 B
build/nux/index.min.js	2 kB
build/nux/style-rtl.css	735 B
build/nux/style.css	732 B
build/patterns/index.min.js	5.78 kB
build/patterns/style-rtl.css	540 B
build/patterns/style.css	539 B
build/plugins/index.min.js	1.8 kB
build/preferences-persistence/index.min.js	2.05 kB
build/preferences/index.min.js	2.82 kB
build/preferences/style-rtl.css	698 B
build/preferences/style.css	700 B
build/primitives/index.min.js	975 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.72 kB
build/reusable-blocks/style-rtl.css	243 B
build/reusable-blocks/style.css	243 B
build/rich-text/index.min.js	10.4 kB
build/router/index.min.js	1.79 kB
build/server-side-render/index.min.js	1.95 kB
build/shortcode/index.min.js	1.39 kB
build/style-engine/index.min.js	2.08 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.72 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.8 kB
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	957 B
build/warning/index.min.js	249 B
build/widgets/index.min.js	7.21 kB
build/widgets/style-rtl.css	1.15 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.02 kB

_{compressed-size-action}

[jasmussen]

This is a tricky one. I agree the footprint is better on this one, but there's something about that icon that isn't working too well. Not a 1:1 but here's what Dropbox does:

There's a better balance of emphasis there. I wonder if there's some inspiration we can take.

[jameskoster]

Thanks for sharing.

Showing the selection inline works well, and the increased footprint is probably warranted after a selection is made. I'll give that a try.

Less sure about the checkbox icon. Normally checkbox detached from a table row like that is a 'select all' shortcut (which we already have). Our affordance is a little different (a menu with options relation both to selection and action). Perhaps a checkbox with a down chevron next to it could work... it's a bit tricky to capture selection and action in one icon.

Another option would be to separate the menus, one for selection, one for bulk actions:

The order is kind of backwards, but perhaps it could work? cc @andrewhayward

[andrewhayward]

This PR seeks to align their prominence and the general UX by updating the bulk actions menu trigger to use an icon button...

I do like the intent, but as you mention yourself, coming up with an icon that clearly represents 'bulk actions' is always going to be tricky! Once the purpose of the control is clear though, the numerical badge works well.

Less sure about the checkbox icon. Normally checkbox detached from a table row like that is a 'select all' shortcut (which we already have). Our affordance is a little different (a menu with options relation both to selection and action).

As long as the icon only visually resembles a checkbox, and doesn't try to behave as one, we'd probably get away with it. It might be initially confusing to have something that looks like a checkbox not behave like one, but given that it would open a menu with relevant and appropriate actions, it could be worth trying.

Only tangentially related, but it might be worth exploring separate "Select all" and "Select visible/page/whatever" options to allow for acting on an entire set of filtered items, even if you can't see them all at once. Similar to how GMail and others prompt for things like "All x conversations on this page are selected. Select all y conversations in «view»."

Another option would be to separate the menus, one for selection, one for bulk actions

The separation feels kind of... disconnected! I'm not sure what reason you'd have for selecting multiple items other than to take some sort of bulk action. At which point, having the two parts of that workflow divided and on opposite sides of the workspace just seems cumbersome.

Equally, how would it work in non-table layouts? Where does the selection control go in grid layouts, for example? Not saying they should necessarily therefore be the same control, just that it's not adding up in my head!

[jasmussen]

I do like the intent

To be clear, the intent is less about moving to an icon, it's to manage the prominence. For a feature that is critical when you need it, but arguably not always, it would be good if the button is findable, bit gains prominence when you start using it. Consider: there are checkboxes to select individual posts in a list, and there's even a "select all" as the table header. Clicking any of those checkboxes starts you on the bulk editing journey, and that's when the bulk button could gain prominence, for example by literally showing the text label, "3 selected".

I understand the button needs to be permanently there so that focus has somewhere to land, for example, if you choose deselect all from that menu. But in its resting state when you are not selecting posts, it only has a single action, "Select all":

And since that select all action is also present by clicking the checkbox in the table heading, the bulk action button in its resting state becomes secondary.

That's why it is worth matching its footprint to the flow.

[jameskoster]

@andrewhayward good points, keeping the actions together in the same menu seems reasonable, and doesn't preclude adding 'select' actions to the main checkbox at some point in the future.

I'm still not convinced about the checkbox-as-an-icon though. You mention it shouldn't behave like one, but in practise I suspect it would be a little strange to an 'unselected' icon when a selection has been made:

Outside of the conventional placement it also doesn't resemble a checkbox so much. We'd probably need to add the checkmark, but that doesn't work so well either...

[andrewhayward]

You mention it shouldn't behave like one, but in practise I suspect it would be a little strange to an 'unselected' icon when a selection has been made

Sorry, I wasn't clear. I meant that we shouldn't try to combine an actual checkbox with a dropdown menu, as the functionality would just get super confusing. Updating the visuals to match the state of the selection (unchecked, checked, indeterminate) would be less of an issue.

[jameskoster]

Thanks for clarifying. But that just brings me back to this comment.

Having the main bulk select checkbox (the one in the table) visually match the bulk actions button is going to lead to confusion around these UI that have the same appearance but behave differently. A checkbox arguably over-emphasises selection as well.

How about if the icon changed based on whether a selection has been made? E.g. no selection = empty checkbox, selection = cog (or ideally some new icon that communicates 'apply bulk actions').

[jasmussen]

I think it's important we unstick this. To echo the previous feedback, since text is added to the button as soon as you bulk select, a great deal of prominence is contextually added as soon as you start the user journey towards bulk editing. Keeping it a cog implies the advanced nature in its non-bulk state, and manages the prominence at the same time. We can explore other icons too, Google Keep has this icon for it:

[andrewhayward]

How about if the icon changed based on whether a selection has been made? E.g. no selection = empty checkbox, selection = cog (or ideally some new icon that communicates 'apply bulk actions').

I wonder if two quite distinct icons would get confusing. Perhaps the same icon, with a "deactivated" variant, might be better? (Not these, but I didn't want to spend more than a couple of minutes trawling for examples!)

[jameskoster]

Just to see how it feels I pushed an update that displays the selection more prominently, and switches icon upon selection.

@andrewhayward I tried an icon where a cog sits inside a checkbox, but it's tricky to get right at such a small size. So I'm using the regular cog for now.

https://github.com/WordPress/gutenberg/assets/846565/21c03a4d-9b86-4c4e-bbad-5ae70094a7a9

We can continue exploring icons if y'all feel this is the right direction.

[github-actions[bot]]

Flaky tests detected in 336bd183aad94cadb455b89431705954482a002d. 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/7962232284 📝 Reported issues:

• #47732 in /test/e2e/specs/editor/blocks/navigation.spec.js

[andrewhayward]

I tried an icon where a cog sits inside a checkbox, but it's tricky to get right at such a small size. So I'm using the regular cog for now.

Kind of works if you impose the cog, rather than try to squeeze it inside...

I'm just not sure as the empty box actually affords much, given the lack of context. Maybe the default state could have some other sort of imposed action?

Honestly though, at that point, it makes me wonder if we even need two different icons! If we can get the right one, it might not need to change, particularly if we're adding additional context.

Do we have the option of knocking the imposed bit out a bit? Dunno, that kind of looks like it's disabled, but maybe that's the point?

[jameskoster]

I'm just not sure as the empty box actually affords much

I agree, and I would say that's still the case with the imposed icon. In fact it then probably looks less like a checkbox.

Knocking out is possible, but probably not a precedent we want to set without 100% confidence.

Using the exact same icon in both contexts would be best, but I still don't see an appropriate icon. Perhaps we could use the same shape with different fill rules based on selection?

This looks less like a regular checkbox so reduces confusion with the main 'select all' affordance. But it still resembles bulk selection, and the change in state hopefully indicates that different actions are available. 🤔

[andrewhayward]

This looks less like a regular checkbox so reduces confusion with the main 'select all' affordance. But it still resembles bulk selection, and the change in state hopefully indicates that different actions are available. 🤔

My concern is that we stray so far away from common iconography that that it's no longer visually discoverable as a button, and just appears as some sort of status indicator.

I ran a super scientific user study (cohort size: 1), and the audience had no idea what the initial state meant, felt a bit more oriented with the change, but didn't locate it as an actionable button in either. All of the respondents reported that they liked the way GMail does it, with the menu close to the context.

That's not quite the same, as it's only selection options, rather than selection actions, but something to think about. When items are selected in GMail, the actions appear next to the selection control, and we don't really have that option!

[jameskoster]

and we don't really have that option

Perhaps we could?

Though I'm not sure this is still in the spirit of reducing the visual prominence :D

[jameskoster]

Figured I'd give the split menus approach a go. Obviously lots of rough edges to polish, but wanted to get y'alls thoughts on the approach:

https://github.com/WordPress/gutenberg/assets/846565/de03a66e-eb38-4c84-90ef-263ac70ed8ab

[jasmussen]

Thanks for keeping at it. With this split menu, would the "bulk select" portion be any different than clicking the table-header checkbox all the way to the left?

[jameskoster]

Behaviourally it's the same, though in the future the menu could include an affordance to select all rather than just the current page. Beyond that it has two purposes:

1. Enables quick bulk selection on layouts like Grid (where there's no checkbox column).
2. Groups bulk selection and actions together in the DOM which is most useful for users of assistive technology.

[andrewhayward]

It's perhaps worth giving that dropdown a little more affordance, with a chevron or similar. Cognitively I can't see anything other than a checkbox, and it's surprising when it doesn't behave like one.

We should probably make sure the visual state mirrors that of the table checkbox too.

The original intent of having the actions menu available all the time was to give an idea of which actions were available, even if they couldn't be used. If we're going to disable that menu, does it still need to be there at all when nothing's selected? It might, if we need it to be focusable after an action, but then it probably should be focusable all the time (even if disabled).

Which, while I'm hesitant to suggest adding more unlabelled buttons to the UI, makes me wonder if, when we've got the screen real-estate, we don't even bother with the second menu and just put the actions right there...

Or do we just go full-circle and put everything in the same menu?!

[jasmussen]

This is an important one to get right, so let's not rush this. It does increasingly feel like, if the checkbox metaphor is to be used, then the checkbox in the top left column table head that already selects all, becomes a competitor. To that end, it might be good to lean into something that doesn't use that metaphor after all. That said, I would avoid a chevron to indicate the dropdown aspect — these icon buttons often open dropdowns, and if we add the chevron to some but not all, then it'll be a bit messy.

[jameskoster]

We haven't found a path forward here so I'm going to close this for now. I'm optimistic that the ongoing Inspector work could unlock things, specifically once it is able to entertain multi-selection, and can be invoked from data views. A rough visual: