Adding keyboard shortcuts to navigate on the Block Insert Menu

[youknowriad]

refs #87

This PRs adds keyboards shortcuts to navigate through the insert block menu.

• / to open the menu (working only when the editor is not focused for now)
• Enter to insert the current active block (Obviously, it does nothing aside closing the menu for now)
• Navigate with arrows to select blocks
• Type text even if the input is not focused

Obviously, this PR adds so complexity to the code. Should we consider adding some organisation, modules?

Notes:

I tried to allow opening the menu when we type / on an empty block, but it's not easy to get the active block with the current implementation. Maybe in another PR.

[timmyc]

Couldn't some blocks appear in multiple categories? I'm guessing that was the initial intention of having an array here.

[youknowriad]

Yes, actually I did this in a previous Pr. but as @jasmussen said is his comment, we should stick with one category for now #87 (comment)
which simplifies a lot the navigation using arrows

[jasmussen]

Solid work.

Ran into a few issues:

Couldn't get / to invoke the menu, though I suspect it's because I'm on a european keyboard.

The insert menu scrolled a bit while using the search feature, that felt a little jumpy somehow. Feels like the scrollbar should be glued to the top as you start typing — think of it as the entire categorized & curated window being replaced just by search results. Try it in the OSX emoji keyboard accessible by ^⌘ Space, then search for "star".

If I click the plus button first, then start typing, works great. If I put the text cursor inside text first, then search, then I'm actually typing in the text (which closes the search field).

One iffy thing which I suspect will cause us some headaches — if you arrow key to the bottom of the inserter, and keep going down, you'll start scrolling the page instead.

Finally, and I'll pose this more as a question for the group than as a critique: what should happen when you arrow-key to the bottom of the left column of blocks and keep going? Should it stop, or should it start over from the top right column? Like this key direciton:

I realize this is still mostly a prototype, but feels like this particular interaction is worth getting right.

[ellatrix]

You might want to have a look at our text pattern plugin to detect normal characters: https://github.com/WordPress/wordpress-develop/blob/master/src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js
You'll probably have to look into the text node on keyup.

[youknowriad]

I updated the PR, I changed the way I track the / key press ( let me know if it works better for you now @jasmussen ). I also fixed some scrolling issues. What do you think about the behaviour now?

[jasmussen]

Nice! Feels much more solid.

However now I can't press enter or type in any of the text boxes.

Just to clarify — the thing we're mimicking here is slack. Try opening Slackbot and start typing /aw(and it'll soon suggest /away.

[youknowriad]

@jasmussen Oh! I see, I understand better now :) They should be a bit harder to achieve in this "non-scalable" prototype but I'll try to figure it out

[jasmussen]

So long as you can actually type in the textblocks, there's probably no need to take it all the way. The idea is to convey a feeling, at least until we get into the technical prototypes.

[youknowriad]

@jasmussen would you mind taking a look at this again?

I updated and now you can trigger the menu when you type / on an empty line on the editor and after selecting the block, you can continue typing inside the text block.

You still have the possibility to trigger the menu without even focusing the editor.

[jasmussen]

SOLID work. Love it!

Definitely good to merge for the UI prototype.

Future improvements (some dependant on other tickets) could include:

• show insertion menu in context of the newline on which the / was typed
• actually show the search term on the newline (the newline is your command line) until you press enter. E.g. type /ima, press enter, and an image is inserted

See also https://github.com/WordPress/gutenberg/blob/master/mockups/Insert%20Between,%20Keyboard.png

[youknowriad]

@mtias would you mind a technical Review for this or maybe we don't care that much since it's a prototype?

[mtias]

The block-switcher between paragraph, quote, and heading seems to be a bit broken. Not sure if it's specific to this branch or also present in master.

If it's not a regression here, feel free to merge.

[youknowriad]

In my testing, sometimes the block-switcher does not switch as expected, we have to try several times and I was able to reproduce in master as well. Merging!