Widget Editor: Which area is the block being added to?

[mapk]

Problem

When adding a block from the Inserter, there is no clear indicator showing which widget area the block will be added to.

Example from Post Editor
In the Post Editor, when using the keyboard to add a block from the Inserter to the document, if nothing is selected, the block gets added to the bottom. If a block is selected, a visual indicator (ie. blue line) appears showing where the block would be added.

Explorations and discussions
Initially, this exploration was discussed (#25176 (comment)), but was found (#25176 (comment)) that using the keyboard, there would be two things focused on screen which leads to a problem. So how do we highlight or indicate which widget area a focused block would be added to from the Inserter?

cc @adamziel

[mapk]

I fiddled around with a solution that involves a modal when nothing is selected. This particular prototype shows a flow using the keyboard only, but it would apply when using the mouse if no area is previously selected as well.

The nice thing about using a modal like this is that it echoes the current accessibility mode in the widget screen.

[carolinan]

Or disable the sidebar inserter and only allow adding blocks from the add block inserter activated from inside the specific widget area.

[mapk]

Or disable the sidebar inserter and only allow adding blocks from the add block inserter activated from inside the specific widget area.

@carolinan, I was thinking through that idea as well. 👍 However, it tends to break away from the current classic Widget screen pattern of showing all widgets in one area. It also veers from the existing block editor pattern too, so I chose not to pursue that direction.

I mocked it up real quick for a visual.

• Would the Inline Inserter popover be scrollable?

[mapk]

Using the keyboard to add a block when there are no areas selected

Another iteration is on a keyboard flow that defaults adding a block to the first area when nothing is selected. This block could then be cut and pasted into another area as in the prototype below.

• In the prototype, notice that there are no widget areas selected. So when adding a block from the Inserter panel, The "drop" indicator (blue line) defaults in the first widget area.
• The block is then added and filled out.
• Then I click CMD + X to cut the block (just like in the block editor today).
• The widget area is now highlighted and selected.
• I TAB down to the next widget area.
• Then CMD + V to paste the block into that area.

[paaljoachim]

Very nice explorations, Mark!

Actually this issue Drag and drop from inserter to post #1511 is more important now in relation to the widget screen than earlier. In relation to drag & drop of blocks from the Inserter Panel to the Widget areas (and Gutenberg block areas.)

I still think that when no widget area is selected that when opening the Inserter Panel that the first widget area should automatically become highlighted (as you show above in your mockup). It also gives the needed visual hint to the user which widget area is by default selected, reminding the user to click another widget area if need be to add the block/widget there.

[mapk]

Actually this issue Drag and drop from inserter to post #1511 is more important now in relation to the widget screen than earlier.

I agree, but we'll still need to figure this out in relation to keyboard controls only.

I still think that when no widget area is selected that when opening the Inserter Panel that the first widget area should automatically become highlighted (as you show above in your mockup).

Even in light of this comment: #25176 (comment) which notes that two elements would be focused then? I imagine having two elements focused at the same time could cause some problems.

[draganescu]

@mapk there still is a problem with the situation when all the widget areas are minimized.

[mapk]

@draganescu, How's this? Basically, if everything is collapsed, as soon as the Inserter panel opens, the first area expands as well.

[mapk]

Looks like this one has been resolved? I'm closing now.