Gutenberg: Show block outline when focusing / hovering the block type

[mtias]

One detail we didn't get to implement from #18667 is that when the user focuses or hovers the block type / movers, the outlines of the whole block appear to clearly show its boundaries.

This is the equivalent of the "selection" tool.

[paaljoachim]

Thanks I missed having a clearly defined area showing the outline of the block area.

Comparing version 7.6 and 7.7

Gutenberg 7.6

Gutenberg 7.7

In 7.7 we are missing the boundary of the area one is working in. It can create confusion.

[paaljoachim]

Comparisons

Blue outline around the selected Cover Block:

No outline in the selected child paragraph block:

Blue outline around the selected spacer block. Which also uses a grey background placeholder.

Blue outline around the selected Image Block:

No outline in the selected caption area. (Caption it almost like a child paragraph block to the image block.)

Selected Paragraph block.

It might be good enough to just hover over the general toolbar (move etc icons) to show the outline. It gives a clear definition of the space they contain. Giving a clear definition of the area that is being manipulated. Without having to go to the top toolbar to go into the drop down to select the Select tool.

[mtias]

Without having to go to the top toolbar to go into the drop down to select the Select tool.

You can also press the escape key.

[joyously]

I too miss the outline (and isn't it part of accessibility?), especially since the editor is using a color without regard to the background color that the theme has set. This also applies to the placeholder text. I found in the CSS that the placeholder text is set to gray, opaque, and a background of transparent. (that's just downright irresponsible)

[karmatosed]

One thing to also consider is too many outlines and too heavy an interface can also cause accessibility issues. What I like about this initial proposal in the issue, gives some steps onto how a balance can happen. I think it's important to look back at that point of this issue a little and focus on that, through the movers.

[shaunandrews]

No outline in the selected child paragraph block

Part of the logic here is that the caret (the blinking line that indicates you can type) _is_ the focus state for text-related blocks like Paragraph and Heading.

[ItsJonQ]

I'm taking a look at this now 🤞

[ItsJonQ]

I have this working:

It's currently using the same styles as selection. The show/hide mechanics follow the same rules as the Movers.

If folks have an idea for perhaps alternative styles, please let me know :)