Skip to content

Gutenberg cross-block selection #3629

@atimmer

Description

@atimmer

Cross-block selection is something that is absolutely necessary because every editor has this. In any location on any computing device, it is possible to select across paragraphs. Breaking this would be a huge break in users expectations.

Problem

Because Gutenberg has chosen for separating blocks into multiple editors this isn't easily achievable. Browsers don't support multiple selections/focuses. When you are in one editable field you cannot be in another one. Editable fields include inputs, textareas and contenteditable elements. So we need to work around this in a different way.

Solution approach

The only way to solve this while keeping paragraphs in different blocks is by removing the contenteditable property by default from all blocks. This property needs to be re-added once edit intent is shown.

Edit intent can be the following things:

  • Clicking and releasing a block.
  • Touching and releasing a block.
  • Focusing a block using the keyboard.

The big advantages of this are when selecting over multiple blocks the user is just selecting HTML. So selecting content works in exactly the same way as you'd expect.

There is of course behaviour that is hard to (re-)implement with this model. When you press SHIFT+Arrow down in a block it selects text. When you reach the end of the block you want the selection to continue to the next block. So at this point the block needs to lose it's contenteditable property and the selection re-applied. Because the browser also supports SHIFT+Arrow down on a selection on HTML we don't have to do anything else. This could also be solved by removing the contenteditable property as soon as you start selecting. The browser's default selection mechanisms would handle all the rest.

Other behavior includes pressing keys when you have selected HTML. When you press ENTER you expect the selected content to be deleted. Given that we already control a lot of the keys in Gutenberg I don't see this as a really big problem.

Expected Behavior

I can select text over multiple blocks.

Current Behavior

I can only select the blocks themselves.

Todos

  • Tests
  • Documentation

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions