Better identification of differents areas (blocks)

[MarieComet]

Issue Overview

Actually everything is white on white, except on hover.
I think it would be relevant, especially for "novice" users, but not only, to have a better visual identification of the editing areas (blocks, columns), better understanding of "what is who" in editor interface.

Steps to Reproduce

Add some columns / blocks :

Ideas :

• Add page setting to toggle-on all blocks settings (the little button which appear on hover at the right of blocks) :
  

• Add page setting to display blocks borders, something like this :
  

[mrleemon]

I doubt that this will get any attention from devs due to the current fad of minimalist UIs. Personally, I find it really difficult to work with columns without any kind of visual guide.

[GlennMartin1]

Currently, I cannot even tell where the boundaries of columns and blocks are. 👎

I'm a minimalist myself, but this has gone too far that direction......

[maddisondesigns]

The current 'minimalist' design makes a lot of Gutenberg ridiculously hard to used. Two areas in particular that stand out are the new Columns block and custom fields.

I raised #5131 because it's impossible to tell where the columns are or even how many columns there are.

I also raised #4535 because custom fields are impossible to tell apart.

[MarieComet]

I completely agree with you about the "minimalist fad" of the current design, and it's normal for Gutenberg to adhere to it, that's why I'm talking about a "page setting" in my ideas.
Beyond the difficult aspect of use for you and me, I also think of people with visual disability (not sure about this term in English) for example, it will be even more complicated for them to use Gutenberg.
So I think that more a question of design, it's a question of accessibility.
I hope to have the attention of the developers on this aspect.
If I find the time I will try to extend the search for a solution further my horrible screenshots 😄

[webaxones]

That's exactly what pushes me away in Gutenberg: the total elimination of the visual hierarchy, the visual hierarchy being the basis of any ergonomically efficient interface. I fear that the adoption of gutenberg by the general public is strongly compromised by this serious error. Emptiness !== simplicity

[karmatosed]

Whilst I can see the need to know where you are, I am not sure the solution visually is to put a border around it. I would caution us against taking such a drastic UI step. We are in danger of causing visual issues for people if we get blocks in blocks with borders showing.

Adding block ellipsis to all also doesn't help this, it's incredibly confusing to see and actually makes it worse visually. This is a solution that causes more issues than solves.

I am not suing this because of minimalist preferences, I am saying because a nest of borders doesn't help end users. People with accessibility issues won't be eased just by adding borders, actually for some this could cause even more issues such as visual distortion. We have to find better solutions.

In saying this though, let's think if on this point, if we didn't have borders how else could we do this? Is it a matter of focus, how do we do that? I would like us to in other issues explore this over seeing 'put a border on it' as the only route.

For now I am closing not to say we aren't working on how to make a better focused UI, because we are. Adding borders to it isn't the solution though and that's something being taken as a design (not dev) decision.

Now, even though this closed I would encourage those passionate about discoverability and focus on blocks to investigate visual solutions and designs. Take it to a plugin and do some usability testing. Maybe we see a series of plugins for preferences around this, maybe over time we get evidence and iterate in core. I would though encourage not to see borders or making things all visible as the only solution.

[webaxones]

Sorry but translated by google cause of my bad english :

1- First, we must not associate separation and border. A separation can serve as a guide. And people with disabilities very often use guides.
I also say that I find the project Gutenberg very promising, but I think that the interface is a mistake and may destroy the project.

I personally never thought that edges were the solution. When I speak about visual hierarchy, I think 3 dimensions and not 2. What were the shadows and borders in the 2000s? They brought depth. 3D and not 2D. Am I submitting the idea of ​​putting back shadows and borders? No, but to find their correspondence for the 2020s :)

2- This problem is for me doubled another very important:
Would you enter a stone-walled house in a room where silky sofas and leather club chairs would be waiting for you near a library and a warming fire (everyone must adapt this vision to their tastes of course) ? Probably.
Would you enter an empty glass cube where the same elements would only appear as you walked into the room? No.
Because all the elements are part of one and same picture. But especially because the second option requires a lot of confidence and the human is not built to react this way. This is what allowed him to survive.

3- This interface does not shock power users, but what will be the average users who are the vast majority of our customers? The old editor was not a success, it's true, but it looked like everything they already knew. So no learning needed or almost.
The new interface will be imposed (more or less long term) and they will probably pay us to train them to use this new interface. I fear that the experience displeases them strongly.

Now, points 1 and 2 are in my opinion the most important :

• Separations can be guides.
• Each piece is part of a global picture.
• A human needs to know where he is going before entering.

Of course, if i am wrong, we all be happy and i will be the first to say : je me suis totalement planté ! :)