Gutenberg: Block "More" Menu: Final design proposal

[jasmussen]

Here's a mockup showing the latest iteration of the block's "More" menu:

Compare to master:

Note that although the mockup uses Gridicons, we'll keep using Dashicons in the menus. It's also okay to keep or adjust the labels in implementation, depending on prior history. Finally, the shortcut combinations are suggestions only, and we should adhere to standards where available, and consider other conflicts, when choosing these.

ToDo list:

• [x] Add "Insert Before" and "Insert After" icons to Dashicons
• [x] Add "Insert Before" and "Insert After" buttons, see https://github.com/WordPress/gutenberg/issues/7297
• [x] Add keyboard shortcut indicators
• [x] Add keyboard shortcuts
• [x] Adjust sorting order is a little different
• [x] Adjust padding to match

[jasmussen]

It was suggested we add space between the trash button, if we add that to the menu, and the other menu items. Here's a pattern for separators in the popout menus:

Worth noting the above is an older mockup, and lacks the keyboard shortcuts that are actually shown in master:

[karmatosed]

This is a great iteration. I am not as keen on the inserting/adding but see the place for it so 👍 Let's try and get this in with the trash icon being there and a separator before it.

[mtias]

Padding between item (focus ring) and the popover also stands out.

[jasmussen]

CC: @talldan regarding keyboard shortcuts, I just updated this issue. I will make a separate PR for padding, and I'm going to create some Dashicons as well.

[jasmussen]

I've added pull requests to check a number of these boxes, and there's now also a PR to add the new icons in https://github.com/WordPress/dashicons/pull/311.

[talldan]

Thanks @jasmussen - really appreciate you looking at those separately.

[noisysocks]

What's left to do here?

[jasmussen]

Yay, it's done! Closing as such.