Legacy Widget Design Iterations

[mapk]

I've received some feedback requesting improvements on the Legacy Widget block. The reasons being:

• Hierarchy is lost among the toolbar, the widget name, the content, etc.
• The amount of borders causes some messiness with the toolbar and is very heavy.

Some things we need to keep in mind are:

• The widget name needs to be visible at all times when the Widget is in "Edit" view.
• It was super difficult to tell where a widget form ends.

Current design

Iterations

Related to #24870 where it was determined that having the Widget Title/Name in the Legacy Widget toolbar didn't feel like the right place for it.

It feels pretty natural that a title bar, displaying the widget title, that spans the width of the Legacy Widget block makes for a good breaker between the two widget forms. It's a good solution addressing both needs above. Now, how that divider is designed can be done in a number of ways.

Also good to note that the if the widget's form is filled out enough to show content, when unselected, the Legacy Widget block would show the "preview" view instead of the "edit" view. This provides a good way for users to see how their content looks visually together with blocks.

cc @mtias

[talldan]

With 2, 3 and 6 I wonder how it'd look when a block that doesn't have a title (like a paragraph) is placed between two legacy widget blocks. It might feel a bit like that block is part of the block above it given how much stronger the title is and that you can't tell where the bottom of the widget is.

[mapk]

It might feel a bit like that block is part of the block above

Yeah, for this to work well in defining the boundaries of the widget, the Legacy Widget block needs to visually convey an beginning and end.

[shaunandrews]

After using the explicit edit/preview switch with multiple widgets in a sidebar, it can be tedious to use; Its easy to end up in a situation where you have to manually switch a bunch of widgets from edit to preview — one-by-one — just to get a sense of what your sidebar is going to look like.

Instead, I think it might be better to default to showing a widget's preview. When you click on a widget, then you'll see the editing interface, with an explicit toolbar button for when you're done editing. Here's how that could work with a few widgets, including an "empty" image widget:

[kellychoffman]

I like the simplification and defaulting to a gutenberg-like state. The latter should help with the goal of introducing more people to gutenberg via the widgets.

One minor copy change - I would probably still call it "Preview" instead of "Done editing" as its more familiar and implies you can always come back to it. (even if you're not actually "done")

[shaunandrews]

Here's an updated design:

• Updated the toolbar to have two buttons: Apply and Cancel.
• Added a new "No preview available" state for widgets that don't support a preview.
• Add a border when hovering widgets, to help convey what belongs to that widget.

[kellychoffman]

Add a border when hovering widgets, to help convey what belongs to that widget.
Added a new "No preview available" state for widgets that don't support a preview.

An interesting side effect of the blocks with "no preview available" is that the transition from hovering on the preview to clicking to edit is a lot smoother. (Due to the padding being consistent.) Any way to bring that to the other blocks?

[shaunandrews]

Any way to bring that to the other blocks?

Not without adding unnecessary padding/margin — I don't think it'd be worth it, as it would change the appearance of the rendered widget artificially.

[noisysocks]

@shaunandrews: What should happen if you click away after typing into the form? Should the changes stay (equivalent to clicking Apply) or should the changes go away (equivalent to clicking Cancel)? Maybe we ought to stick with Done editing so that there can be no confusion?

[noisysocks]

@shaunandrews: Could you link me to the Figma for that mockup so that I can measure paddings, font sizes, etc.?

[critterverse]

@noisysocks Clicking away after typing should be the equivalent of clicking Cancel. This is similar to the way cropping tools work on an image block:

cropping-tools.mov

If you don’t apply the changes and click away, the legacy widget should go back to its pre-edited, unselected state.

Figma file is here :)