Add "Insert Before" and "Insert After" buttons in the block More menu

[jasmussen]

Mockup:

The sibling inserter is receiving improvements. But in addition to this, it would be nice with a menu-discoverable way to insert blocks before and after the selected block, and even nicer if there were keyboard shortcuts to do so.

See also discussion in #7220 (comment) and #7168.

[jorgefilipecosta]

Hi @jasmussen, I really like this idea nice work with the mockups.
The insert before and after should insert directly a paragraph block (the default block), right?
What if the paragraph block is not allowed in the region we are showing insert before/after? Should we now show the insert before/after options? Should we show the inserter inline similar to the sibling inserter (it may look strange in this case)?

[jasmussen]

Yes I think that's the desired behavior.

If you can't insert before or after, the option should still be there, but grayed out.

[jasmussen]

Pull request to add new icons in WordPress/dashicons#311. We need to copy over the sprite, but I can't recall if that changed lately.

[talldan]

I've got a branch where this is working well. It requires #8279 to be merged first, so fingers crossed that can be done soon. I have two questions:

1. What are the cases where a block can't be inserted before/after? One I can think of is maybe a locked block/template? I'll need to be shown how to do that.
2. I notice the shortcuts are displayed differently in the mockup, and having put them in place I see why! Should I work on removing the +s between keys? Here's a WIP screenshot:

[jasmussen]

I notice the shortcuts are displayed differently in the mockup, and having put them in place I see why! Should I work on removing the +s between keys? Here's a WIP screenshot:

Note that the dummy shortcuts are just dummy shortcuts from my mockup days, obviously defer to the real shortcuts we're building.

To answer your question though, I've been using Google Docs as the template for these. In Google Docs, if the shortcut is a simple Mac shortcut, like ⌘A, it's shown as such, ⌘A not ⌘+A. This is a Mac pattern, iirc, whereas on Windows that would be Ctrl+A.

But that pattern only applies to the simple shortcuts. See:

Also note how ⌘ is always the first modifier keey in the sequence. Though it seems Ctrl comes before ⌘:

So looking at the screenshots, we should change to:

1. ⌘+Shift+,
2. ⌘+Shift+D
3. Ctrl+Shift+-
4. Ctrl+Shift++

If the 1st shortcut used different modifiers, it might be Ctrl+⌘,. Because Ctrl comes before ⌘, and if the final key comes after that, then no need for the plus. Tricksy tricksy.

3 and 4 are tricky though, because it looks weird to see ++ or +- like that. Are those keyboard shortcuts finalized? Did we end up with those?

[talldan]

I just added what was in the mockups. I haven't done any research yet into what we can use, but thought it worth noting that they look weird!

Here's how are keys are defined at the moment:
https://github.com/WordPress/gutenberg/blob/master/packages/keycodes/src/index.js#L48

We don't have every combination, but you can see Shift generally comes after Ctrl and before Alt. Guess it depends on if you tend to use the left or right-side of the keyboard for modifiers regarding how you expect to see them laid out.

[chrisvanpatten]

FWIW, Apple's Human Interface Guidelines use the order Control › Option › Shift › Command › Key. (There's no official order, but that's what they are using in their docs.)

[noisysocks]

What are the cases where a block can't be inserted before/after? One I can think of is maybe a locked block/template? I'll need to be shown how to do that.

I think we just need to account for template locking both at the post level and at the InnerBlocks level.

I'd say that the Insert Before/Insert After buttons should have identical functionality to the already existing sibling inserter. From memory, the sibling inserter correctly takes the above into account.