Widget Editor: Adding 3rd party widgets to the editor

[mapk]

Update

As the Widget Editor adopts more of the Block Editor's interface, it's important to think through how 3rd party widgets are found and added to the editor along with blocks. With only the Inserter panel and the Editor visible, how do we bring widgets into a place where they can be added to the Editor?

Legacy Widget block

Currently the Legacy Widget block is being used for this purpose, but it's not very intuitive. In order to add a widget to the editor, the user must know there exists a block that adds widgets (ie. Legacy Widget block), add this block to the editor, then using the dropdown in the placeholder, select the widget they want. From here they would make settings changes from inside a widget that exists inside a block with a lot of UI that doesn't help simplify things.

Legacy Widget block

Legacy Widget block with widget

Proposal

How about a world where the user doesn't need to know about the Legacy Widget block? Just open up their Inserter panel, much like they do elsewhere, find their widget, and add it to the editor.

• Of course the Legacy Widget block would be wrapping the widget because the widget needs some way to be recognized as a block. But instead of showing the Legacy Widget block's icon, description, etc. it inherits the widget's icon, description, etc.

Editing and Saving

Editing the widget is split between the "Edit" state of the block and the "Settings" in the sidebar. Much like most widgets, the settings would be included as a form within the block's "Edit" state. This is currently how it works. Users can add widgets to the Editors and nothing would go live until the "Publish" or "Save" buttons were submitted.

Future iterations

I'm exploring how "Inactive Widgets" fit into this scenario.

• Inactive widgets would only be accessed from the Widget Editor, not from the Block Editor.
• They could be stored in the Inserter panel as well, or somewhere else in the UI.

[noisysocks]

Editing the widget is split between the "Edit" state of the block and the "Settings" in the sidebar. Much like most widgets, the settings would be included as a form within the block's "Edit" state.

I think we need to display the name of the widget more prominently. With blocks, you can tell what block it is by sight because the editor interface looks the same as how the block renders on the frontend. With widgets, however, you only see a form with ambiguous text fields such as "Title". See #24566.

[mapk]

With blocks, you can tell what block it is by sight because the editor interface looks the same as how the block renders on the frontend.

Based on some recent feedback, I landed on the idea that when the user clicked away from a Legacy Widget block, it would automatically switch to show the "Preview" in the document. This way, I believe, would make it easier to identify the widgets. So something like this:

[paaljoachim]

With only the Inserter panel and the Editor visible, how do we bring widgets into a place where they can be added to the Editor?"

Reading on it looks like your mostly referring to the legacy widgets block, and sharing a proposal that these should be wrapped. It sounds like any legacy widgets block will need to be converted in a way to work within Gutenberg. It would then be natural to have a widgets section to where these legacy widgets are seen.

Regarding inactive widgets. There is a footer, header etc etc sections. There can also be a section called inactive widgets. The user would just drag any widget they want are not ready to delete (as they might have modified it) to the inactive widgets section.

[mapk]

With only the Inserter panel and the Editor visible, how do we bring widgets into a place where they can be added to the Editor?"

Currently, @paaljoachim, you can add a Legacy Widget block to the Editor. But with this proposal, I imagine a "Widget" category would be visible in the Inserter if the user had 3rd party widgets installed. They can then add widgets to any editor and the widgets would be automatically wrapped in the Legacy Widget block.

In regards to Inactive widgets, I've been working out some concepts here: #24698 and #24703.

[youknowriad]

While this is definitely a great flow, I might think we shouldn't implement it because the idea is to encourage third-party developpers to move away from widgets and transform them into blocks. And adding first-class support for widgets in the inserter is likely to undermine this goal.

[paaljoachim]

Legacy Widgets need to have a simple way to be added for anyone who is using the Classic Editor plugin or just have to use an older widget.

In general the user would add a block to a widget area when using Gutenberg. I would not think adding a defined method for legacy widgets would undermine a developer in thinking forward and transforming the widget into a block when they are ready to do so.

[youknowriad]

I'm not saying we shouldn't have a way to add these, I'm saying there's already a way to do it. It's different than blocks explicitly and if we just treat them as blocks, we're doing our selves a disservice.

[mapk]

I'm not sure about that, @youknowriad. It's important we don't make users suffer for a 3rd party's choice to keep their widget as a widget and not convert to blocks. Once FSE is fully integrated, and the user's theme supports it, I can imagine these screens being hidden or deprecated. 3rd party widgets that users rely upon still need a way to be found and added. The Inserter offers this ability and it works in this screen, in the Block Editor, and most likely in the Site Editor too.

[mtias]

I think it'd be good to make specific old widgets available as variations of the Legacy Widget block to reduce insertion steps and not create another insertion mechanism (a dropdown inside the placeholder of a legacy widget), but I don't think we should make them look like any other block since they behave entirely different (as @noisysocks mentions, they default to a form rather than their front-end representation). It might be useful to have it show "Legacy Widget: Name" in the toolbar, for example.

[mapk]

Working in some of the design from: #24870 I've iterated on the Legacy Widget block prototype.

Notes

• Legacy Widget block icon persists in the block toolbar and settings desc.
• The block shows the widget's name in the toolbar.
• The widget name is also reflected in the block desc for further clarity.

[paaljoachim]

This looks really nice, Mark!
A Legacy Widget and a newer Gutenberg block should look and function as similar to each other as possible.
Legacy Widgets would just be under a Widgets (legacy) category. While blocks are placed into various categories.
Functional/feature wise legacy widgets would not offer as many adjustment opportunities as newer blocks would.

[AndyGHenderson]

If this is used as a mechanism to 'force' developers to implement blocks you might encounter some unwelcome side effects:

• Developers/site admins might just remove theme support for block editor widgets
• Developers - who already contribute a lot of their time for free - might quit blaming block developers and leaving people in the lurch

As an admin myself for several sites in the voluntary sector run by non-IT users, and reading the above, removing theme support for the block editor is looking very attractive.

Andy

[draganescu]

Howdy @AndyGHenderson ! This is in no way meant to force anyone to do anything. In fact a great effort is spent on insuring backward compatibility with the current widgets and sidebars. The goal is quite opposite, to allow blocks to exist next to widgets in without much effort from theme developers.

[AndyGHenderson]

Good to hear. I was trying - in particular - to balance this point further up: "While this is definitely a great flow, I might think we shouldn't implement it because the idea is to encourage third-party developpers to move away from widgets and transform them into blocks. And adding first-class support for widgets in the inserter is likely to undermine this goal."

I'll wait to see how this resolves. But if legacy widgets are 'hidden' or difficult to find - and the ones I use are not replaced, or replaced with a complex UI - I will feel forced to switch theme support off.

Andy

[mapk]

From what I can tell, this issue looks to be resolved. I can add 3rd party widgets straight from the Inserter. Thanks all!