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

UseMovingAnimation leaves stray transform rules that can cause list view items and blocks to overlap in the UI #59481

Closed
andrewserong opened this issue Feb 29, 2024 · 0 comments · Fixed by #59644
Assignees
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@andrewserong
Copy link
Contributor

andrewserong commented Feb 29, 2024

Description

When rapidly adding paragraph blocks in a post, it's possible to get into a state where list view items and blocks in the editor canvas are overlapping, caused by state transform rules left over by useMovingAnimation. The cause appears to be that if we rapidly add blocks (say, by pressing ENTER a few times quickly), then the useMovingAnimation hook will fire its cleanup function in its useEffect which stops the animation, but doesn't clear out the transform rules applied to the list view item or the block in the editor canvas.

I think the issue was introduced in #57133

Possible ideas for solutions:

I think either might work, but I'm leaning toward removing the cleanup function so that the animation can gracefully finish on its own (especially since updates are skipped if ref.current no longer exists). @ellatrix and @youknowriad do you have thoughts on the best way forward?

Step-by-step reproduction instructions

  1. In a post (or template), add enough blocks to create a scrollbar in the list view (note: the overall post needs to have fewer than 200 blocks, otherwise the useMovingAnimation is skipped, so test with a couple of dozen blocks)
  2. Click somewhere in the editor canvas with the list view open, and then press ENTER rapidly several times to add a few paragraph blocks
  3. Notice that it's possible for the list view items and the blocks in the editor canvas to wind up in a state where they're overlapping — this is the moving animation not completing, so there'll be stray transform rules left over

Screenshots, screen recording, code snippet

image
2024-03-01.09.50.08.mp4

Environment info

  • WP 6.5 Beta 3
  • Also tested with Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@andrewserong andrewserong added [Type] Bug An existing feature does not function as intended [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Package] Block editor /packages/block-editor labels Feb 29, 2024
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 29, 2024
@andrewserong andrewserong moved this from ❓ Triage to 🏗️ In Progress in WordPress 6.5 Editor Tasks Feb 29, 2024
@github-project-automation github-project-automation bot moved this from 🏗️ In Progress to ✅ Done in WordPress 6.5 Editor Tasks Mar 7, 2024
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. [Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
No open projects
Status: Done
2 participants