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

Enable drag and drop in List View, fix performance issues #33320

Merged
merged 16 commits into from
Jul 13, 2021

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Jul 9, 2021

Description

Fixes #25067
Fixes #29727

Enables list view drag and drop and fixes the performance issues.

List view's drag and drop has been implemented for a while, but disabled due to some performance issues were solved. The main problem is that previously the drag and drop system in List View used borders on each individual block for displaying the drop indicator. This means that when dragging over a list of block, each individual block has to re-render.

This change makes the drop indicator a separate popover element, which mirrors how the InsertionPoint component in the normal block list works. Only this single component now has to re-render, which improves things significantly in my tests.

How has this been tested?

Some things to try:

  • Drag and drop blocks around reordering as siblings
  • Drag blocks into groups/columns
  • Test using a large number of blocks

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@talldan talldan 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] Feature New feature to highlight in changelogs. labels Jul 9, 2021
@talldan talldan self-assigned this Jul 9, 2021
@talldan talldan requested review from Copons, ellatrix and gwwar July 9, 2021 05:49
'is-dropping-before': isDroppingBefore || isBlockMoveTarget,
'is-dropping-after': isDroppingAfter,
'is-dropping-to-inner-blocks': isDroppingToInnerBlocks,
'is-dropping-before': isBlockMoveTarget,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

TODO - remove this and use the new drop indicator for the 'Move To' option.

Copy link
Contributor Author

@talldan talldan Jul 9, 2021

Choose a reason for hiding this comment

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

Hmm, I'm going to make this a follow up too. I think Move To needs some refactoring. It currently changes the selected block to determine where it should be inserted, but it should just use the insertionPoint too. It needs changing in both the main block editor and list view.

<ListViewContext.Provider value={ contextValue }>
<ListViewDropIndicator
listViewRef={ elementRef }
blockDropTarget={ blockDropTarget }
Copy link
Contributor Author

Choose a reason for hiding this comment

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

TODO - try making List View use the Insertion Point state so that the indicators appear in both the main and list view block lists.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Tried this out, but it does slow things down a bit, will push my explorations to a separate PR.

@github-actions
Copy link

github-actions bot commented Jul 9, 2021

Size Change: +283 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/block-editor/index.min.js 126 kB +245 B (0%)
build/block-editor/style-rtl.css 14 kB +20 B (0%)
build/block-editor/style.css 14 kB +18 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 1.12 kB
build/admin-manifest/index.min.js 1.41 kB
build/annotations/index.min.js 2.93 kB
build/api-fetch/index.min.js 2.44 kB
build/autop/index.min.js 2.28 kB
build/blob/index.min.js 673 B
build/block-directory/index.min.js 6.61 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 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 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 112 B
build/block-library/blocks/audio/style.css 112 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 475 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 603 B
build/block-library/blocks/button/style.css 602 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 375 B
build/block-library/blocks/buttons/style.css 375 B
build/block-library/blocks/calendar/style-rtl.css 208 B
build/block-library/blocks/calendar/style.css 208 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 190 B
build/block-library/blocks/columns/editor.css 190 B
build/block-library/blocks/columns/style-rtl.css 475 B
build/block-library/blocks/columns/style.css 476 B
build/block-library/blocks/cover/editor-rtl.css 670 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 486 B
build/block-library/blocks/embed/editor.css 486 B
build/block-library/blocks/embed/style-rtl.css 401 B
build/block-library/blocks/embed/style.css 400 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 301 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 780 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 704 B
build/block-library/blocks/gallery/editor.css 705 B
build/block-library/blocks/gallery/style-rtl.css 1.06 kB
build/block-library/blocks/gallery/style.css 1.06 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 160 B
build/block-library/blocks/group/editor.css 160 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 93 B
build/block-library/blocks/group/theme.css 93 B
build/block-library/blocks/heading/editor-rtl.css 152 B
build/block-library/blocks/heading/editor.css 152 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/home-link/style-rtl.css 259 B
build/block-library/blocks/home-link/style.css 259 B
build/block-library/blocks/html/editor-rtl.css 281 B
build/block-library/blocks/html/editor.css 281 B
build/block-library/blocks/image/editor-rtl.css 729 B
build/block-library/blocks/image/editor.css 727 B
build/block-library/blocks/image/style-rtl.css 481 B
build/block-library/blocks/image/style.css 485 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 286 B
build/block-library/blocks/latest-comments/style.css 286 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 526 B
build/block-library/blocks/latest-posts/style.css 524 B
build/block-library/blocks/list/style-rtl.css 63 B
build/block-library/blocks/list/style.css 63 B
build/block-library/blocks/media-text/editor-rtl.css 263 B
build/block-library/blocks/media-text/editor.css 264 B
build/block-library/blocks/media-text/style-rtl.css 492 B
build/block-library/blocks/media-text/style.css 489 B
build/block-library/blocks/more/editor-rtl.css 434 B
build/block-library/blocks/more/editor.css 434 B
build/block-library/blocks/navigation-link/editor-rtl.css 474 B
build/block-library/blocks/navigation-link/editor.css 473 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation/editor-rtl.css 1.69 kB
build/block-library/blocks/navigation/editor.css 1.69 kB
build/block-library/blocks/navigation/style-rtl.css 1.65 kB
build/block-library/blocks/navigation/style.css 1.66 kB
build/block-library/blocks/navigation/view.min.js 2.87 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 310 B
build/block-library/blocks/page-list/editor.css 311 B
build/block-library/blocks/page-list/style-rtl.css 240 B
build/block-library/blocks/page-list/style.css 240 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 247 B
build/block-library/blocks/paragraph/style.css 248 B
build/block-library/blocks/post-author/editor-rtl.css 209 B
build/block-library/blocks/post-author/editor.css 209 B
build/block-library/blocks/post-author/style-rtl.css 183 B
build/block-library/blocks/post-author/style.css 184 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 139 B
build/block-library/blocks/post-content/editor.css 139 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B
build/block-library/blocks/post-featured-image/editor.css 338 B
build/block-library/blocks/post-featured-image/style-rtl.css 141 B
build/block-library/blocks/post-featured-image/style.css 141 B
build/block-library/blocks/post-template/editor-rtl.css 100 B
build/block-library/blocks/post-template/editor.css 99 B
build/block-library/blocks/post-template/style-rtl.css 379 B
build/block-library/blocks/post-template/style.css 380 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B
build/block-library/blocks/pullquote/editor.css 183 B
build/block-library/blocks/pullquote/style-rtl.css 318 B
build/block-library/blocks/pullquote/style.css 318 B
build/block-library/blocks/pullquote/theme-rtl.css 169 B
build/block-library/blocks/pullquote/theme.css 169 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 270 B
build/block-library/blocks/query-pagination/editor.css 262 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B
build/block-library/blocks/query-pagination/style.css 168 B
build/block-library/blocks/query-title/editor-rtl.css 86 B
build/block-library/blocks/query-title/editor.css 86 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 169 B
build/block-library/blocks/quote/style.css 169 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 221 B
build/block-library/blocks/rss/editor-rtl.css 201 B
build/block-library/blocks/rss/editor.css 202 B
build/block-library/blocks/rss/style-rtl.css 290 B
build/block-library/blocks/rss/style.css 290 B
build/block-library/blocks/search/editor-rtl.css 211 B
build/block-library/blocks/search/editor.css 211 B
build/block-library/blocks/search/style-rtl.css 359 B
build/block-library/blocks/search/style.css 362 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 251 B
build/block-library/blocks/separator/style.css 251 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 476 B
build/block-library/blocks/shortcode/editor.css 476 B
build/block-library/blocks/site-logo/editor-rtl.css 465 B
build/block-library/blocks/site-logo/editor.css 465 B
build/block-library/blocks/site-logo/style-rtl.css 154 B
build/block-library/blocks/site-logo/style.css 154 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/social-link/editor-rtl.css 164 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 800 B
build/block-library/blocks/social-links/editor.css 799 B
build/block-library/blocks/social-links/style-rtl.css 1.34 kB
build/block-library/blocks/social-links/style.css 1.34 kB
build/block-library/blocks/spacer/editor-rtl.css 308 B
build/block-library/blocks/spacer/editor.css 308 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 478 B
build/block-library/blocks/table/editor.css 478 B
build/block-library/blocks/table/style-rtl.css 480 B
build/block-library/blocks/table/style.css 480 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 551 B
build/block-library/blocks/template-part/editor.css 550 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/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 569 B
build/block-library/blocks/video/editor.css 570 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 1.29 kB
build/block-library/common.css 1.29 kB
build/block-library/editor-rtl.css 9.81 kB
build/block-library/editor.css 9.81 kB
build/block-library/index.min.js 147 kB
build/block-library/reset-rtl.css 514 B
build/block-library/reset.css 515 B
build/block-library/style-rtl.css 10.3 kB
build/block-library/style.css 10.3 kB
build/block-library/theme-rtl.css 692 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.3 kB
build/block-serialization-spec-parser/index.min.js 3.06 kB
build/blocks/index.min.js 47.2 kB
build/components/index.min.js 194 kB
build/components/style-rtl.css 16.1 kB
build/components/style.css 16.1 kB
build/compose/index.min.js 10.2 kB
build/core-data/index.min.js 12.4 kB
build/customize-widgets/index.min.js 10.3 kB
build/customize-widgets/style-rtl.css 1.48 kB
build/customize-widgets/style.css 1.48 kB
build/data-controls/index.min.js 830 B
build/data/index.min.js 7.22 kB
build/date/index.min.js 31.8 kB
build/deprecated/index.min.js 738 B
build/dom-ready/index.min.js 576 B
build/dom/index.min.js 4.66 kB
build/edit-navigation/index.min.js 13.8 kB
build/edit-navigation/style-rtl.css 3.12 kB
build/edit-navigation/style.css 3.12 kB
build/edit-post/classic-rtl.css 483 B
build/edit-post/classic.css 483 B
build/edit-post/index.min.js 58.6 kB
build/edit-post/style-rtl.css 7.25 kB
build/edit-post/style.css 7.24 kB
build/edit-site/index.min.js 25.9 kB
build/edit-site/style-rtl.css 5.04 kB
build/edit-site/style.css 5.03 kB
build/edit-widgets/index.min.js 16.1 kB
build/edit-widgets/style-rtl.css 3.88 kB
build/edit-widgets/style.css 3.89 kB
build/editor/index.min.js 38.6 kB
build/editor/style-rtl.css 3.88 kB
build/editor/style.css 3.88 kB
build/element/index.min.js 3.44 kB
build/escape-html/index.min.js 739 B
build/format-library/index.min.js 5.71 kB
build/format-library/style-rtl.css 668 B
build/format-library/style.css 669 B
build/hooks/index.min.js 1.76 kB
build/html-entities/index.min.js 628 B
build/i18n/index.min.js 3.73 kB
build/is-shallow-equal/index.min.js 709 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.43 kB
build/list-reusable-blocks/index.min.js 2.07 kB
build/list-reusable-blocks/style-rtl.css 842 B
build/list-reusable-blocks/style.css 842 B
build/media-utils/index.min.js 3.08 kB
build/notices/index.min.js 1.07 kB
build/nux/index.min.js 2.31 kB
build/nux/style-rtl.css 745 B
build/nux/style.css 742 B
build/plugins/index.min.js 1.99 kB
build/primitives/index.min.js 1.03 kB
build/priority-queue/index.min.js 790 B
build/react-i18n/index.min.js 924 B
build/redux-routine/index.min.js 2.82 kB
build/reusable-blocks/index.min.js 2.56 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.64 kB
build/shortcode/index.min.js 1.68 kB
build/token-list/index.min.js 847 B
build/url/index.min.js 1.95 kB
build/viewport/index.min.js 1.28 kB
build/warning/index.min.js 1.16 kB
build/widgets/index.min.js 6.45 kB
build/widgets/style-rtl.css 1.04 kB
build/widgets/style.css 1.05 kB
build/wordcount/index.min.js 1.24 kB

compressed-size-action

@talldan talldan marked this pull request as ready for review July 9, 2021 10:36
@talldan
Copy link
Contributor Author

talldan commented Jul 9, 2021

This is ready for review now.

#33327 should be merged before this though, the tests I've added depend on that.

Copy link
Contributor

@gwwar gwwar left a comment

Choose a reason for hiding this comment

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

What sort of initial performance targets are we aiming for? I am seeing some dropped frames while dragging in list view with the natural resources pattern.

Screen Shot 2021-07-09 at 9 01 39 AM

I did a very quick check, but one hotspot is the dragover event:
Screen Shot 2021-07-09 at 8 59 50 AM

I'm guessing this is coming from a library ( I didn't dig too deep), but modifying width, height, left, right props are one of the most expensive actions (basically anything that modifies getboundingclientrect) since we end up needing to go through layout > paint > and composite steps in the rendering process.

One thing we could try is seeing it's possible to use transform property for dragging which can potentially skip layout and paint steps.

See also: https://developers.google.com/web/fundamentals/performance/rendering

This change makes the drop indicator a separate popover element, which mirrors how the InsertionPoint component in the normal block list works. Only this single component now has to re-render, which improves things significantly in my tests.

One other idea might be to render all droppable indicators once while starting a drag, but toggle opacity of them as we enter over them. We'd of course need to profile to test if this helps or not.

I'll leave a some follow up comments for manual testing, as I did spot a few things.

@@ -15704,7 +15704,7 @@
"postcss": "^8.2.15",
"postcss-loader": "^4.2.0",
"prettier": "npm:[email protected]",
"puppeteer-core": "^9.0.0",
"puppeteer-core": "^10.0.0",
Copy link
Contributor

Choose a reason for hiding this comment

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

Did we mean to include package-lock updates?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

👍 I do have another PR which is handling a Puppeteer upgrade - #33327. I'll rebase this and drop the changes when that's merged.

@@ -69,7 +69,7 @@
"postcss": "^8.2.15",
"postcss-loader": "^4.2.0",
"prettier": "npm:[email protected]",
"puppeteer-core": "^9.0.0",
"puppeteer-core": "^10.0.0",
Copy link
Contributor

Choose a reason for hiding this comment

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

Did we mean to bump puppeteer in this PR?

@gwwar
Copy link
Contributor

gwwar commented Jul 9, 2021

Overall this looks pretty close @talldan! I did spot a few things, so may want to disable dragging in some list view instances or try to polish the behavior.

❌ The navigation block also has a list view, trying to drag in this modal can abruptly close this, since I think we're fighting with the other draggables in the post editor:

Kapture.2021-07-09.at.09.24.40.mp4

❌ When the persistent list view is open in the post editor, and we try dragging the modal, the wrong draggable indicators are updated:

Kapture.2021-07-09.at.09.29.05.mp4

✅ Persistent List View Looks Good in Post Editor ✨

Kapture.2021-07-09.at.09.30.17.mp4

✅ Persistent List View Looks Good in Site Editor

Kapture.2021-07-09.at.09.32.14.mp4

❓ Navigation Editor

🤔 There's two ways of dragging in the Navigation Editor. One using the modal, and the other using an editor mode when we press esc

  • The modal feels a bit funny when we have a whole editor dedicated to this. (It does behave well for dragging though!)
  • When pressing esc the chip sits on top of the editor (which is maybe not intentional?) and we're able to do some funny things like drag the entire nav parent around.

We may want some UX feedback for this. What's our preferred way of dragging? cc @jasmussen @shaunandrews maybe?

Kapture.2021-07-09.at.09.36.42.mp4
Kapture.2021-07-09.at.09.39.45.mp4

✅ Widget Editor looks good

I did notice two things: the list view isn't persistent (it's a dropdown vs sidebar), and we allow draggables from the list view to drop into the main editor (which looks like it works?)

Kapture.2021-07-09.at.09.53.43.mp4
Kapture.2021-07-09.at.09.50.30.mp4

Things for potential follow ups:
💡 Nice to have: when List View items are collapsed, and we drag hover over it, let's toggle it open.
💡 Nice to have: better hint that these items are draggable.

@gwwar
Copy link
Contributor

gwwar commented Jul 9, 2021

Here's a video showing that the layout shifts are coming from the draggable chip:

Kapture.2021-07-09.at.10.09.08.mp4

Edit: https://web.dev/cls/#animations-and-transitions
https://web.dev/debug-layout-shifts/

To move elements around, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.

Looks like this is recommended ✨

@talldan
Copy link
Contributor Author

talldan commented Jul 12, 2021

Thanks for the amazing review @gwwar!

What sort of initial performance targets are we aiming for?

It's mostly anecdotal, but with the previous implementation there were two main issues:

  • scrolling was very juddery.
  • the drop indicator was very laggy at updating it's position

So if that doesn't happen too much it's a good sign. I've been testing using the demo post, which has a decent number of blocks.

I think as long as it's working reasonably well, it'd be great for this feature to be released in the plugin for further testing and feedback, especially at this early stage where there's a fair amount of time until the next WordPress release.

I'm guessing this is coming from a library ( I didn't dig too deep), but modifying width, height, left, right props are one of the most expensive actions (basically anything that modifies getboundingclientrect) since we end up needing to go through layout > paint > and composite steps in the rendering process.

This is a really good point. AFAIK, all popovers modify top and left, so I wonder if it's possible to try using transform. It may have been tried before, not sure. I don't think BlockDraggableChip uses popovers to this might be a good place to start using transform. I'll try that out in a separate PR.

The navigation block also has a list view, trying to drag in this modal can abruptly close this, since I think we're fighting with the other draggables in the post editor:

Thanks, I'll take a look at this and see if I can fix it in this PR.

When the persistent list view is open in the post editor, and we try dragging the modal, the wrong draggable indicators are updated:

Oh wow, I think it's just using the first element it finds using getElementById, so this would mean there are also duplicate ids in the document when ListView is in two places. I think list view can probably avoid using those ids in favour of data-block attributes it already has. I'll take a look at that in this PR.

I did notice two things: the list view isn't persistent (it's a dropdown vs sidebar), and we allow draggables from the list view to drop into the main editor (which looks like it works?)

I think the widget editor would definitely benefit from the persistent list view, given the widget areas automatically have nesting. Being from list view to the main block list is intentional 😄.

Things for potential follow ups:
💡 Nice to have: when List View items are collapsed, and we drag hover over it, let's toggle it open.
💡 Nice to have: better hint that these items are draggable.

I'll make sure to capture these ideas. There are some ideas on #29727 that should be followed-up on too. A lot of this came quite a long time after I'd already developed the drag and drop feature for the navigation screen (#23952), but then List View was mostly removed from that screen so the feature has just lay dormant. With the persistent list view it's now very relevant again.

@@ -75,7 +74,6 @@ const BlockDraggable = ( {
return (
<Draggable
cloneClassname={ cloneClassname }
elementId={ elementId }
Copy link
Contributor Author

@talldan talldan Jul 12, 2021

Choose a reason for hiding this comment

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

The elementId prop seems to be dead code, Draggable ignores it when __experimentalDragComponent is defined, and BlockDraggable has that prop hard-coded just below this line.

@talldan
Copy link
Contributor Author

talldan commented Jul 12, 2021

The navigation block also has a list view, trying to drag in this modal can abruptly close this, since I think we're fighting with the other draggables in the post editor

@gwwar I tried a few different things, but couldn't reproduce this. Let me know if you have any pointers for reproducing it.

When the persistent list view is open in the post editor, and we try dragging the modal, the wrong draggable indicators are updated:

I've fixed this one.

@gwwar
Copy link
Contributor

gwwar commented Jul 12, 2021

The navigation block also has a list view, trying to drag in this modal can abruptly close this, since I think we're fighting with the other draggables in the post editor

When the persistent list view is open in the post editor, and we try dragging the modal, the wrong draggable indicators are updated:

✅ I've verified that these two issues are now fixed. ✨

Copy link
Contributor

@gwwar gwwar 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 as long as it's working reasonably well, it'd be great for this feature to be released in the plugin for further testing and feedback, especially at this early stage where there's a fair amount of time until the next WordPress release.

That sounds reasonable to me! Dragging is currently usable but not smooth on my dev laptop. Ideally we'll want to do a few browser profiling passes at it so folks can use this without needing beefy hardware.

This is a really good point. AFAIK, all popovers modify top and left, so I wonder if it's possible to try using transform. It may have been tried before, not sure. I don't think BlockDraggableChip uses popovers to this might be a good place to start using transform. I'll try that out in a separate PR.

Happy to help investigate that too. So this is coming from the popovers component? Edit: ah I think it's from draggable

if ( dragComponentRef.current ) {
// Position dragComponent at the same position as the cursor.
cloneWrapper.style.top = `${ event.clientY }px`;
cloneWrapper.style.left = `${ event.clientX }px`;
const clonedDragComponent = ownerDocument.createElement( 'div' );
clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;
cloneWrapper.appendChild( clonedDragComponent );
// Inject the cloneWrapper into the DOM.
ownerDocument.body.appendChild( cloneWrapper );

@talldan talldan force-pushed the try/popover-drop-indicator-in-list-view branch from 1c92801 to d1ab212 Compare July 13, 2021 07:37
@talldan
Copy link
Contributor Author

talldan commented Jul 13, 2021

Happy to help investigate that too. So this is coming from the popovers component? Edit: ah I think it's from draggable

That's the one. 👍

Hopefully shouldn't be too complicated to modify those styles.

@talldan talldan merged commit dd4ce77 into trunk Jul 13, 2021
@talldan talldan deleted the try/popover-drop-indicator-in-list-view branch July 13, 2021 08:57
@github-actions github-actions bot added this to the Gutenberg 11.1 milestone Jul 13, 2021
@priethor
Copy link
Contributor

Amazing review of an amazing PR! 👏 ❤️

@priethor priethor added the [Type] Performance Related to performance efforts label Jul 13, 2021
@gwwar
Copy link
Contributor

gwwar commented Jul 13, 2021

@talldan I started profiling drag performance in #33395

Looks like there some nice potential gains if we can also tune dropzone handling to not fire until a user intends to drop an item (vs triggering it while we're dragging quickly).

@nixsee
Copy link

nixsee commented Jul 23, 2021

I apologize if this is not the right place to share this. You can move it if necessary (or tell me to).

This functionality is great, but it doesn't seem to allow you to drag a child-block to the bottom of the list at the top-level of the hierarchy unless you bring it to the very top of the list and then rearrange the top-level blocks using their Move Up/Down arrows. Here's a screen recording of what I mean.

Also, it would be nice to have a wider space to drag within - ideally anywhere above and below the top and bottom of the list would be treated as a draggable section, rather than just a small sliver. I submitted similar feedback about dragging blocks within the editor too here (#32438)

WMgIDuTMYl.mp4

@talldan
Copy link
Contributor Author

talldan commented Jul 26, 2021

Thanks for the feedback @nixsee.

Those were both known issues, but I don't think they're adequately tracked in github.

#33678 now tracks the un-nesting issue.

I've also put together an overview issue for drag and drop (#33683), which incorporates #32438.

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. [Type] Feature New feature to highlight in changelogs. [Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

List View: Allow drag and drop to reorder items Improve performance of List View drag and drop
4 participants