UseMovingAnimation leaves stray transform rules that can cause list view items and blocks to overlap in the UI #59481
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
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 theuseMovingAnimation
hook will fire its cleanup function in itsuseEffect
which stops the animation, but doesn't clear out thetransform
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:
controller.stop()
and allow the animation to complete on its own accord — explored in useMovingAnimation: Try removing cleanup function to allow animations to finish #59482I 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
Screenshots, screen recording, code snippet
2024-03-01.09.50.08.mp4
Environment info
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
The text was updated successfully, but these errors were encountered: