Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List View: Update draggable chip to resemble the list view item when dragged #49820

Closed
wants to merge 6 commits into from

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Apr 14, 2023

What?

Part of #49563

This is an exploratory PR to look into customising the draggable chip that's used when dragging blocks within the list view. The goal is to make it feel like the user is dragging the real list item, rather than using an abstraction for the drag chip.

Note: 🚧 🎨 this is just an experiment at the moment, it'll need design feedback on what the chip should ideally look like. The opacity is added so that the drop indicator line isn't too obscured.

Why?

There are two main goals here:

  1. Make the chip more closely resemble the list view items, so that moving items around feels a little closer to "you've picked up that row you're dragging"
  2. Reduce how the chip obscures the list view drop indicator line.

To elaborate on the second point above: while working on dragging to all levels of the block hierarchy (#49742) it's become clear that when dragging to higher levels of the hierarchy, we need the chip not to obscure the drop indicator line, otherwise it's hard for users to see where they'll be dropping the dragged block.

Not covered

  • The mouse cursor icon is not addressed in this PR

How?

  • Update the BlockDraggable component to accept an __experimentalDragComponent and pass it down to the Draggable component.
  • Also allow the component passed to Draggable to be overridden, and for BlockDraggable to accept an elementId
  • In the List View, set the draggable component to null, and pass BlockDraggable the id of the list view row — this tells Draggable to make a clone of the list view item for dragging
  • Add some styling for the cloned version of the list view item, so that it more closely resembles the list view item while dragged.

Testing Instructions

  1. Open a post or page with a bunch of blocks in it.
  2. Try dragging blocks around and see how the chip looks with this PR applied.
  3. Try adding a long heading, and add an id attribute in the Advanced panel. It should display the heading title and id attribute in a way that's pretty similar to the non-dragged version.

Testing Instructions for Keyboard

Screenshots or screencast

Before After
image image

Screengrab:

2023-08-24.16.21.42.mp4

@andrewserong andrewserong added Needs Design Feedback Needs general design feedback. [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Experimental Experimental feature or API. labels Apr 14, 2023
@andrewserong andrewserong self-assigned this Apr 14, 2023
@github-actions
Copy link

github-actions bot commented Apr 14, 2023

Size Change: +76 B (0%)

Total Size: 1.51 MB

Filename Size Change
build/block-editor/content-rtl.css 4.27 kB +10 B (0%)
build/block-editor/content.css 4.26 kB +10 B (0%)
build/block-editor/index.min.js 212 kB -175 B (0%)
build/block-editor/style-rtl.css 15.1 kB +66 B (0%)
build/block-editor/style.css 15 kB +68 B (0%)
build/block-library/index.min.js 203 kB -1 B (0%)
build/components/index.min.js 245 kB -74 B (0%)
build/compose/index.min.js 12.1 kB +21 B (0%)
build/core-commands/index.min.js 2.72 kB +139 B (+5%) 🔍
build/customize-widgets/index.min.js 12.1 kB +3 B (0%)
build/edit-post/index.min.js 35.4 kB -75 B (0%)
build/edit-site/index.min.js 91.1 kB +36 B (0%)
build/edit-site/style-rtl.css 13.2 kB +19 B (0%)
build/edit-site/style.css 13.2 kB +18 B (0%)
build/edit-widgets/index.min.js 16.9 kB +2 B (0%)
build/format-library/index.min.js 7.59 kB +28 B (0%)
build/warning/index.min.js 249 B -19 B (-7%)
ℹ️ 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.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 629 B
build/block-library/blocks/button/style.css 628 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.63 kB
build/block-library/blocks/cover/style.css 1.62 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 293 B
build/block-library/blocks/embed/editor.css 293 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-interactivity.min.js 317 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 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.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 654 B
build/block-library/blocks/group/editor.css 654 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 76 B
build/block-library/blocks/heading/style.css 76 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 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.41 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-interactivity.min.js 1.83 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 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.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view-interactivity.min.js 988 B
build/block-library/blocks/navigation/view-modal.min.js 2.85 kB
build/block-library/blocks/navigation/view.min.js 469 B
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 401 B
build/block-library/blocks/page-list/editor.css 401 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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-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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 314 B
build/block-library/blocks/post-template/style.css 314 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 335 B
build/block-library/blocks/pullquote/style.css 335 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 302 B
build/block-library/blocks/query-pagination/style.css 299 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 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 132 B
build/block-library/blocks/read-more/style.css 132 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 607 B
build/block-library/blocks/search/style.css 607 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 631 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 234 B
build/block-library/blocks/separator/style.css 234 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 203 B
build/block-library/blocks/site-logo/style.css 203 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.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 432 B
build/block-library/blocks/table/editor.css 432 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.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.8 kB
build/block-library/style.css 13.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.2 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 932 B
build/commands/style.css 929 B
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/core-data/index.min.js 16.8 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.38 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/style-rtl.css 7.62 kB
build/edit-post/style.css 7.62 kB
build/edit-widgets/style-rtl.css 4.52 kB
build/edit-widgets/style.css 4.52 kB
build/editor/index.min.js 45.5 kB
build/editor/style-rtl.css 3.53 kB
build/editor/style.css 3.52 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 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/index.min.js 10.4 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 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/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 2.71 kB
build/patterns/style-rtl.css 240 B
build/patterns/style.css 240 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 958 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 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 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.85 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.73 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 958 B
build/widgets/index.min.js 7.16 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
Copy link
Contributor

Nice work. Here's a GIF showing a semitransparent "row" from the list view being lifted up as you are dragging:

draggable chip

One of the things about drag and drop is that for the longest time, both for blocks in the canvas and for blocks in the list view, we've discussed in various theads that ideally we could adopt a drag and drop method that is instant, like this:

instant draggable

The existing behavior in the canvas of graying out the block you're dragging, collapsing it to a chip, then dropping it on a blue line — that's implemented in lieu of a more instant behavior such as the above.

I understand that is a larger undertaking and refactor of drag and drop in general, that's why it hasn't happened yet. But it bears mentioning that to an extent, that's still something to explore. This is perhaps especially important for the list view, where we are already a couple of steps towards that: already now, the block being moved is taken out of the flow when moved, it's just collapsing into a blue line, so to speak.

Instead of that, I could see it working a bit more like how Google Keep works:

keep

I know that's a bit of a mouthful, but that is context for why I think if we do go this route of showing the item being moved, we probably need to adopt a library for it, so we can do collapsing animations, and proper moving ancestors around to "make room" for the new location of the block being dropped. The work in this branch is impressive, but I'm not convinced without the more full behavior, that it's a benefit over what ships in trunk, where the chip is idential to what you'd see in the canvas. What do you think?

@andrewserong
Copy link
Contributor Author

My reply turned out rather long, so I'll just add a TL;DR at the beginning here: I think we'll need this styling change to unblock further UX fixes in the shorter-term (drag to parent levels), and we can explore evaluating libraries in the longer-term / in-tandem with incremental UX fixes.


Thanks for taking a look @jasmussen, it's important to take a step back and see how all this fits into the bigger picture! As I see it we currently have two potential directions to go in, in order to overall improve the UX for drag and drop in the list view:

  1. Iteratively improve the existing code base and chip away at the UX, or
  2. Completely overhaul the list view and leverage a library for better interactions

My gut feeling is that the former is a better use of time at the moment, for a few reasons:

  • It doesn't preclude doing a larger refactor in the future
  • We know there are concrete tasks that will improve the UX (and have line of sight on them in List View: Tweaks to improve usability, visual feedback, and keyboard behaviour #49563)
  • We can try out pieces of an improved UX within the plugin and get a better feel for each feature, one-by-one
  • There is currently a lot of logic and flows attached to the list view, and it is unknown how many of them will transfer over neatly to any one library we might evaluate. The recent issues with the Popover component being refactored to use floating UI make me quite cautious about taking on larger refactors, as they can be deceptively complex
  • Because of how critical the list view is to the UX of working with blocks, it's likely we'll always need a high level of customisation, which might not be possible with libraries

Where does adding a custom draggable chip fit it?

While as a standalone PR it mightn't be obvious why this particular change is necessary, I'll try to recap my current explorations into improving the overall drag and drop UX for the list view (tracked in #49563, roughly from top to bottom).

  1. Currently it's very difficult to drag to the top and bottom of the list, or below an expanded container block
  2. To fix this requires two parts — enable dragging to parent levels, and expand the area above and below the list view where a block can be dragged
  3. I've made some good progress for dragging to parent levels over in List View: Allow dragging to all levels of the block hierarchy #49742 — this PR revealed that as soon as we allow dragging to parents, we need the chip to no longer obscure the drop indicator line

So, essentially the display of the drag chip is a blocker for allowing users to drag to parent levels, as it obscures the drop indicator line.

In terms of whether or not it makes for a good UX to have the partially transparent list view item and the drop indicator at the same time — personally, I quite how it looks as an incremental step. And it's pretty consistent with another tree library, React Complex Tree, that @mtias shared recently.

Longer-term, I do think it's worth exploring the idea of drop-in-place, and expanding and contracting list view rows. My suspicion is that we might wind up running into usability issues with expanding the whole list view on drop, as it moves the list view around, which some folks might find hard to work with. Interestingly React Complex Tree uses the drop indicator line, but doesn't hide the block to be moved, instead it simply greys it out, which could also be a fun thing to try.

Hope that all helps for extra context, apologies that this comment is so long!

@ramonjd
Copy link
Member

ramonjd commented Apr 17, 2023

This is pleasing to my eye. The chip doesn't hide the inserter line and it is comforting to know that I'm dragging the right thing. I haven't memorized all the block icons yet. 😄

One question: what's your take on how to indicate dragging a sequence of siblings?

2023-04-17 12 19 39

Would it be useful in a later exploration to show multiple stacked chips, or extending chip content in such a situation?

@andrewserong
Copy link
Contributor Author

andrewserong commented Apr 17, 2023

Thanks for taking this for a spin!

One question: what's your take on how to indicate dragging a sequence of siblings?

Good catch!

Would it be useful in a later exploration to show multiple stacked chips, or extending chip content in such a situation?

Off the top of my head, in a later exploration, it could be fun to either show multiple stacked chips / extend them vertically so it approximates the section being dragged, like you mention. We could always cap it if it looks too long with multiple blocks, and/or fade the subsequent ones. For now, I'd probably leave it as just using the info for the first dragged block in this PR.

@apeatling
Copy link
Contributor

Thinking ahead -- I suspect with the path this will eventually take (leaving the space where it was removed, providing space for the new spot) it's going to need to attach to the cursor in the position you started dragging it. With it attaching to the cursor at the side there's going to be a noticeable jump back and forth as you drag and drop. I also wonder if this will feel more natural even without these future steps in place?

@andrewserong
Copy link
Contributor Author

With it attaching to the cursor at the side there's going to be a noticeable jump back and forth as you drag and drop. I also wonder if this will feel more natural even without these future steps in place?

That's a great idea, I'll give that a try 👍

@andrewserong andrewserong changed the title List View: Add a draggable chip that more closely resembles the list view item List View: Update draggable chip to resemble the list view item when dragged Apr 18, 2023
@andrewserong andrewserong force-pushed the try/list-view-add-custom-draggable-chip branch from a72deaf to 4a0a913 Compare April 18, 2023 06:32
@andrewserong
Copy link
Contributor Author

andrewserong commented Apr 18, 2023

Update: I've managed to get it mostly working now by retaining the initial position — I've reworked the PR a bit to simplify things (it's quite a small changeset now!), and pass down the elementId of the list item row to Draggable so that the real list item can be copied in place. It's working quite well, with a caveat that the drop indicator line is being rendered above the list item. Still, I think it reveals that this approach is going to make for a nicer UX:

2023-04-18.16.31.23.mp4

Next up: I'll look into seeing if we can get the list view item to render above the drop indicator line. I think the culprit is that Draggable attaches to the element wrapper when using elementId rather than to the owner document body, so z-index doesn't appear to work to break the list item out of its current level in the stacking hierarchy. As a quick hack, I can swap out the line in Draggable so that the order is correct, but I'll need to give this a little more thought so that we can get it working in a way that doesn't break any other Draggable usage.

All this seems quite promising so far, thanks again for the suggestion @apeatling. I'll keep chipping away.

@github-actions
Copy link

github-actions bot commented Apr 18, 2023

Flaky tests detected in 162ddab.
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/5947965716
📝 Reported issues:

@jameskoster
Copy link
Contributor

That last change inspired an idea that may be a big can of worms, but in the spirit of ideas being cheap I'll ask anyway: would it be feasible for the new chip and the drop indicator to be combined?

So instead of the blue line, a space equal to the height of the chip appears, pushing the other blocks out of the way? If it's not trivial to try, then please ignore :)

@jasmussen
Copy link
Contributor

So instead of the blue line, a space equal to the height of the chip appears, pushing the other blocks out of the way? If it's not trivial to try, then please ignore :)

That's essentially what I'm asking in this comment, but you managed to do with much fewer words. Teach me this magic!

As is, I don't mind this branch as a step forward, it might bring us a small step closer to what you are suggesting. But it also departs the list view from the look of drag and drop in the canvas, and it's not clear to me this is a net win overall. But I trust Andrew quite a bit, and if the best approach forward is to slowly iterate, I'm definitely one to support that. But all the better to have a compelling destination to aim for, and I would agree — instant "movement" with a perfectly honed dragging behavior seems appropriate for this.

@richtabor
Copy link
Member

But it also departs the list view from the look of drag and drop in the canvas, and it's not clear to me this is a net win overall.

I share this same sentiment.

We already have the block icon in the current chip, which validates the selection. I think we should focus on the movement element, which leads to better confidence on dropping the chip into place. Unless I'm missing something?

@andrewserong
Copy link
Contributor Author

Thanks for the feedback and encouragement, folks, much appreciated!

So instead of the blue line, a space equal to the height of the chip appears, pushing the other blocks out of the way?

Yes, that's very much one of the end goals to explore, nicely articulated 👍! Getting there will be non-trivial, but I believe we can get there iteratively, which is my current objective. But even if we don't get all the way there, we'll still have improved the UX quite a bit along the way.

I think we should focus on the movement element, which leads to better confidence on dropping the chip into place. Unless I'm missing something?

I think answering this question will hopefully help get to the heart of why I believe we need to take an iterative approach to reach our goal. Over in #49563 I've broken down some of the UX issues we need to resolve in order to improve the drag and drop UX, and the highest impact of those tasks is unfortunately not very obvious. But it's improving the behaviour of dragging to parent blocks, which I'm exploring over in #49742.

That PR (which is still an early experiment) looks at the mouse cursor positioning, and explores allowing the cursor to drop to any point of the block hierarchy in deeply nested blocks. Fixing that up will unlock most of the subsequent explorations, and is a requirement before we're able to look at making space in the destination drop target. The connection here is that once we have the ability to accurately target all levels of the block hierarchy, we'll be in a better place to visually reflect that by showing the block moving in place. That's my hunch so far, at least 🙂

However, while working on that PR, I encountered the issue that the current drag chip obscures the drop target. This isn't an issue in the editor canvas, as blocks are spaced out much more than the list view items are. So, before we can improve dragging to parent levels of the block hierarchy, we first need to ensure that the user is able to see all levels of the block hierarchy, and this seems like a good step to getting there to me.

All that said, while I believe I need to work iteratively here in order to safely move the UX forward without breaking anything, there's also no rush to merge this PR. I'm happy to leave this one open until the drag-to-block-parents PR (#49742) is in a good, reviewable shape.

Thanks again for all the questions and ideas!

@andrewserong
Copy link
Contributor Author

Code update: I've opened up a separate PR (#49911) to update the Draggable component to allow attaching to the owner document body instead of the element wrapper — that should unlock rendering the dragged item over the drop indicator line in this PR.

@richtabor
Copy link
Member

But even if we don't get all the way there, we'll still have improved the UX quite a bit along the way.

I'm just struggling to identify how changing the chip to be larger/resemble the list view item is an improvement, if we don't have the "pushing other blocks out of the way" UX. They seem quite knit together.

However, while working on that PR, I encountered the issue that the current drag chip obscures the drop target.

Is it a matter of opacity, or size? This PR makes it bigger. Seems the "pushing blocks out of the way" would solve for the drop target being covered, in both the canvas and the list view (without requiring a chip design change). Perhaps an improvement in the chip design, for list view, would be a nice follow-up to try out though.

@andrewserong
Copy link
Contributor Author

Thanks for the feedback, Rich!

They seem quite knit together.

From my perspective, I think they're related, but my subjective feeling is that it's still a nice enhancement on its own. It's fairly similar to the visual behaviour of React Complex Tree, and it's less of an abstraction in terms of shape. That said, I definitely don't want to try to merge anything that folks don't feel confident about.

Is it a matter of opacity, or size?

Opacity is probably the main issue, we could always try tweaking the opacity of the existing drag chip, too.

For now, I'll leave this PR open, and continue on with my work on the drag to parent PR. We can then revisit what might make a good logical step to change the drag chip in a more holistic way. I think it'll become a bit clearer once I can demo things all together 🤞

@richtabor
Copy link
Member

For now, I'll leave this PR open, and continue on with my work on the drag to parent #49742. We can then revisit what might make a good logical step to change the drag chip in a more holistic way. I think it'll become a bit clearer once I can demo things all together

Sounds good, agree. A lot of potential to improve on this front. 💪

@andrewserong andrewserong force-pushed the try/list-view-add-custom-draggable-chip branch from 4a0a913 to 51d787d Compare August 18, 2023 07:00
@andrewserong
Copy link
Contributor Author

Update: I've given this a rebase, as I'd like to play around with some of the visuals here again now that the drag and drop UX has been improved in other PRs. I see it's a bit buggy after the rebase, so it isn't ready for reviews or feedback just yet.

I'll experiment with this a little next week.

@andrewserong
Copy link
Contributor Author

andrewserong commented Aug 24, 2023

A non-urgent update: I've fixed up some of the styling and bugs, and this is ready for design review / playing around with now, and to see what we think of it. Here is a screengrab:

2023-08-24.16.21.42.mp4

To recap what this PR is exploring:

  • Replace the draggable chip for the List View when dragging and dropping blocks so that the dragged block looks (almost) the same as the list view item.
  • Now that we no longer hide the dragged blocks, there isn't a jump when dragging, so the transition from not-dragging to dragging should now feel a fair bit smoother.
  • The drag chip is transparent so that the drop indicator line is visible (this is particularly useful when dragging up and down a nested Group block's hierarchy, which is now possible).

All up for discussion as to whether or not folks think this is an improvement over what's in trunk, of course! My personal preference is that I like a combination of both the transparent drag chip in this PR and keeping the drop indicator line — now that we no longer hide dragged items, this means that the list overall feels pretty solid and doesn't move around as you drag an item up and down the list. It's also pretty consistent with dragging items on a Github project board, where the dragged item is transparent, and there's a blue drop indicator line for the drop target.

Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is an improvement compared to what is in trunk. Of course it can continue to be iterated on alongside the list of ongoing improvements you have in the main issue. Standalone it's an improvement as it is and will continue to improve as more of that work is done. ✅

@richtabor
Copy link
Member

A non-urgent update: I've fixed up some of the styling and bugs, and this is ready for design review / playing around with now, and to see what we think of it

What's the lift to have other blocks live/pushed out of the way when dragging?

@andrewserong
Copy link
Contributor Author

andrewserong commented Sep 14, 2023

What's the lift to have other blocks live/pushed out of the way when dragging?

Oh, I'm not sure if I've heard the expression "what's the lift" before, so wasn't sure if this means "how hard would it be to" or "what would be the benefit of"... I'll answer both 😀

Difficulty level

I think it'd be non-trivial because the way draggable components currently work is that either a drag chip or duplicate of the component is rendered for dragging into another place, so we'd need to come up with another approach for handling this. Possibly by faking it by smoothly hiding the dragged item and then secretly "moving" that item as the user drags up and down... or possibly by offsetting the translateY position of all the block list items as a user drags up and down the list. Either way, I believe it'll be quite a deep rabbithole to come up with something that feels smooth.

Value or drawbacks of doing so

The primary issue from my perspective is that by moving items out of the way, the list items would no longer feel solid, and it can be challenging for users if they're trying to drop an item somewhere and elements are moving around. One of the benefits we got when we stopped hiding the dragged items, is a greater feeling of stability in the list view.

On the other hand, the main benefit would be the WYSIWYG feeling that you're really moving an item. This is a common pattern in flat lists like to-do-list items where it can feel quite intuitive. I've noticed that a lot of tree-like interfaces often don't drag in this way, though — I suspect there's quite a challenge with nested lists to make it clear to the user exactly what's going to happen when they let go of the mouse button. I notice that many drag interfaces in productivity tools seem to use both a transparent drag component and a drop indicator line (a bit like this PR), possibly for that reason?

I quite like the combination of a drop indicator line with the drag component that resembles the list item, here's a few examples from other apps that use that approach:

Notion Github Projects Google Drive
image image

So, from my perspective, given the difficulty of implementing drag behaviour where items move out of the way, and that many other similar interfaces don't do that, I'd probably want to see the UX interactions proven out as a desired path forward before attempting it in code.

@mtias
Copy link
Member

mtias commented Nov 24, 2023

@andrewserong @richtabor we had an old exploration on drag displacement that felt pretty good: #34022 It was running into performance issues because it predated a lot of the improvements done to list view since then.

I think there's a lot of merit to displacement and the clarity it affords for dropping something in place. Nesting is slightly trickier, but not impossible.

@andrewserong
Copy link
Contributor Author

Thanks for the link @mtias! That last screengrab in the PR in particular (#34022 (comment)) helps give an overview of how it might work combined with the windowing logic (at least visually). Part of my concern was how it might look with longer lists, but overall that does seem promising for displacing list view items 👍

I'm currently focusing on a few of the lower-hanging-fruit pieces of drag and drop in the editor canvas and the list view, but I'll add this to my list to hack on again. I'll likely open up a separate PR to see what's possible in the current state of the list view.

Nesting is slightly trickier, but not impossible.

Something I like about some of the screengabs in #34022 is that while dragging, the dragged item becomes solid with a blue background — I think something like that will help with nesting as the left edge of the dragged block is much clearer visually, so it'll be easier for folks to see what nesting level they're going for.

Let's see how we go!

@andrewserong
Copy link
Contributor Author

I've opened up an issue over in #56539 to capture the next steps to attempt this PR again, but with behaviour to move other list items out of the way, in order to create more of a WYSIWYG experience while dragging within the list view.

Thanks again for the feedback and ideas, everyone! I'll close out this PR now, but will revisit the ideas in follow-up explorations. Please share any other ideas or suggestions over in #56539 that anyone would like considered or incorporated when we try this again 🙂

My first step will most likely be to look into #33684 (expand collapsed list view items when dragging over them) as we'll need that in place in order to do WYSIWYG dragging to nested items without showing a drop indicator line.

@andrewserong
Copy link
Contributor Author

I've started a proof of concept for displacing list view items over in #56625. Happy for any early feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. Needs Design Feedback Needs general design feedback. [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants