Skip to content

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

@andrewserong

Description

@andrewserong

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

Metadata

Metadata

Labels

[Feature] List ViewMenu item in the top toolbar to select blocks from a list of links.[Package] Block editor/packages/block-editor[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions