This ticket has been updated in light of changes recently shipped. You can see the old version in the edit history.

Challenge: Blocks can nest to any depth, but selecting the right level is fiddly. E.g. it's easy to click a Paragraph nested inside a Columns block to edit it, but it's fiddly and unintuitive to select the parent column block to change its width.

"Navigation Mode"

WordPress 5.3 has just been released with a new accessibility feature called "Navigation Mode":

• Press Escape to enter this mode.
• You can now use the arrow-keys or tab, to quickly navigate blocks.
• Press Enter or click a block to edit it.

This improves keyboard accessibility by enabling you to tab through 10 blocks in 10 tab presses, as opposed to having to tab through all the block UI along the way. Another benefit is that in this mode, blocks are effectively selected, so you can press Delete to remove them. E.g. to delete a Paragraph, you can now press Escape to select it, press Delete, and press Enter to go back to editing.

However there are some unaddressed challenges with this mode:

• There is no visual indication of which mode you're in, other than the different block selection style.
• There is no mouse affordance to pick between modes.

Suggested Solution

By reframing "navigation mode" as tools, we might be able to address the discoverability issues, and provide an interface for selecting nested blocks in a parent-first fashion for mouse users.

1. Visually indicate the mode

By creating a visual affordance for showing what tool is selected, we are effectively acknowledging and visualizing the change that happens when you press Escape.

Additionally it provides a spot for reminding you of the shortcut keys, explaining what's going on, and provide a mouse interface for switching between the two.

For the majority of the time, users will simply see this interface:

But now there will be a clear non-default affordance to choose to enter "navigation mode"/choose the "Select" tool.

As an additional enhancement, it would likely be helpful to remove the block hover style from this default interface. "Hunting pixels" to select the parent block, as opposed to using the breadcrumb bar or the Select tool, is not an experience worth indicating with a hover style, that will "flicker" in narrow contexts.

2. Add parent-first selection

When you select the Select tool, or press Escape, blocks are selected "parent-first", i.e. click any block to select the nesting container, then the first immediate child, and so on. E.g. click a group block to select it, then you can click child blocks after, to select them.

This parent-first selection model you may recognize from Figma, or Sketch, or Adobe Illustrator, where grouped items are selected similarly. Only there, you double-click to enter a group. It has also been tested as the default interface in the Gutenberg plugin, under the name "clickthrough".

• The style for selected and hovered blocks is inspired by Figma, with a 2px outline when hovered, and a 1px outline and underlined text for selected. It also absorbs, entirely, the block breadcrumb from the default interface.
• For blocks with nesting, you click through each layer. Columns > Column > Paragraph.

To exit the selection tool you can either:

• Press Enter to edit the selected block.
• Choose the Edit tool from the toolbar.
• Click twice on any block, at its deepest nesting level:
  • I.e. click a Paragraph to select it, click it again to edit it.
  • Click a group block to select it. Click a paragraph inside to select it. Click the Paragraph again to edit it.

Full flow:

Finding The Balance

Feedback suggests that we should be mindful about introducing new modes. The approach outlined in this ticket has been updated to try and address that by not introducing a mode, but rather enhancing the existing mode "navigation mode".

The goal is to both enhance that mode by adding a clear visual tool indicator, and by improving affordances for selecting those tools. At the same time, hopefully we can use this new context to provide advanced block selection tools, only when you need them.