Default Appender: Add select-state before showing inserter

[jasmussen]

What problem does this address?

The default appender component makes it easy to insert a block in its place. But it makes it hard to select the block itself:

Additionally, since this particular appender serves as a de-facto placeholder/setup state for some blocks (shown here, empty column and group blocks), the single bare plus icon is perhaps insufficient indication of what you're looking at.

#32108 discusses the same problem and how it affects the Template Part block, and a solution being discussed in the comments: build in a selection state before the insertion stage (aka. "clickthrough"):

• The resting state shows the type of block and a clickable area
• The selected state surfaces the inserter button

What is your proposed solution?

Today, preinserted groups and columns look like this:

By adding a selection state first, that resting can state serve both as block indication and clickable area. A click here would surface the inserter:

Here's a basic prototype:

This select the block first, then insert behavior would fix the issue described in #32108. #30116 and #30115 are adjacent, but it's not clear if this pattern will work in those cases.

[paaljoachim]

That is really nice, Joen!

Going through the issue step by step.

The new approach in re-selecting a container kind of block. As an example I use the Group block.
Block as been added to the canvas/layout, and de-selected.

None selected state.
Before:

None selected state.
After:

We are able to right away see which block this is by the label that is added inside the boundary lines of the block.

Reselecting Group block.
Before:

We assume the user wants to right away add inner content.

Reselecting Group block.
After:

It gives a stronger sense of hierarchy informing the user by the initial click that the parent container is selected. The user can then click the + to add the inner content.

---

Looking at the #32108 issue where de-selecting and reselecting a template part in a new page template is identical to the re-selection process of the Group block as seen above. As with the Group block re-selecting a template part would also benefit from the new suggested method.

---

Looking at #30116 and #30115 issues where one has added a link but want to delete it, but find it difficult to select the Add a link block added to the Navigation.

Default not selected state.
Before:

Default not selected state.
After:
It should probably look the same.

Clicking the Add a link block (Selected state):
Before:

Clicking the Add a link block (Selected state):
After:
(A suggestion.)

One clicks the Add a link (block). Block is selected. One can click backspace on the keyboard to remove the link, the 3 dot ellipsis drop down menu to remove the block, or click the + sign to open up the inline inserter to add a menu item.

---

In a sense this becomes a kind of click through state. Initial click selects the top parent or existing block. User selects to dig into the block by clicking the + or if content is present clicks again to gain access to inner content.

[paaljoachim]

It would be great with some feedback on this issue: @critterverse @javierarce @shaunandrews
Thank you! Have a great day!

[javierarce]

I like this solution, especially as it gives a little bit more context to the user, but I miss a couple of things in the prototype:

• A hover state to indicate that the placeholder is clickable. I guess we could: change the color, the text (Column → Add column), or maybe even replace the content with the inserter or a variation.
• An extreme case to understand what happens when there are a lot of placeholders on the screen: showing icons will probably add a noticeable amount of noise, and, in some cases, there won't be enough space to show the text and have to resort to showing just the icon.

[annezazu]

Really love this exploration. The only thing that immediately came to mind is how best to make this distinct from placeholders for theme blocks. At first glance, I could see folks getting confused there.

[jasmussen]

The only thing that immediately came to mind is how best to make this distinct from placeholders for theme blocks. At first glance, I could see folks getting confused there.

To an extent, an empty group can be considered a placeholder, which in part helped inform this idea.