Gutenberg: Revisit the trailing inserter

[jasmussen]

As of the time of this writing, master features a new interface for inserting content in the context of the canvas. It has a side-inserter, no sibling inserter and a trailing inserter consisting only of a plain textfield. This is part of a cage match to simplify in-canvas insertion (#4669).

Having used this interface since it was merged in after the 2.1 release, we've had time to test it, even if it hasn't yet been released in the plugin. Already, feedback (including on the merge PR, #4539) has made it clear that aspects of the old interface are missing in the new, and aspects of the new weren't working as intended. This effectively closes #4669. As such, let's revert the side inserter, restore the sibling inserter, and revisit the trailing inserter.

Here is a mockup for an evolution of the trailing inserter:

This is essentially a text input field giving you the usual access to either keep writing, or to use the Slash command. It restores recently used blocks on the right, but with Image and the inserter permanently added on the right. When you move the mouse towards these, or tab into them, the contrast increases.

This is inspired by the Dropbox Paper interface:

As a reminder, here's what's in the 2.1 version of the plugin:

☝️ this is mostly what the trailing inserter has looked like since June 2017, where it looked like this.

CC: @karmatosed @mtias @aduth @youknowriad

[jasmussen]

More discussion around the trailing inserter, from way back when: https://github.com/WordPress/gutenberg/pull/1553#issuecomment-311654387

[mtias]

This seems like a good evolution to me as it balances the benefits of quick access to blocks and the ability to just click and continue writing.

[karmatosed]

This feels like a solid evolution of the interface. It's good to see where the roots come from and where we are now at. I like the idea of bringing back the recent blocks once someone has some, yet combining them with the most common options.

[mtias]

Side note, but this also scales much better with nesting and columns, as we don't need a "bottom" area for it.

[carlhancock]

I dig it! Nice work @jasmussen!

[folletto]

As a sidenote, I think this is one of the scenarios where "icon only" works, as it's an advanced/shortcut feature — while the "+" for universal insertion with labels is also reinforced.

Good interation 👍