Contextualise placeholders

[jameskoster]

A follow-up to the new placeholder styles (#44190).

Let's figure out a way to make it clearer when a placeholder is for an image, or a video, or audio, etc.

Here are some ideas that came up in the original PR:

Use block icons

Use the block name as a label

Use something more literal, while still clearly being a placeholder

cc @WordPress/gutenberg-design

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[jasmussen]

Nice. I like the explorations, but I also like the minimalism of icons, and the fact that they can be entirely generic.

[richtabor]

I like the block icons as well. Simple/relative and the icons are already there.

[akasunil]

I believe that simply using icons will not suffice; users cannot be expected to understand what each icon represents.

Re icons, I'm not a big fan for two reasons:

1. By principle I think icons should be reserved only for editor UI – toolbars, panels, menus, etc. These placeholders sit somewhere between editor UI and on canvas WYSIWYG which makes the icons feel out of place.

2. Quite a few aren't all that useful in this context – Featured Image and Site Logo for example... those icons do not clearly communicate the block purpose alone.

I agree with @jameskoster here. However, simply having a name does not guarantee good look and feel. Therefore, I believe we should include both the block icon and the block name. Something like this,