Gutenberg: Widgets screen: Can't tell which Legacy Widgets are on my screen without selecting them

[noisysocks]

When I first open the new Widgets screen, I'm greeted with this:

Because we're hiding the title from the Legacy Widget block until it's selected, it's really hard to tell what widgets I have in my widget areas.

How about we always show the title?

[ZebulanStanphill]

Since the legacy widgets here aren't acting as a front-end preview, I think we should definitely give them visible borders and text labels. I guess in general they should look more like the placeholders on various blocks (e.g. Image, Video, etc.), with solid backgrounds and a clear visual look that indicates "I'm a set of plain controls that isn't WYSIWYG at all".

[afercia]

Also, as reported in another issue, all the widgets should be listed with a H3 heading in the same way it happens now in the legacy Widgets screen.

[mapk]

Good points here. @noisysocks, I agree when there's tons of forms from various widgets, it's important to communicate which widget they apply to and group them somehow so they don't bleed into other widget forms visually.

I see this working is like this:

Unselected (resting) - requiring input to work
When a Legacy widget block is unselected (resting) but requires necessary form inputs to work, it should show the "Edit" view.

Unselected (resting) - not requiring input to work
When the Legacy widget block is unselected and does not require any input to show properly, it should default to the "Preview" view.

Selected (focused)
Any Legacy widget block that has focus automatically defaults to the "Edit" view unless changed manually to the "Preview" view, but if unselected and selected again, it defaults again to the "Edit" view.

[ZebulanStanphill]

@mapk Nice mockups. That looks a lot better than the current situation.

[afercia]

I agree when there's tons of forms from various widgets, it's important to communicate which widget they apply to and group them somehow so they don't bleed into other widget forms visually.

I'd totally second this. And it needs to be communicated also _semantically_, not only visually. So that assistive technologies can understand the grouping and communicate it to users.

[mapk]

Looks like we've got some good direction here. 🎉 Thanks, everyone!

[adamziel]

Merging https://github.com/WordPress/gutenberg/pull/25638 marked a first step towards this. For now, all legacy widgets default to forms with a visible title bar. The next step would be detecting which widgets require user input to generate preview, and defaulting to preview for these.

[afercia]

Glad to see the progress made on #25638. Question: why the widget titles aren't H3 headings as asked for in this issue and in #24561? A good headings hierarchy is fundamental not only for better semantics but also as a navigational tool for assistive technology users.

[adamziel]

Good point @afercia - let's definitely make them H3 headings

[kevin940726]

Accidentally closed this via #25690, reopen it now.