Site editor: Revisit the appearance of of hover outlines for blocks

[jasmussen]

When editing in the site editor, there are block boundary outlines shown on hover, in addition to select:

Notably the hover outlines can feel a bit noisy and distracting at times. Should we remove them? This draft PR explores doing so:

An alternate approach is to reduce the emphasis of the outlines, make them less distracting This draft PR explores just that, with thin text-color outlines:

Try the PRs out, get a feel for it. What's a good configuration of these? Keep in mind, we can adjust:

• Opacity/color
• Thickness
• Animation

Note, for color it's probably best to lean towards text-color or theme color, as arbitrary colors can blend into backgrounds otherwise.

[javierarce]

Since the outlines will still appear in the Select mode, I would vote for the option that removes the borders. It would be great to have a keyboard shortcut to switch back and forth between modes easily.

[richtabor]

Agreed. I find them noisy/distracting for sure.

What’s the purpose of the different interactions here, between the site and block editors? Because of the header/footer parts?

[jameskoster]

Personally I find the hover outlines to be very useful when working with the more complex layouts we tend to find in templates. Consider the gif below:

Here the outlines are critical in helping me determine which block will be selected on click.

Though I would say that they (the outlines) do not need to persist on selection.

[jasmussen]

Any preference on the attached PRs? Or do we need to try a different direction?

[jameskoster]

For me the noise is mostly an issue when you've already selected a block:

Maybe we could try a version that removes the selected block outline? 🤔

[jasmussen]

Oh that's interesting. That could be worth a shot.

I also think we're at a point where we can kill the floating inserter button, don't you think?

[jameskoster]

The black one? Potentially, yes!

[jasmussen]

Rebased both PRs and recorded fresh GIFs in a gray theme that may be more representative. Just to compare, here's trunk:

No outlines:

PR #44774

• There are still outlines when you select a block (1.5px)
• There are still outlines on hovering template parts

Subtle outlines:

PR #44775

• 0.5px hover outlines
• Coming back to this one, I don't think it's working that well. Feels like either the outlines should be visible, or not at all.

Inverted outlines:

Just a quick experiment, didn't work well at all since the selected style overlaps with focused style. But nevertheless showing for comparison: 1.5px hover, 1px selected.

No selected outline:

Just to try what we discussed, no outline for the selected state:

It doesn't really work that well in practice, because there's still an outline on block focus. So it just means the outline disappears when selecting outside.

So at this point, I think we might need to do curate and refine what we have, and perhaps revisit at a later time. For example, an easier way to deselect all blocks (click header, etc.), changes to select mode, and further refinements to when/how often the sibling inserter appears. What do you think?

[jasmussen]

Created a followup issue and PR to improve things a bit: #45590 and #45589

[jameskoster]

and perhaps revisit at a later time

Yeah I agree. It feels like we should take a comprehensive look at everything that selecting a block entails. With the site editor there are so many nuances to consider... getting it right will require a deeper dive.

[jameskoster]

Just leaving a note here for when we revisit.

Another argument for the borders is that they help to clarify the space a block occupies within a layout:

This will be relevant when we get to merging #45364 and other advanced layout tools.

[nekohayo]

If anything, I would want more hover borders for blocks (especially container-type blocks) everywhere in the Gutenberg editor (when editing a page or post for example), not less; as it is currently, it is very difficult to be able to "spot" invisible interactive elements (including spacers, columns, groups, rows, stacks, etc.). Is there a ticket specifically about that problem?

[richtabor]

For me the noise is mostly an issue when you've already selected a block

Agree here, though you're almost always with a selected block in the site editor.

This here is quite distracting:

CleanShot.2023-12-07.at.14.55.03.mp4

[jameskoster]

I think that is more related to the menu and could be resolved when the block tools menu switches to the new component.

First menu here is the current component, second is the new one:

menus.mp4