Adding a block in-between another should be easier than it is

[jasmussen]

In Gutenberg 2.3 we added a line that shows up when you hover between two blocks (see #5198). This is a successor to the plus that would show up when hovering between, previously. This is a good UI for when you forget to add something and just want to quickly type out a phrase between two image blocks, or add a block.

But in its current implementation, it's a little too easy to hit this interface when you just mean to focus a text block and type. You can quickly end up with empty blocks you did not intend to create.

There are a few improvements to this we should look at:

1. Make the hit area for the in-between inserter smaller. Perhaps half the height it is now.
2. Only make it clickable after the mouse has waited there for maybe a second? I.e. if you quickly click between two blocks, you focus one of them. You have to hover there and wait for the line to appear, before you can click.

[jasmussen]

Sidenote, we need a better name for this interface. The past name, "sibling inserter", no-one knew what that was, and I suspect "in-between inserter" isn't great either. Any ideas?

[StaggerLeee]

@jasmussen

You maybe don't need all this. Just sense:

• Does User klick on other area after making new block
• Remove empty block silently.

Making area smaller will just combat your original purpose.

Whole logic you can use can be something like this:

• Did User move away and worked on something else, after using inserter and making empty block
• If Yes, remove empty block, User did it by mistake
• Empty blocks are of not use, and should not be saved in database.

[StaggerLeee]

Or simply remove all empty blocks on save / update Post.

Possibly with one filter for custom functions.php to have them saved, to cover some weird real life cases, I cannot remember now what.

[aduth]

Sidenote, we need a better name for this interface. The past name, "sibling inserter", no-one knew what that was, and I suspect "in-between inserter" isn't great either. Any ideas?

Betweenserter? 😄

[aduth]

Or simply remove all empty blocks on save / update Post.

One use-case I could imagine where this isn't great is when a user creates empty paragraphs for artificial spacing†. Whether or not this is a thing they should be doing is another point, but if they did and those paragraphs were to suddenly disappear, it's a jarring experience.

1. Add a block
2. Create a few empty paragraphs after this block
3. Add another block

[aduth]

Make the hit area for the in-between inserter smaller. Perhaps half the height it is now.

The original implementation in #3008 included a technique for trying to achieve best of both worlds in that (a) original cursor placement might require some precision to activate but (b) it shouldn't be overly easy to "lose" that between-inserter.

Since hovering in the specific area between blocks with a cursor can require a difficult amount of precision, I used a technique to provide a buffer for the cursor while the inserter is visible. A similar example of this sort of cursor intent buffer can be seen in this article about Amazon.com's menu behavior. Consider the following visualization of the effect:

I imagine it could benefit from some tinkering on...

• Delay to activate
• Size of buffer
• Buffer transition time

[maxxwv]

One use-case I could imagine where this isn't great is when a user creates empty paragraphs for artificial spacing†. Whether or not this is a thing they should be doing is another point, but if they did and those paragraphs were to suddenly disappear, it's a jarring experience.

In that case the blocks wouldn't be empty, though. In CSS, if you target div:empty to set display: none, a div with any content (even empty paragraph tag or a single whitespace character) won't match the rule. IMHO, I don't think the betweenserter (nice!) is all that big an issue when you consider that a user can drag and drop to reorder existing blocks, but if it's there it shouldn't impede on the user's writing experience.

[maddisondesigns]

I disagree with this. This new inserter is incredibly difficult to use and definitely shouldn't be made smaller. The original inserter menu at the bottom of each block was so much easier to use. I'm not the only one who's mentioned this either. Numerous people have said this on a number of recently raised issues.

The inserter gets even harder to use when one of your blocks is selected and you're trying to insert a block just above it. These last couple of Gutenberg updates have only made things harder than what they already were.

[StaggerLeee]

Just make in the center of this line Plus icon. And ditch "popular", "recent", "frequent" or what is is called part.
Yes one click more, not end of the world.

Leave line as it is now, on mouseover, grey, and add plus icon.

Clicking plus icon gives inserter as on top bar.

[maddisondesigns]

Here's another gif showing how incredibly difficult it is to use the current inserter. It doesn't even show up no matter how slowly you move the cursor between the blocks.

[markjaquith]

Sidenote, we need a better name for this interface. The past name, "sibling inserter", no-one knew what that was, and I suspect "in-between inserter" isn't great either. Any ideas?

The most accurate word is "interposition" — the action of inserting something between other things, but I'm not sure how many people know that word. "In-between inserter" is inelegant, but is more clear than "sibling interter" (isn't inserting at the end ALSO a sibling?).

Make the hit area for the in-between inserter smaller. Perhaps half the height it is now.

This could be twitchy.

Only make it clickable after the mouse has waited there for maybe a second? I.e. if you quickly click between two blocks, you focus one of them. You have to hover there and wait for the line to appear, before you can click.

I think the issue is... you need the area to be visually small (so blocks don't need excessive margin), and you need its click area to be large when you intend to click it, but small when you intend to click the underlying blocks. And it's hard to determine that intent. So maybe don't put anything clickable between blocks like that.

So, what about combining the earlier version (the plus) with the line, something like this?

Make the line non-clickable... just a "stuff will go here" indicator, and make the (+) off to the side. When they are at the top 25% of a block, the inserter shows above. Bottom 25%? Below. Middle 50%? Doesn't show (adjust those numbers until it feels right... maybe it's an absolute distance from the edges of the block).

Could make the line thinner. It could literally be one pixel tall.

[jasmussen]

"In-between inserter

👍 👍

So, what about combining the earlier version (the plus) with the line, something like this?

I think Matías is already looking to refine the inserter with some of the suggestions you mocked up there, also exactly with a plus on the side.

This could be twitchy.

It's a difficult balance to find, though, and a lot of very strong opinions about this feature. The iteration that Andrew refers to received less critique than the current implementation.

[jasmussen]

@mtias noted an idea where the area hovered is to the side of the block.

[folletto]

Sidenote, we need a better name for this interface. The past name, "sibling inserter", no-one knew what that was, and I suspect "in-between inserter" isn't great either. Any ideas?

Adjacent Inserter?

Make the line non-clickable... just a "stuff will go here" indicator, and make the (+) off to the side.

I'd +1 this approach. Also having the "+" on the side, is a subtle nudge at the same "+" in the toolbar at the top. ;)

Also having just the "+" clickable will make random accidental insertion harder, which seems good to me, but this might be a balance to be found.

As for the line weight, as it's insertion, maybe a dashed/dotted line might work better than a solid one.

When they are at the top 25% of a block, the inserter shows above. Bottom 25%? Below. Middle 50%? Doesn't show (adjust those numbers until it feels right... maybe it's an absolute distance from the edges of the block).

I'd also +1 to play with the margins until it feels right. 25% feels a lot to me, especially considering that right now Gutenberg still shows a bit too much admin debris, but that's the point of tweaking until feels right. :)

when a user creates empty paragraphs for artificial spacing†. Whether or not this is a thing they should be doing is another point

I add empty rows all the time. AMA. 😄

[ZebulanStanphill]

As I have continued to use Gutenberg for the past several updates, I still find the adjacent (or in-between or whatever you call it) inserter to be both too hard to find but also too easy to accidentally click at the same time. I think @markjaquith's suggestion here is probably the way to go, but I think even going back to the old inserter shown here would be better than what currently exists.

[afercia]

+1 for @markjaquith proposal to re-add the (+), not sure it should be on the left though. As illustrated on #6009 there are other UI elements there on the left that could completely hide the (+) (the screenshot is a bit old but still gives an idea):

Aside: it would need a tooltip too, as the accessible name of this control (its label) must be revealed in some way (and the tooltip is already a trade-off).

[mtias]

Closing as the famed sibling inserter is back.