Gutenberg: Widget screen: No reaction when clicking the top left Inserter button

[paaljoachim]

Describe the bug
The inserter button in the top left area of the Widget screen shows no reaction when clicking it.
I also noticed an error code in the Chrome console.

Environment
Twenty Twenty theme.
Gutenberg 8.9.3 activated.
Chrome

To reproduce
Steps to reproduce the behavior:
Go to the Widgets screen and click the top left inserter button.

Expected behavior
I expect to open the full Inserter panel and be able to see all the blocks and widgets.

Screenshots
I opened the Chrome Console.

Noticed this error:

@draganescu

[carolinan]

I am able to reproduce this with a different theme with Gutenberg 8.9.3 activated.

[kevin940726]

I thought this is intended? One has to first click on the widget (e.g. Footer#1) wish to insert to, then the inserter button will be enabled.
Maybe we should make it more clear though 🤔 , or am I missing something obvious?

[draganescu]

Yes, this is an UX bug. (the console error is a problem, but it is not causing the button to not work)

@mapk what is the best solution here?

Having to click into one of the widgets areas to enable the inserter to work is counter-intuitive. It is not covered in the last update on the overall design and neither in the original comment:

There is still some ambiguity around which area the Global Block Inserter should add a block to.

[paaljoachim]

Hey Andrei @draganescu

I just tested the functionality in a page when no block is selected. Clicking the Inserter and then clicking a block automatically adds the block to the bottom of the page.

Regarding the Widgets screen one can adjust the behavior a bit. Clicking a block in the inserter panel can automatically add the block to the first widget area. This means that user does not need to first select a widget area, but here we assume at the user wants to add it to the first widget area. If they want it anywhere else they can click and drag it to the correct area.

I just tested and drag and drop between widget areas is not working. So I made this issue for it: https://github.com/WordPress/gutenberg/issues/25243

[paaljoachim]

Another option but I am not sure that I like it though.... as it might not be accessible or contain a good UX flow.
When no widget area is selected and one clicks the top left Inserter then clicks to add a widget/block a dialog box/etc could show up asking the user where to add the widget/block with a drop down of areas.

In the older widget screen one could do so:

[kevin940726]

Maybe automatically select the first (or last, or last edited, or whatever) widget and have a visual indicator would be simpler and more accessible?

[paaljoachim]

That is a good idea Kai!

The scenario.
Today as one enters the widget screen the first widget area is open. In a sense this is already pre-selected.

As can be seen above the Footer #1 is open and thereby pre-selected when entering the Widget screen. Clicking the Inserter at the top left and clicking a block/widget should automatically add the widget/block to the selected Widget area.

[mapk]

@mapk what is the best solution here?

Thanks for the ping! The solutions discussed above by @paaljoachim and @kevin940726 are great starting points. I think we need to consider two flows.

1. When the page first loads.
2. When everything has been deselected.

What the page first loads

The first widget area should be focused when the page loads. This means there will be a blue outline around it visually indicating it as the target area allowing the Inserter + to be clickable.
I don't think an expanded area is selected by default because they can all be expanded at the same time by the user. But if the first area is focused, great!

When everything has been deselected

This is a lot trickier. While I like Paal's idea of selecting an area to add to, it becomes a lot of UI for a small space which can be overwhelming. Can we automatically select the first area when the Inserter is clicked? The Inserter panel would open, and the first area would highlight with the blue border.

• When nothing is selected, both the Inserter panel and Inspector panel are hidden.

[adamziel]

I think it is possible to specify the default widget area that's in effect even when nothing is selected. The auto-selection when inserter is clicked would still be a nice touch as it would clear up the expectations. 👍

[adamziel]

The issue was solved by #24908. What's missing is selecting the block while the inserter is open. I have some concerns related to that @mapk. Normally when a block is selected is means it's focused and you can interact with it using the keyboard (think tab, arrow keys, enter). In your prototype it's not obvious what happens when you use the keyboard - will it affect the inserter? The block? If I navigate to "Search for a block" input does it mean it's going to have the blue selection border just like the widget area? How do I differentiate between the selection inside of the inserter and the "active" widget area?

I checked what does the global inserter do in the post editor. It turns out it indicates the placement of the new block using a blue line like on the screenshot below - I think we should use the same pattern here:

Either way, it would be good to move this discussion to a new issue now that the "no reaction" problem is fixed. cc @draganescu

[mapk]

@adamziel good call on the keyboard navigation. So it appears that pattern works when a block is selected. We still need a way to indicate which area that block would be added to when nothing is selected.

The post editor works because it just add it to the bottom of the document. But if we have multiple areas open, but nothing selected, it's still not clear where the new block would be added.

I'll look at this today.

[draganescu]

Closed by #24908.