Add Additional Sections & Scrolling to Insertion Block

[timmyc]

The insertion block design shows the notion of having "Sections" within each tab of the dialog:

This task is to add support for sections within the tabs, and populate with some example block icons. One section that could be added at this time would be for embeds and could display a list of popular services ( facebook, twitter, youtube, WordPress blog post etc ).

[jasmussen]

Here's the latest mockup:

https://github.com/WordPress/gutenberg/blob/5e50c86e0c5c53cd2245e92537e8931cdc0cb317/mockups/Insert.png

See also this comment.

For some background on how this could work:

• As you are writing, typing typing typing, the plus button is below the last paragraph. As you make a linebreak, the plus moves to the side, see Insert content between two blocks #72.
• When on a new line, the inserter can be invoked by pressing the shortcut key /. See / on a newline should open the insertion dialog #24 and Keyboard shortcuts support #71.
• When the inserter is invoked, you can immediately use the arrow keys to select a block, and use Enter to insert that block. OR: you could start typing, at which point you'd start searching through the blocks.

So these flows should work:

• Type text, press enter for new line, type /, use arrow keys to select image, press enter, image is inserted
• Click plus with mouse, start typing ima and Image would quickly be filtered as the top result, press Enter, image is inserted

[karmatosed]

This is making me very excited about how the interface will feel magic. Having it adapt and know what you want to use, to predict - that's going to be super powerful to users.

[jasmussen]

Closing this in favor of #34