Skip to content

Enhance sibling inserter (hover between blocks) #7168

@jasmussen

Description

@jasmussen

The "sibling inserter" is the so-far name for the interface we show when you hover between two blocks. This interface is there to add an affordance to insert content between two blocks. It is also an "escape hatch", because even though you could simply select the preceeding block and press "enter" to create a space for insertion, block authors might create a block that captured enter keypresses, trapping you.

The sibling inserter is not used on mobile.

A recent change to the sibling inserter meant you had to click a plus in the middle in order to insert a provisional linebreak where you can insert new content. This was meant to make inserting between blocks less error prone, compared to previously where clicking anywhere on the line between blocks would insert a provisional block. The latter would invoke constantly even when you didn't want it to. But the plus at the center is also not ideal, as it is often covered by the block toolbar:

screen shot 2018-06-06 at 11 38 27

Let's rethink how this could work.

One idea is to show the plus to the left of the side UI:

no side hover smarts

no side hover smarts hovered

You can still hover between blocks, but you can only click on the left. This concept would need some work for responsive breakpoints, but could probably be made to work.

What other ideas are there for creating an intuitive interface to insert between blocks?

GIF of the current behavior:

current inserter

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions