Block-Enabled Widget Area

[brucedwilliams]

Describe the bug
The new block-enabled widget area with Gutenberg 9.1 is a disaster. Very few of the previous widgets carry-over to the block-enabled widget implementation which causes some serious headaches for the end-user. Overall, the transition to the block-enabled widget area needs to handled much better before this feature of Gutenberg is enabled for the standard WordPress install.

To reproduce
Steps to reproduce the behavior:

1. Install Gutenberg 9.1

Expected behavior
The expectation is that prior widgets will be usable in the new block-enabled widget area via a shortcode or a "classic widget" block or some such. Throwing out all the non-block-enabled widgets is not a workable solution.

Additionally, why can't I use ALL blocks in the widget area? There seems to be an arbitrary sub-set of blocks that appear in the block-enabled widget area. What determines which blocks can be used in the block-enabled widget area and which can't???

Screenshots
If applicable, add screenshots to help explain your problem.

Editor version (please complete the following information):

• WordPress version: 5.5.1
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 9.1

Desktop (please complete the following information):

• OS: MacOS 10.15.6
• Browser: Safari
• Version: 14.0

[draganescu]

Howdy @brucedwilliams! Would you mind providing a set of steps to reproduce the problem you are describing? Which blocks are you missing in the widgets editor? Which widgets were lost? Do they work if you disable the Gutenberg plugin?

Thank you for the patience to test and for coming back with more thorough reports! 😄

[brucedwilliams]

I'm happy to give you more context on this issue. I will use a new site that I'm currently working on as an example. With WordPress 5.5.1 and WITHOUT the Gutenberg 9.1 plugin activated, the widgets available are displayed thusly:

and when Gutenberg 9.1 is enabled, the extremely restricted list of widgets available is as follows:

Thank you for your patience in doing quality control and for coming back with more thoroughly tested plugins! 😉

[draganescu]

@brucedwilliams I did not mean to thank you in a sarcastic manner, I really meant it :).

I will test with the bbpress widgets, but wanted to point out that the list in the inline inserter is made of the most recently used blocks. To see a full list of blocks available use the blue + (plus) icon in the top bar, next to the screen's title.

That should open the inserter as a sidebar and you can see the full list of available blocks and legacy widgets.

[brucedwilliams]

Ah. Your response highlights what is the likely issue here: the UI for inserting a block via the black "+" icon at the right-hand side of a new line in the block editor has changed it's behavior.

Using WordPress 5.5.1 without the Gutenberg plugin activated, clicking the black "+" icon at the right-hand side of a new line brings up a dialog like this:

Note the "Browse all" button at the bottom of the dialog.

With Gutenberg 9.1.x activated, this same dialog is missing the "Browse all" button (see more screen capture above) but apparently only when using it in the context of editing widgets. When one is using the Gutenberg editor with posts/pages, the "Browse all" button is still included. This makes the behavior of this UI element inconsistent when it is used during the "Widgets" editing process versus elsewhere. This is a "bad thing"...

BTW, I literally NEVER use the blue "+" icon in the top bar as it is pretty much guaranteed to be more mousing to get to it than to the black "+" icon at the end of a new line. Good UI design seeks to minimize the mouse input necessary to access features.

Finally, I actually really dislike the blue "+" icon in the top bar in the first place. It is readily apparent that you are "adding" something by clicking it, but adding WHAT? At first, I literally assumed that the blue "+" icon in the top bar of the block editor added a new post/page similar to the Classic editor's "Add New" button (placement is similar after all). Please consider adding some kind of graphic/textual indication of WHAT is being added to the "+" icons, both black and blue.

I wouldn't mind an additional "+" icon in the Gutenberg editor that allowed a quick method of creating a new post/page (i.e., include the "Add New" functionality from the Classic editor). The only way to add a new post/page with Gutenberg is to go to the Dashboard menu which involves YET MORE mousing around the interface and opening of sub-menus.

Thanks!

[paaljoachim]

Hi Bruce @brucedwilliams

Thank you for the feedback! It is very helpful! As it gets me to think of how we can perhaps adjust existing features to make them even more user friendly.

In relation to the inline inserter. I made a new issue so that we have a consistent treatment of the Widget screen inline inserter so that is uses the same inline inserter that Gutenberg uses.

In relation to clicking the + icon in the top. It is interesting as you say that it is in the same location as adding a new post/page in the Classic editor. It would be great with even more detailed feedback.
For instance what would be your ideal way to add a block to the layout?

Good UI design seeks to minimize the mouse input necessary to access features.

I agree.

[brucedwilliams]

I would hope that the "inline inserter" is implemented only once and then called (with appropriate arguments) from both the standard Gutenberg editor and the new Gutenberg widget editor...

When I referenced my assumption that the "+" icon in the top bar of the Gutenberg editor created a new document not a new block and compared to the "Add New" button in the classic editor, I was referring to this UI element:

While one could argue that the "Add New" text is also ambiguous (add new WHAT?), it is an established WordPress editor interface element that experienced users are familiar with.

For the Gutenberg editor, I would use UI elements that incorporate both an icon along with text to give users who like graphic IU elements and also users who like textual elements something to like. A starting point for appropriate icons might be something like the Font Awesome "file-plus" icon for a new page/post/etc and something visually distinctive for a new block (I have no good ideas for you there). Both of these would live in the top bar.

Someone more versed in actual UI design could likely mock up a better concept than what I've described above...

[paaljoachim]

There are some ideas for Full Site Editing of using the left sidebar for adding new pages/posts. We will see along the way how things happen.

Thank you Bruce @brucedwilliams for sharing your thoughts!
It is greatly appreciated!

[talldan]

I'll close this as it looks like the most immediate part of the feedback was resolved by fixing #26023, the lack of the browse all button.

The other feedback seems a bit broader than the widget screen and affects all implementations of the block editor. If there's more specific feedback that can be actioned it'd be good to create smaller separate issues.