Improve drop indicator within the List view

[richtabor]

What problem does this address?

We currently have a bold indicator when dragging/dropping blocks within the editor, but in the List view, it is quite thin/not as easily distinguishable.

What is your proposed solution?

1. Let's try a more consistent drop indicator here that also improves visibility of the indicator — perhaps 1.5 or even 2px wide. Perhaps even matching the focus state width (in the last screenshot).

2. As an extra, perhaps lean into matching a corresponding animation (perhaps not as bold as the editor itself, but relative to the List view size) for the line indicator as it appears.

Current drop indicator within the editor:

Current drop indicator within List view:

[talldan]

I noticed this disparity too recently. It'd be great to improve it. I don't think it'll be too difficult, once we have a design I think it can be considered a slightly more challenging 'Good First Issue'. 😄

There has been some work on changing the way drag and drop works here - #34022. But I think it'd also be fine to ship an interim improvement to the indicator.

For anyone interested in contributing, the code is here:

• List View drop indicator react component - https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/list-view/drop-indicator.js
• List View drop indicator CSS - https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/list-view/style.scss#L347-L361

[richtabor]

Probably worth a separate issue, but I've noticed that in Safari the drop indicator is not indicative of where the drop actually happens.

CleanShot.2022-07-06.at.16.10.33.mp4

[talldan]

@richtabor Yep, there was an issue reported here for that - #42058. It seems to be related to recent changes to the popover component.