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: Displace list view items when dragging (a bit more WYSIWYG) #56625

Merged
merged 32 commits into from
Jan 22, 2024

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Nov 29, 2023

What?

Partly addresses: #56539, follows discussion on #56579.

Note

🚧 This PR is still a bit of a hack — for the moment, let's focus on the usability issues, we can tidy the code up later.

This PR explores one potential approach for displacing list view items when dragging within the list view. Or, to put it another way, while dragging blocks in the list view, move the other blocks out of the way.

Why?

The goal is to create a more WYSIWYG experience while dragging blocks in the list view. By displacing items, and using a drop indicator that effectively previews what the list item will look like when a user finished dropping their item, the list view should feel a bit more "solid" to use.

How?

While dragging over the list view, move existing list view items up or down to make room for a drop indicator that looks like what the block looks like once it's dropped. I.e. a drop indicator that is a bit like a preview. Details "how" follows:

  • Generate an object keyed by clientId containing the global index for all blocks within the list view.
  • In the list view branch, for each block, look up the index of the current block and compare it to the index for the block being dragged over. Move blocks out of the way by applying either an is-above or is-below classname.
  • Use transform: translateY() rules to offset the blocks so that they move out of the way. By using CSS for this, we get nice and smooth animations which disguises the fact that the dragging behaviour only really updates every 200ms. This hopefully gives the appearance of smoother drag and drop, without (again hopefully) degrading performance.
  • Hide the normal list view drop indicator line, and use a drop indicator that previews the list view item in its final position (make it more WYSIWYG)
  • Auto-expand list view items on hover
  • Make the drag chip used in the list view be slightly transparent so that you can see where you dropping underneath it

To-do

  • Leave a block sized space when dragging starts (don't move blocks around until the user drags over another block)
  • Smoothly handle dealing with the space when dragging outside of the list view area (i.e. don't leave the space where it is)
  • Correctly animate when releasing the mouse cursor so that the dragged item smoothly goes back into position (or at least remove the wrong animation that is there at the moment)
  • Smoothly deal with the space left when dragging multiple blocks (i.e. can we use a CSS variable instead of hard-coded height for the above / below positioning)
  • Come up with a better solution for dragging into collapsed blocks
  • Update styling of the drag chip
  • Look into performance issue when dragging over editor canvas
  • Pick a different level of opacity / make it easier to see where you're dragging
  • Come up with a solution for dragging to the desired hierarchy at the end of a container block
  • Smooth dropping of list view items doesn't appear to be working in the site editor Known issue, unrelated to this PR: https://github.com/WordPress/gutenberg/pull/57133/files#r1444129276
  • Fix jumpiness in Safari due to scroll-while-dragging behaviour

Testing Instructions

In a post, page, or template with many blocks, try dragging up and down the list view. How does it feel to use? Also, try dragging and dropping on collapsed blocks — while hovering, the block should expand. Where do you get stuck in using this?

Try a post, page, or template with heavy nesting. How does it feel to drag to the end of a nested block, and adjust the hierarchy of where you're dropping?

Screenshots or screencast

image
2024-01-15.15.33.01.mp4

@andrewserong andrewserong added [Feature] Drag and Drop Drag and drop functionality when working with blocks [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Experimental Experimental feature or API. labels Nov 29, 2023
@andrewserong andrewserong self-assigned this Nov 29, 2023
@andrewserong
Copy link
Contributor Author

To expand on the issue of nesting within a block, if we attempt to remove the space when hovering over to perform a nesting gesture, we can get stuck. The following is an example of this if we were to remove the space (this PR does not currently remove that space):

2023-11-29.16.17.12.mp4

As a result, I think I'm leaning toward the idea of expanding over collapsed blocks while dragging as in #56579 🤔

Copy link

github-actions bot commented Nov 29, 2023

Size Change: +1.65 kB (0%)

Total Size: 1.7 MB

Filename Size Change
build/block-editor/index.min.js 248 kB +912 B (0%)
build/block-editor/style-rtl.css 15.7 kB +363 B (+2%)
build/block-editor/style.css 15.7 kB +363 B (+2%)
build/edit-site/style-rtl.css 15.2 kB +4 B (0%)
build/edit-site/style.css 15.2 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.33 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 590 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.4 kB
build/block-editor/content.css 4.39 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 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 138 B
build/block-library/blocks/audio/theme.css 138 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 419 B
build/block-library/blocks/button/editor.css 417 B
build/block-library/blocks/button/style-rtl.css 632 B
build/block-library/blocks/button/style.css 631 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.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 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 138 B
build/block-library/blocks/embed/theme.css 138 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 322 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 229 B
build/block-library/blocks/form-input/editor.css 228 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 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 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 452 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 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.75 kB
build/block-library/blocks/gallery/style.css 1.75 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 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.61 kB
build/block-library/blocks/image/style.css 1.6 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 2.02 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 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 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.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 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 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 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-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 345 B
build/block-library/blocks/post-featured-image/style.css 345 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/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 647 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 602 B
build/block-library/blocks/search/style.css 602 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 475 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 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.49 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 215 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.6 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 235 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.73 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.96 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.69 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 24.9 kB
build/edit-post/style-rtl.css 5.68 kB
build/edit-post/style.css 5.68 kB
build/edit-site/index.min.js 196 kB
build/edit-widgets/index.min.js 17.4 kB
build/edit-widgets/style-rtl.css 4.44 kB
build/edit-widgets/style.css 4.43 kB
build/editor/index.min.js 61.7 kB
build/editor/style-rtl.css 5.48 kB
build/editor/style.css 5.48 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.98 kB
build/format-library/style-rtl.css 500 B
build/format-library/style.css 500 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/file.min.js 442 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 13.1 kB
build/interactivity/navigation.min.js 1.23 kB
build/interactivity/query.min.js 791 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.49 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 5.43 kB
build/patterns/style-rtl.css 564 B
build/patterns/style.css 564 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.08 kB
build/preferences/index.min.js 2.82 kB
build/preferences/style-rtl.css 725 B
build/preferences/style.css 728 B
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1.02 kB
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 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.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.06 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 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 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.22 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@talldan
Copy link
Contributor

talldan commented Nov 29, 2023

When you begin to drag, the blocks move up and down to get out of the way

I'm trying to think about it in my head which is difficult, but here's what I imagine:

  • If you start dragging the first block, it leaves a block-sized space, when you move down, the blocks below move up into that space
  • If you start dragging the second block, it also leaves a space. If you drag up, the blocks above move down into that space, if you drag down the block below move up into that space.
  • If you start dragging the last block, it again leaves a space. If you drag up, the blocks above move down into that space.

Kind of like one of those sliding puzzles 😄

I guess that means don't move the surrounding blocks when dragging starts. Or maybe if you have to, only ever move them downwards to create the space.

@jasmussen
Copy link
Contributor

jasmussen commented Nov 29, 2023

Nice! Outside of fine-tuning the drop interactions. I did have some trouble invoking the drag and drop, though, simply clicking and dragging invokes a text selection, I have to press and hold for a bit:

dragging

Getting the basics of this interaction right will no doubt be the majority of the headache, so I'll let you focus on that, but this seems to have great potential. If we can get it right, though, there are a couple of visual refinements that could be nice to do, such as the grabby hand cursor, the right drop shadow instead of the border, and a 2px radius on the dragged item.

Also probably a doozy, if you are dragging an expanded tree, it would be nice to collapse that in an animated way before dragging, and then not open it on drop.

@richtabor
Copy link
Member

I guess that means don't move the surrounding blocks when dragging starts.

My first reaction as well. I wouldn't expect them to move when first invoking the drag.

@apeatling
Copy link
Contributor

My first reaction as well. I wouldn't expect them to move when first invoking the drag.

Agreed, this was my first reaction as well. 👍

@andrewserong
Copy link
Contributor Author

Wonderful, that's super helpful first impressions and early feedback, folks! 🙇 I'll dig in and look at that first interaction / movement when you start dragging.

I'm also keen to hear what everyone thinks about the desired behaviour when going to nest within collapsed blocks, but the feedback already gives me heaps to work on, so absolutely no rush on re-testing at this stage 🙂

@ramonjd
Copy link
Member

ramonjd commented Nov 30, 2023

I really like the displacement!

What is the experience like for nesting blocks within a collapsed block? Would it be helpful to auto-expand blocks on hover?

I think it would, because:

  1. I might want to place my block in a specific place within the collapsed group
  2. The collapsed group might contain collapsed groups itself, into which I want to place the block. Could sub-collapsed blocks expand as well? Great if possible!
  3. When I drop the block, it'd be also nice to know where in the group it's been dropped.
2023-11-30.14.32.27.mp4

Dragging through the block hierarchy is potentially clearer with the drop indicator line, which this PR hides.

I do miss the line and was wondering if there could be a visual indicator of the drop zone. I just spent 30 mins trying to demo one before realizing that :last-of-type et. al. work on elements only. 😄

Is the drag chip obscuring things too much while dragging?

Not for me personally, though I think a drop indicator would help mark the drag chip target

How should we handle things if a browser has prefers-reduced-motion?

No transitions? I wouldn't miss them personally.

@andrewserong
Copy link
Contributor Author

I've pushed a tiny update, still not ready for re-testing yet, but slowly getting closer to the desired pick up and drop states. It now looks closer to all the blocks moving down to create the space. Note to self: I just need to make the first transition (from starting to drag) instantaneous rather than animated to give it the appearance of creating a space where the original dragged block was. Technically, the space needs to be half "above" and half "below" so that dragging within the space is balanced between upward and downward gestures. There's a few different ways to handle that, so I'll try out a couple more next week. For reference, here's the current state of the PR (I still need to tweak / remove the animation when starting to drag, and when performing a drop):

2023-12-01.16.25.48.mp4

Thanks again for all the feedback thus far! I'll ping again once this is ready for another round of reviews.

Comment on lines 35 to 41
// const animationRef = useMovingAnimation( {
// isSelected,
// adjustScrolling: false,
// enableAnimation: true,
// triggerAnimationOnChange: path,
// } );

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is commented out for now while I figure out the right way to handle smoothly moving the dragged item into its final position.

@andrewserong
Copy link
Contributor Author

Small update: still not ready for a re-review just yet, but I've made some good progress on the behaviour when you initially start dragging. It now only moves things out of the way when you start dragging, making it altogether feel more solid (this is achieved by keeping the dragged item around, but hidden via opacity and left position, rather than display: none, and then by using offsets that account for the gap left by that dragged item). Anyhow, it feels a lot smoother:

2023-12-04.12.58.25.mp4

It also smoothly hides the gap when dragging outside of the list view area now.

Still to be done before a re-review:

  • Figure out proper transitions when dropping / releasing the mouse cursor (the behaviour isn't quite there yet, I need to update how the transitions work to move into the final position)
  • Handle the spacing when dragging multiple blocks (currently it's pretty broken when the selection is 2+ blocks)
  • Migrate over the drag-to-expand behaviour for nesting in container blocks

It's coming along!

@SaxonF
Copy link
Contributor

SaxonF commented Dec 4, 2023

Looking good!

@richtabor
Copy link
Member

I've made some good progress on the behaviour when you initially start dragging.

Feels very nice. ✨

@apeatling
Copy link
Contributor

Looking really good @andrewserong!!

@andrewserong
Copy link
Contributor Author

Thanks for the continued encouragement, folks! Another quick update: I've merged in the prototype for dragging over collapsed blocks to expand them, and I've had a go at collapsing multiple block selections down to a single row, to make it easier (and more accurate) when dragging. I'm not 100% sure on these behaviours, and it'll most likely need a fair bit of refining. Here's how those two things are currently looking:

Multiple selection drag

I think it'd likely be a bit hard to use if we tried to have the dragged item be all the blocks in the selection, so for now, I'm trying collapsing the selection down into a single row while dragging. Happy to explore other ideas if this doesn't feel nice to everyone:

2023-12-05.16.36.01.mp4

Dragging over parent to expand

I've merged in the changes from #56579 so that we can drag over collapsed blocks to expand them. I think it still needs a bit of tweaking, but it feels better to me than without the feature:

2023-12-05.16.36.26.mp4

That's it for today. I have a bit more to do before switching this over to "ready for review" — namely correctly animating the drop action when a user releases the mouse button. I think at this stage that's probably the last thing for me to implement before moving this out of draft. As always, happy for any feedback or ideas along the way, though 🙂

@tellthemachines
Copy link
Contributor

Just had a little play with this and it's very smooth. I especially love that we're now able to drop into closed containers!

One thing I noticed is that if dragging multiple blocks the space where they were doesn't close up like it does with a single block:

multiple-block-drag.mov

Is this intended? It's not terrible either way (I'm thinking if one regrets the action half way through, the space closing up means it's harder to find the previous position, but there's always undo for that so it's probably not an issue 😅 )

@youknowriad
Copy link
Contributor

How do you make a different between dropping at the end of a container and dropping after the container. It seems that it might be a bit confusing visually to make the distinction?

@andrewserong andrewserong force-pushed the try/list-view-displace-list-view-items-on-drag branch from 92d3ffb to c397ce1 Compare January 22, 2024 22:06
@andrewserong
Copy link
Contributor Author

andrewserong commented Jan 22, 2024

I'm happy to move forward with this one. Impressive work!

Thanks for the approving review @jasmussen! I'll merge this in now, and happy to tweak any peculiarities in follow-ups. Let me know if anyone runs into any further issues or things that need tending to.

First up, I'll look at opening a WIP PR to explore re-adding the WYSIWYG drag chip of the list view row 🙂

Thanks for all the help and reviews on this, everyone!

@andrewserong andrewserong merged commit 2997bad into trunk Jan 22, 2024
56 checks passed
@andrewserong andrewserong deleted the try/list-view-displace-list-view-items-on-drag branch January 22, 2024 23:00
@github-actions github-actions bot added this to the Gutenberg 17.6 milestone Jan 22, 2024
@andrewserong
Copy link
Contributor Author

andrewserong commented Jan 23, 2024

Update: for anyone following along, I've opened up a follow-up PR that explores the WYSIWYG drag chip that was in earlier commits in this PR. The WIP PR is over in: #58103

It's mostly working, but I'll need to do a little more tweaking before it's ready for review. One of the main issues design-wise is coming up with a background color for the drag chip that can work in both light and dark modes 🤔 (see the PR description for demo videos)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [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] Enhancement A suggestion for improvement.
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

10 participants