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

Improve performance of List View drag and drop #25067

Closed
Tracked by #29733
talldan opened this issue Sep 4, 2020 · 6 comments · Fixed by #33320
Closed
Tracked by #29733

Improve performance of List View drag and drop #25067

talldan opened this issue Sep 4, 2020 · 6 comments · Fixed by #33320
Assignees
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. [Status] In Progress Tracking issues with work in progress [Type] Performance Related to performance efforts

Comments

@talldan
Copy link
Contributor

talldan commented Sep 4, 2020

Describe the bug
The performance for drag and drop in List View (currently enabled on the experimental navigation page) deteriorates significantly in relation to the number of blocks present, in contrast to the general editor canvas.

I've noticed a few things that can be improved. A big on seems to be that useDropZone is continually

To reproduce
Steps to reproduce the behavior:

  1. Open the experimental navigation page
  2. Add lots of blocks (duplicating is the easiest way to do this)
  3. Try dragging and dropping in list view

Expected behavior
Observe the updates to the drop zones and draggable chip become very laggy.

@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] Performance Related to performance efforts labels Sep 4, 2020
@talldan talldan self-assigned this Sep 4, 2020
@StefanXhunga
Copy link

Hi All,
thank you for your help. Where can I find this? Open the experimental navigation page
Add lots of blocks (duplicating is the easiest way to do this)
Try dragging and dropping in list view
Please send me a link. I'm looking at this

@paaljoachim
Copy link
Contributor

With the Gutenberg plugin installed.
Go to: Gutenberg -> Experiments. Enable Navigation screen.
Then go to Gutenberg -> Navigation (beta) screen.

Then in the Navigation screen click the black inserter + icon to add a block. In the Navigation structure or in the Navigation menu. I just clicked the + icon a bunch of times to insert empty links.

I am not able to drag and drop though. I can use the up and down arrows.

Nav-screen-move-up-down

@talldan talldan linked a pull request Sep 7, 2020 that will close this issue
6 tasks
@talldan
Copy link
Contributor Author

talldan commented Sep 7, 2020

It'll be released in v9.0 of the Gutenberg plugin - #23952.

In the meantime, I have begun working on optimizations in #25069. Let me know if there's any other info I can provide.

@priethor
Copy link
Contributor

Hey @talldan, is this issue in your near future plans, or is it available to pick?

@talldan
Copy link
Contributor Author

talldan commented Apr 28, 2021

It can be picked up, not something that I plan on looking at soon.

Though, I did have a quick look at it recently but without success. I have a feeling a nice optimisation might be to switch to using an absolutely positioned separate element for the insertion point indicator, a bit like how the main block editor does now.

Currently dragging over the blocks updates each block to show a border to indicate where the block will drop and this seems quite slow.

@talldan talldan removed their assignment Apr 28, 2021
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 9, 2021
@talldan
Copy link
Contributor Author

talldan commented Jul 9, 2021

Managed to get around to this now that widgets work has slowed down. #33320 is the PR.

Navigation block automation moved this from 📥 To do to ✅ Done Jul 13, 2021
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. [Status] In Progress Tracking issues with work in progress [Type] Performance Related to performance efforts
Projects
4 participants