search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Higher contrast block identification border #41261

Open bdurette opened 2 years ago

bdurette commented 2 years ago

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:

Screen Shot 2022-05-23 at 2 52 31 PM

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 commented 2 years ago

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 commented 2 years ago

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 commented 9 months ago

@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: https://github.com/WordPress/gutenberg/pull/58159

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

https://github.com/WordPress/gutenberg/assets/26996883/dd5261da-152c-4c0e-ae6d-f5171af40d2a

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

noisysocks commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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