List View: Ensure visibility of drop indicator over selected items

[andrewserong]

This issue captures the discussion from #52122, which removed the white border from the list view's drop indicator. With the border removed, the drop indicator is no longer visible over selected blocks as described in #52122 (comment):

2023-07-10.16.52.37.mp4

As mentioned by @jameskoster in #52122 (comment) there are probably a few options to consider to address this, including adjusting the colors for the selected state, so that there is constrast between the drop indicator color and selected blocks:

One such option could be a less bold selected state, which would eliminate the need to white borders around the drop indicator, focus state, etc:

I'll add the Needs Design label for this one, so we can figure out a direction before implementing in code. In the short-term, I think the current behaviour on trunk and in WP 6.3 is reasonable enough (folks can see where they're going to drop based on the mouse cursor), but it could be a good one to improve for 6.4 if we can.

[jasmussen]

This would theoretically be solved if the drag and drop was "live", i.e. items actually moved when dragging. That's a taller order, however.

I think there maybe used to be a white "halo" around the drop indicator. This one is fine to restore so long as the shape, size, width, and radius of the existing blue bar remains the same. Would that work?

[andrewserong]

This would theoretically be solved if the drag and drop was "live", i.e. items actually moved when dragging. That's a taller order, however.

Yes, and there'd be a couple of usability issues to consider, too. Now that we no longer hide dragged blocks, I quite like that the list view feels very stable when you're dragging blocks, without the list shifting in any way. If we moved the item directly when dragging, then we'd be back to a list where items move around, which might not be desired. Separately, I have an exploration into making the drag chip look like the list view item over in #49820 — I quite like that sort of approach, but it doesn't address the drop indicator visibility over selected items in this issue.

I think there maybe used to be a white "halo" around the drop indicator. This one is fine to restore so long as the shape, size, width, and radius of the existing blue bar remains the same. Would that work?

Yep, we used to have one, which was removed in #52122 because it looked pretty bad in a dark list view. Perhaps if we're to reintroduce the border, we could try to somehow make it context aware to know which color the border should be? (dark to match the dark sidebar, or white to match the usual list view?) Could be worth a try!

[jasmussen]

Yep, we used to have one, which was removed in #52122 because it looked pretty bad in a dark list view. Perhaps if we're to reintroduce the border, we could try to somehow make it context aware to know which color the border should be? (dark to match the dark sidebar, or white to match the usual list view?) Could be worth a try!

Right, yes the dark context should be able to make the halo dark. But we'd want this to code-wise be built in a smart way, ideally the halo can inherit the halo of the parent container, because color-theming is being explored for that space. Nothing smart comes to mind, but perhaps you have ideas?

[andrewserong]

Absolutely. I'm happy to have a hack around and see what we bump into!

[bph]

@andrewserong Does this seem to be an issue to be solved for 6.4 Beta 1?

[andrewserong]

Thanks for the ping @bph, I was meaning to update this issue today. Unfortunately I haven't managed to find a non-hacky way to do it just yet (the hacky way I tried was with some not-very-friendly passing around of classnames). At this stage I think it's unlikely to make it in for 6.4 Beta 1.

My preference would probably be to skip trying to make it work for the 6.4 Beta — it's still possible for users to drag blocks into a range of selected blocks, and to my knowledge we haven't had anyone open issues about this visibility issue. It'd be a good thing to fix up, but in my opinion it's probably not very urgent.

Edit: I've just moved this to "Punted to 6.5", but let me know if anyone feels it's more urgent than that 🙂

[ramonjd]

including adjusting the colors for the selected state, so that there is constrast between the drop indicator color and selected blocks

This sounds like the most straight forward approach (?) Not sure what's an acceptable level of hackiness. 😄

I was fooling around and managed to get the background color to change only when multiple blocks are selected (ignore the pink color, it's for demonstration purposes only), though it might be less confusing to just make all selected items in the list view the same color?

2023-09-22.12.38.18.mp4

[andrewserong]

Thanks for taking a look @ramonjd! Yeah, it'd be good if we can come up with something that feels elegant in terms of design, and using a contrasting color for the selected items feels a bit nicer to me than a border color. One of the challenges I had with the border color idea is that even when it's looking correct it still doesn't look very good to me. I.e. here's how it could have looked in dark mode (not sure why those extra dark lines are displaying there 🤔):

For visibility, and just in case it's of any use, I've pushed where I got up to with my hacking around over in #54712 as a throwaway PR

[andrewserong]

Now that we displace list view items while dragging (#56625), the blending of the drop indicator line is no longer an issue, so I'll close this one out now.