Gutenberg: Improve flow for inserting between blocks

[jasmussen]

There's an increasing need to improve the flow for inserting content between existing blocks. See #2752, #833, #2890, #2755, #2043.

It becomes notably important when we start to look at nested blocks, or inserting images inline into paragraph blocks. A sticky inserter (as previously proposed) probably isn't accessible enough. Let's look at what a good way to do this is.

A core design value of Gutenberg is that a block when _unselected_ is a preview of the contents itself. When the block is _selected_, we can show further options (see https://github.com/WordPress/gutenberg/blob/master/docs/design.md#block-design-checklist-dos-and-donts-and-examples).

We have decided that the movers (up/down), configure block/trash (see also #2884) are important enough to show up on _hover_. But let's be extremely careful before we add more stuff on hover, it isn't a very mobile friendly pattern, and it also adds cognitive load when just editing or exploring a document.

Dragging and dropping images works fine, that's good.

A standard pattern for _editors_, online and offline, is to put the cursor where you want to add new content, make linebreaks to add space, and insert content there. This isn't immediately ported to Gutenberg since by design this block editor consists of _multiple editors_. But could we do this:

That is — when a block is selected, we:

• show space to type below it
• show the inserter blow the empty line of text
• perhaps even let Enter take you to this new line

Remember, on a newline, the slash command works for inserting content. In a past design we had the Inserter icon shown on the side.

Let's discuss further, and do more mockups. I'll try and put together an animatic of the above.

[karmatosed]

I totally agree, there should only be one inserter shown at a time. This for example is where confusion happens:

[jasmussen]

Here's what a few other editors do.

Including the current editor — set caret after image, press enter, insert new:

Medium — select image you want to insert _before_, press enter, get access to inserter:

Livingdocs — they have a separate "insert" button that adds a horizontal line for where things'll be inserted (after the selected block), like we have:

Notion.so — You can select any block and press Enter to insert an empty line below it, and then insert an image. Notion only has the slash command, but there might as well be an inserter button:

Of these, it _feels_ like the "press enter to make room" is a pattern that might be worth following.

[gziolo]

That is — when a block is selected, we:

• show space to type below it
• show the inserter blow the empty line of text
• perhaps even let Enter take you to this new line

This makes a lot of sense when you are editing the existing block, but it gets more complex when you want to add a new block between 2 existing blocks. In that case you need to select the specific block above the space where you want to insert block first just to see the inserter. What if we would also display another inserter when you hover the space between two blocks like this:

This pattern would allow to insert a new block also after the title of the document, which isn't possible at all at the moment, even with changes introduced in #2890.

[jasmussen]

@mtias also noted that pressing enter when a block is selected is perhaps not the ideal pattern to follow despite my previously noted excitement above. Like what happens to captions, or how do you break out of a list.

My objection to the current implementation is that it adds more cognitive load to the _selected block_ and its silhouette. As this is already very complex, that feels like a visual regression.

Matías noted that we could look at having the "inserter" hover exist _between_ two blocks, and be available there when you hover the space between blocks. It's not a lot of space, but it's an option that can be explored. Here's an old mockup for how that could look:

[jasmussen]

Just referencing https://github.com/WordPress/gutenberg/pull/2890#issuecomment-335116799 as Matías has a different mockup posted there.

[gziolo]

I reverted #2890 with #2929 to give as more time to find a solution that satisfies everyone.

Matías noted that we could look at having the "inserter" hover exist between two blocks, and be available there when you hover the space between blocks. It's not a lot of space, but it's an option that can be explored. Here's an old mockup for how that could look:

This is exactly what I was trying to describe above with my quick mockup done without design mindset. Personally, I like the idea of having the inserter in the middle of the line when you hover between the blocks.

[aduth]

Notion.so — You can select any block and press Enter to insert an empty line below it, and then insert an image. Notion only has the slash command, but there might as well be an inserter button:

Trying this one for the first time today, they also rely heavily on drag-and-drop.

Aside from touch implications, another thing I found after using it for a few minutes is that drag-and-drop is quite awkward to use for nested content, in much the same way that managing multi-level WordPress menus is clumsy (moving the cursor to _just the right spot_ to differentiate between a sibling or a different level of nesting).

[jasmussen]

Yep, while drag and drop in and of itself doesn't offend me, we probably shouldn't rely on it as anything but an additive enhancement, and a desktop one at that.

[buzztone]

I'm sure that drag and drop will be a very popular enhancement among many WP users when implemented, but you are right to look at it as an additive desktop enhancement.

One aspect I like about the _display another inserter when you hover the space between two blocks_ idea is the way it could fit well with future drag and drop enhancements.

[buzztone]

Managing multi-level WordPress menus is a pretty good example how not to do drag and drop. It's pretty old code so I'm sure it can be done much better nowadays.

Doing drag and drop well is still tough but hugely valuable for many users when you get it right.

[jasmussen]

Given the "Inserter between blocks" is merged, can we close this one? @karmatosed

[gziolo]

It works like a charm 🥇

[jasmussen]

Alright, closing for now. We can always reopen if need be!