-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
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:
- Remove the call to
controller.stop()
and allow the animation to complete on its own accord — explored in useMovingAnimation: Try removing cleanup function to allow animations to finish #59482 - Or, explicitly remove the transform style in the cleanup function — explored in useMovingAnimation: Ensure transform is removed when the animation is stopped #59426 (I've closed this one out, as I think the former is likely the better approach)
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
- 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)
- Click somewhere in the editor canvas with the list view open, and then press ENTER rapidly several times to add a few paragraph blocks
- 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
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