Higher contrast block identification border

[bdurette]

What problem does this address?

When I hover the mouse over a block in the List View, the editor helpfully highlights the block by adding a 1 pixel blue border. However, this blue color is not always high contrast with the background for the highlighted block, so it's sometimes hard to see.

The following screenshot was taken with the mouse over the Paragraph block. I can barely make out the blue rectangle around the block:

What is your proposed solution?

It would be great if the highlight color was dynamically selected to be one that is high contrast with the existing background, so that regardless of my theme/color settings, I get the benefit of the block identification border.

[karmatosed]

Whilst I like the idea of contrasting with the background I can see this potentially getting really confusing if you have multiple colors. Perhaps another option is to not use color to denote alone?

[bdurette]

That is a good point about multiple colors causing confusion. Looking at some prior art for this, Google Slides highlights the selected element with two different colors. One thick outline in a light color and a thin outline in a dark color, with the dark being centered inside the light. Thus, there's always contrast, regardless of the background color. I wonder if something like that would be better than trying to dynamically select color.

I do think that visually highlighting the selected element is quite useful. I don't know how you would do that without implicating color in some way.

[annezazu]

@SaxonF @noisysocks I am really feeling this problem when I was making a youtube video to show off the new work to flash block outlines: #58159

Check out how hard it is to see the outlines, depending on the style variation:

block.outline.mov

Whew, it's almost impossible to see! I wonder how we can iterate here.

[noisysocks]

Really good point. The outline colours are currently set to the admin theme colour. It should probably be set to (a rotation of?) a theme colour instead.

[annezazu]

Really good point. The outline colours are currently set to the admin theme colour. It should probably be set to (a rotation of?) a theme colour instead.

Yes. The more I play around with it and appreciate the value it adds, the more I worry about how easy for this to get completely lost with common colors. Happy to open a separate issue if it helps to address this at least for the flashing outlines or maybe perhaps it can be addressed holistically? :)

[noisysocks]

Holistically makes sense I think since the block outlines and editable outlines share a design vocabulary.