List View: Stale translate3d styles stick to row items leaving stray borders after dragging blocks

[andrewserong]

Description

From time to time additional borders appear to be present in list view items of blocks that have been moved and are then reselected. The cause of what appears to be a white border between selected list view items is actually an inline style rule of transform: translate3d(0px, -1px, 0px);. This appears to be a result of rules left over from useMovingAnimation here:

gutenberg/packages/block-editor/src/components/use-moving-animation/index.js

Line 133 in c1cf175

: `translate3d(${ x }px,${ y }px,0)`;

It seems that for the blocks that have been dragged within the list view, they (sometimes?) never end up receiving their finishedMoving styles which would clear out the translate rule.

Step-by-step reproduction instructions

1. In a post with a bunch of blocks, select a few of them from within the list view and drag them to another part of the document
2. Once they have been dragged to a different position, select a larger range of blocks that includes the blocks that were previously dragged
3. Notice how there appears to be extra borders around the blocks that were previously dragged (the appearance of a border is actually just a gap due to the translate3d rule still being present in the inline styles)

Screenshots, screen recording, code snippet

Here is a screenshot of a selection of blocks that contains a smaller selection that was previously dragged. There should not be these additional white lines / borders / gaps between list view items:

2023-11-22.11.47.18.mp4

Environment info

• WP 6.4.1
• 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