Select mode: Display the block name on hover

[jameskoster]

Which block will be selected on click can sometimes feel like a mystery. In the Site Editor (and in Select Mode) we display outlines which help a bit, but is still inadequate in situations where a single block fills a container, and you need to click more precisely.

In such situations seeing the block name on hover can be a helpful indicator of precisely which block will be selected before you click.

Here's an initial design concept:

[karmatosed]

I think this does add a context but I am not sure it doesn't bring more readibility issues. For example there is now a word very close to another:

Maybe having to the side works when there is space? The styling also makes this look clickable like an actionable button.

[jameskoster]

If we place it to the side of the block we inevitably end up having to move it for narrow screens, or for blocks that fill the canvas horizontally. The different widths (based on the block name) create some visual awkwardness too:

[jameskoster]

The styling also makes this look clickable like an actionable button.

It is :) You click the block to select it. Essentially the whole block is a button, and the label here is just an extension of that.

Edit: Here's a slightly less pixelly/noisy iteration that elaborates on the "entire block is a button" concept:

[karmatosed]

Ah! It wasn't super clear in description and gif it was clickable, thanks for clarification. I think if you're going for the 'whole block is a button' you probably should go all in as with last iteration.

[paaljoachim]

Good idea, James!

[jasmussen]

We've tried it in the past, and removed it quickly as it was too noisy. There's something to the idea, but we should be very careful with the implementation. One idea is to make it a tooltip, identical to all other tooltips in the editor — that is, it appears after a brief delay, in context of the cursor, and is a black strip with white text.

[jameskoster]

Yes I think in Edit mode this would be too noisy. And agree that we need to exercise caution with any elements that obscure the canvas. It probably makes sense to let this one stew a bit and revisit as we explore other Select mode iterations.