DataViews: add actions to list layout

[oandregal]

Part of https://github.com/WordPress/gutenberg/issues/59659 and https://github.com/WordPress/gutenberg/issues/55083 Follow-up to https://github.com/WordPress/gutenberg/pull/59637 Fixes https://github.com/WordPress/gutenberg/issues/61555

What?

This PR adds support for actions in list layout, which is only enabled for Pages and Templates as of now:

Pages	Templates

This PR also enables two-dimensional arrow-key navigation:

https://github.com/WordPress/gutenberg/assets/583546/81c24287-3f53-4744-bbc6-efd7948e0e2f

Why?

We want to make them available. See https://github.com/WordPress/gutenberg/issues/59659

How?

• Pass the existing actions prop that any other layout is using to the list view layout.
• Add two-dimensional arrow navigation to the list items, so users can use right/left arrow keys to move between the element and its actions.

Testing Instructions

• Go to a page with list view (Pages or Templates) and verify the actions are present.
• Navigate via keyboard to verify that it works as expected:
  • The item list is a single tab stop.
  • You can vertically through the list via up/down arrow keys.
  • You can move horizontally within a single item via right/left arrow keys.

[github-actions[bot]]

Size Change: +164 B (+0.01%)

Total Size: 1.75 MB

Filename	Size	Change
build/block-editor/index.min.js	259 kB	-86 B (-0.03%)
build/block-library/blocks/shortcode/editor-rtl.css	286 B	-37 B (-11.46%)	👏
build/block-library/blocks/shortcode/editor.css	286 B	-37 B (-11.46%)	👏
build/block-library/editor-rtl.css	12.3 kB	-14 B (-0.11%)
build/block-library/editor.css	12.2 kB	-14 B (-0.11%)
build/block-library/index.min.js	218 kB	-22 B (-0.01%)
build/edit-site/index.min.js	220 kB	+289 B (+0.13%)
build/edit-site/style-rtl.css	12.9 kB	+41 B (+0.32%)
build/edit-site/style.css	12.9 kB	+44 B (+0.34%)

ℹ️ 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.57 kB
build/block-editor/content.css	4.57 kB
build/block-editor/default-editor-styles-rtl.css	395 B
build/block-editor/default-editor-styles.css	395 B
build/block-editor/style-rtl.css	15.5 kB
build/block-editor/style.css	15.5 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	397 B
build/block-library/blocks/post-template/style.css	396 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	156 B
build/block-library/blocks/rss/editor.css	157 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/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/elements-rtl.css	54 B
build/block-library/elements.css	54 B
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/index.min.js	222 kB
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-commands/index.min.js	2.81 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.6 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.18 kB
build/edit-widgets/style.css	4.18 kB
build/editor/index.min.js	85.3 kB
build/editor/style-rtl.css	8.33 kB
build/editor/style.css	8.33 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}

[oandregal]

Keyboard interaction: the actions button should be reachable via the left arrow key, not by tabbing.

https://github.com/WordPress/gutenberg/pull/59637 introduced arrow-key navigation for the list items. I don't remember the details, but my expectation was that there was a single tab stop for the list items (the whole item) and the actions button (called details button at the time) was reachable via arrow keys (right/left).

Code changed a bit since and this PR re-introduces the actions button, though it's not working as I expected (note how the tab navigation actually goes into the action button and right-left arrow keys don't work):

https://github.com/WordPress/gutenberg/assets/583546/d81c6f4a-b0ed-48e8-993d-0d050335ce0a

Compare with the editor's list view behaviour:

https://github.com/WordPress/gutenberg/assets/583546/d5785a20-a175-418d-8416-6da74ac4534a

[oandregal]

By adding a second <CompositeItem> within the same <CompositeRow> this PR is trying to add two-dimensional arrow key navigation:

• top/bottom arrow navigates up/down through the list of items
• left/right arrow navigates within a single item: item <=> actions button

According to the AriaKit's docs for Composite, two-dimensional navigation works by using the following (we use a store instead of a CompositeProvider):

  <Composite store={store}>
    <CompositeRow>
      <CompositeItem>Item 1.1</CompositeItem>
      <CompositeItem>Item 1.2</CompositeItem>
    </CompositeRow>
    <CompositeRow>
      <CompositeItem>Item 2.1</CompositeItem>
      <CompositeItem>Item 2.2</CompositeItem>
    </CompositeRow>
  </Composite>

That's our basic structure, though we use the render prop to control what's rendered for the CompositeItem:

  <Composite store={store}>
    <CompositeRow>
      <CompositeItem>Item 1.1</CompositeItem>
      <CompositeItem render={<button>Item 1.2</button>} />
    </CompositeRow>
    <CompositeRow>
      <CompositeItem>Item 2.1</CompositeItem>
      <CompositeItem render={<button>Item 2.2</button>} />
    </CompositeRow>
  </Composite>

This is all well, and works as expected (codesandbox demo):

https://github.com/WordPress/gutenberg/assets/583546/fafcc46c-c8e1-430c-b252-e6d92d18cef3

However, this stops working as soon as the DropdownMenu component is used as the render prop. Here's a minimal codesandbox demo.

Pinging some of the @WordPress/gutenberg-components minds for feedback.

[DaniGuardiola]

Hi there @oandregal 👋 😄

I want to help. Two questions:

1. Did you find a solution or workaround?
2. Did you report this in the Ariakit repo? If so, can you link it?

cc @mirka as I believe you were looking into this.

I could take a look and try to fix this in Ariakit's side.

[oandregal]

Hi @DaniGuardiola thanks for offering help :)

Just this morning was tinkering with the example Lena shared in slack using only Ariaki components, and modified it so it has multiple rows. It demonstrates how Menus don't work well with composite (or there's some config that I'm missing).

I've looked into Ariakit's Github, and didn't find any issue for this. The only issue related to composite is https://github.com/ariakit/ariakit/issues/3170 created by Andrew, but it's a bit different one.

Issue created upstream at https://github.com/ariakit/ariakit/issues/3768

[oandregal]

As per the conversation at https://github.com/ariakit/ariakit/issues/3768 and this example by Dani https://stackblitz.com/edit/vitejs-vite-p27qhy?file=src%2FApp.tsx&terminal=dev there seems to be a way to make two dimensional arrow key navigation work with Ariakit's components.

Specifically, this bit is the key:

          <Ariakit.CompositeRow>
            <Ariakit.CompositeItem render={<button>Button</button>} />
            <Ariakit.MenuProvider>
              {/* here, CompositeItem has precedence and pressing arrow down
              goes downwards in the 2d composite as expected */}
              <Ariakit.CompositeItem
                store={store}
                render={<Ariakit.MenuButton>Menu</Ariakit.MenuButton>}
              />
              <Ariakit.Menu>
                <Ariakit.MenuItem>Hello</Ariakit.MenuItem>
              </Ariakit.Menu>
            </Ariakit.MenuProvider>

            <Ariakit.CompositeItem render={<button>Button</button>} />
          </Ariakit.CompositeRow>

https://github.com/WordPress/gutenberg/assets/583546/1a3f57c8-6b18-4fd4-a2cd-9a402c67df36

I'm looking into how we can achieve the same with the existing @wordpress/components we have.

[oandregal]

Sharing my ongoing work, as per the slack conversation. In dc0f82d I switched to use the underlying Ariakit components directly, and it's working:

https://github.com/WordPress/gutenberg/assets/583546/51c2ac13-1caf-43f6-b4d8-5bd137f6fbbc

Of course, we want to use the @wordpress/components instead, and I'm still investigating how to do that without breaking the keyboard interactions.

[oandregal]

Using the Composite* items from @wordpress/components as of e97be2b101cb28f887e0b54e5286d00ac93fd392 still works as expected. The last bit is substituting the following by @wordpress/components:

<Ariakit.MenuProvider>
    <CompositeItem
        store={ store }
        render={
            <Ariakit.MenuButton>Menu</Ariakit.MenuButton>
        }
    />
    <Ariakit.Menu>
        <Ariakit.MenuItem>Hello</Ariakit.MenuItem>
    </Ariakit.Menu>
</Ariakit.MenuProvider>

[DaniGuardiola]

I'm not sure why we want to use wordpress components here. Are the styles the exact same? These components are little more than themed and slightly more abstracted Ariakit components, not necessarily meant to be low-level. I think using Ariakit components here directly is fine unless you need to reuse a significant mount of styles from the wordpress component in question.

Edit: I think I misunderstood what's being done here. Is this DataViews component supposed to be composed with other components by its consumer?

[oandregal]

As of https://github.com/WordPress/gutenberg/pull/60805/commits/f10e368fd9de4f1e8b7c277332a354773b5a1b7c I've got it working with @wordpress/components:

https://github.com/WordPress/gutenberg/assets/583546/a48b37fb-707e-4e8f-aacc-bc1cc1d6a31a

It's not complete, I need to add support for primary actions, verify everything is working properly, etc. Also see if there's ways to modify ItemActions so I can reuse here — as soon as we start improving the other layouts to add arrow key navigation I presume we'll run into the same issues with this component.

[oandregal]

I'm not sure why we want to use wordpress components here. Are the styles the exact same? These components are little more than themed and slightly more abstracted Ariakit components, not necessarily meant to be low-level. I think using Ariakit components here directly is fine unless you need to reuse a significant mount of styles from the wordpress component in question.

As far as my understanding goes, using Ariakit directly is not allowed — there's even lint rules that prevent you from committing if you do so. I'm not sure why this is. Anyway, I've got this PR working with @wordpress/components :)

[tyxla]

I'm not sure why we want to use wordpress components here. Are the styles the exact same? These components are little more than themed and slightly more abstracted Ariakit components, not necessarily meant to be low-level. I think using Ariakit components here directly is fine unless you need to reuse a significant mount of styles from the wordpress component in question.

As far as my understanding goes, using Ariakit directly is not allowed — there's even lint rules that prevent you from committing if you do so. I'm not sure why this is. Anyway, I've got this PR working with @wordpress/components :)

This is correct and very intentional. The @wordpress/components package uses Ariakit under the hood, but we aim to keep this an implementation detail and not something that the end user has to care about. For various reasons, we want to add custom layers on top of Ariakit, and using Ariakit components directly might prevent the consumers from leveraging the benefits of those layers. Keeping those internals private is also helpful in case we decide to start using a different underlying library for component X.

[oandregal]

Interaction-wise, this is working now with every kind of action (modal & non modal):

https://github.com/WordPress/gutenberg/assets/583546/b86966b5-6f58-4a64-8819-0ff867f077e9

I still have to test all action flows and verify that everything works properly. I'm also looking for opportunities to improve the existing code now that it's working, so things can change a bit code-wise.

@youknowriad @jameskoster While I do that, I'd welcome feedback on the following:

What primary actions should we display in Pages & Templates in the list view? The same as in any other view or limit it only to Edit?

Page	Primary actions for Table layout	Primary actions for Grid layout	Primary actions for List layout
Templates	Edit	-	Edit
Pages	Edit, View, Trash	-	Edit

The original issue suggested only Edit https://github.com/WordPress/gutenberg/issues/59659 and that sounds good to me, but I wanted to double check. I plan to implement this in consumer-land, not as a new dataviews API: this is, the Pages component will change the primary actions depending on layout.

[youknowriad]

The original issue suggested only Edit https://github.com/WordPress/gutenberg/issues/59659 and that sounds good to me, but I wanted to double check. I plan to implement this in consumer-land, not as a new dataviews API: this is, the Pages component will change the primary actions depending on layout.

Edit as the only primary action makes sense but I actually wonder about adding more things to think about from a consumer's perspective. What if we just say: The list action can only have one primary action and it's always the first action?

[jameskoster]

What if we just say: The list action can only have one primary action and it's always the first action?

I wouldn't be opposed to that, but I also don't mind keeping all primary actions visible for consistency with table layout, so long as we tweak the visuals a little:

• Actions are only visible on the selected row, or when a row is focused/hovered.
• Actions are positioned in the top-right corner to take up less space.

[oandregal]

This is the latest

Only one primary action is visible + primary action only visible on hover + action buttons aligned to the top.

Pages	Templates

https://github.com/WordPress/gutenberg/assets/583546/81c24287-3f53-4744-bbc6-efd7948e0e2f

Remaining issues

As for my testing, these are three:

1. When the "all actions" button is focused, arrow up/down opens the menu instead of moving up/down the row.

https://github.com/WordPress/gutenberg/assets/583546/cc7fcc4c-f33a-4655-8f7b-5a2845506435

2. When deleting an item from the list, you cannot longer reach the list.

https://github.com/WordPress/gutenberg/assets/583546/710bcdf2-2d3c-4ade-8092-b17dc24e956c

3. When the menu is opened, the primary action will be always visible. The same happens in the existing Table layout.

List layout:

https://github.com/WordPress/gutenberg/assets/583546/ae4a377b-2a24-49ca-a690-a3d6994caea2

Table layout:

https://github.com/WordPress/gutenberg/assets/583546/cc6d6dd9-feee-47cc-b027-f7ca823dc669

[jameskoster]

@oandregal iirc the ellipsis icon is permanently visible in the actions column for a11y reasons (table cells shouldn't be visually empty), but in this context (list layout) that requirement doesn't exist.

With that said do you think it would be possible to sync the visibility of the buttons? IE, both the primary action and the edit button are only visible when hovering/focussing a row, or when the row is selected.

[oandregal]

When deleting an item from the list, you cannot longer reach the list.

Fix at https://github.com/WordPress/gutenberg/pull/60805/commits/6afa65262b85ba581b18710e9313b2f8d8fc0eac

As per https://github.com/ariakit/ariakit/issues/3232#issuecomment-1863533666, the issue is that Ariakit doesn't update the activeItem when the item list is update (e.g.: an item is removed from the list), so this is something consumers have to deal with.

I've made it so the focus goes down the list. If it's the last item of the list, it goes to the one before.

https://github.com/WordPress/gutenberg/assets/583546/0db6ee35-00c4-4811-8a62-71e550399f9d

[oandregal]

When the "all actions" button is focused, arrow up/down opens the menu instead of moving up/down the row.

Fix at https://github.com/WordPress/gutenberg/pull/60805/commits/7052fd2eecab0fada1fd93db8077f56097d77746

The issue here came from switching from using Ariakit components directly to use @wordpress/components (that use ariakit's under the hood), this commit https://github.com/WordPress/gutenberg/pull/60805/commits/89a6c9d6879056a5617285a41448a853be5bb7d3. I wasn't able to configure the Dropdown to make it work, so I had to resort to use the composite store directly.

https://github.com/WordPress/gutenberg/assets/583546/88d3a092-e6fa-4741-86e8-80c39378d5b4

[oandregal]

With that said do you think it would be possible to sync the visibility of the buttons? IE, both the primary action and the edit button are only visible when hovering/focussing a row, or when the row is selected.

Done this at https://github.com/WordPress/gutenberg/pull/60805/commits/249d86e5cd4110e02e106a90874cf01ce2b3929d

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

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: oandregal <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: DaniGuardiola <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: mrfoxtalbot <[email protected]>

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

[oandregal]

All issues and feedback have been addressed, just waiting for an approval :)

[youknowriad]

In terms of behavior this is working great for me. I did notice the double snackbars (inside and outside the preview but these should probably be solved separately)

[oandregal]

I'm adding e2e tests for this at https://github.com/WordPress/gutenberg/pull/61648

[jameskoster]

Nice work on this 🚀

A couple of follow-ups;

• I think the icons size / position can be adjusted slightly so they take up less space, similar to https://github.com/WordPress/gutenberg/pull/60805#issuecomment-2102569223
• The show/hide mechanic should probably be applied to the wrapper, because currently titles appear truncated unnecessarily early:

[youknowriad]

Even though the "navigate" metric in the site editor is a bit unstable in our tests, I do think this PR had a small impact on the numbers there. I wonder if you have ideas.