Make it easier to identify specific Reusable Blocks on hover

[jameskoster]

Mousing over Reusable Blocks exposes a semi transparent overlay which indicates that the block is special in some way. This UX works well, but one piece missing is the connection between the hover interaction and the underlying entity. To know exactly which block I'm looking at I need to click on it. Might it be more elegant to expose this somehow on hover?

My hypothesis is that this will make selecting and working with Reusable Blocks feel a bit smoother, especially in documents that are comprised of many Reusable Blocks.

Here's one potential design concept we might use:

[karmatosed]

@jameskoster I like the idea of identifying it's a particular block; however, there are also explorations on states to indication padding and other things of blocks. How would those interact with this?

I guess one thing to work out is how useful and what is the use case for seeing in the flow if it's a reusable block or not? Then it can determine how visible this needs to be.

[jameskoster]

Do you have links to those explorations?

To be clear, the only thing I'm proposing here is the blue 'chip' with the block icon/name that appears on hover, in the same location as the toolbar.

It's useful (imo) because it adds another layer of clarity to the UI when working with more complex blocks. Due the behavioural overlap between things like template parts, reusable blocks, (and to a lesser extent groups), folks are currently required to select (click) in order to identify them. This isn't a problem for regular blocks because it is obvious – for example – that an image is an image, a table is table, and so on.

This seems like a relatively simple thing to try, as a small step on the way to more dramatic changes like introducing more colors (#32163), or revamping select mode (#31236).

[jameskoster]

Closing this. #35116 has more provenance and if addressed will solve this too.