Skip to content

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

@andrewserong

Description

@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:

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:

image
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

Metadata

Metadata

Assignees

Labels

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

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions