Allow selecting of one or more elements upon command-click, select

[MackenzieHartung]

As a user I want to be able to select more than on block at a time.

AC1: Upon holding the command key down, and selecting individual blocks a user will be able to select one or more blocks.
AC2: Blocks will remain selected, until user clicks without holding command

[swissspidy]

So.... In Gutenberg multi-selection is really designed for selecting a range of blocks from start to end, not a loose list of blocks that could be all over the place.

Examples in the code:

https://github.com/WordPress/gutenberg/blob/1b5fc6a593581bfe1ee75128f0d05c154c4b8fdf/packages/block-editor/src/store/selectors.js#L538-L598

https://github.com/WordPress/gutenberg/blob/1b5fc6a593581bfe1ee75128f0d05c154c4b8fdf/packages/block-editor/src/store/selectors.js#L313-L337

https://github.com/WordPress/gutenberg/blob/1b5fc6a593581bfe1ee75128f0d05c154c4b8fdf/packages/block-editor/src/store/actions.js#L157-L193

This is what you currently get when selecting two blocks in a row in Gutenberg:

As you can see, one can easily (un)group or remove a list of selected blocks. There's also a selection indicator in the sidebar. These features directly rely on these selectors, e.g. getMultiSelectedBlocks(), getMultiSelectedBlockClientIds(), and getSelectedBlockClientIds().

Ideally we would make a contribution to Gutenberg to change the way multi-selection works internally, to allow multi-selection without having to specify a range.

Next, we could add a change that allows multi-selecting blocks by using Cmd+Click. (In the same PR or a new one)

That means the change would make it into an upcoming version of the Gutenberg plugin, and then into WordPress 5.3.

Alternatively we could try to roll our own, which would mean we need to override a bunch of components. Not sure how feasible it is, but given the additional maintenance burden, I don't think we can get around contributing this directly upstream.

[swissspidy]

Upstream issue created: WordPress/gutenberg#16797

^ cc @miina

[swissspidy]

Upstream PR work in progress: WordPress/gutenberg#16811

[swissspidy]

The above PR seems to work well in inner blocks in the regular block editor (e.g. within a column block), but not for our custom blocks on a story page 😕

[miina]

I can debug a little bit to see if there's a fixable reason why.

[miina]

OK, so looks like there is a conflict with BlockMover, more specifically with
<IgnoreNestedEvents childHandledEvents={ [ 'onDragStart', 'onMouseDown' ] } with onMouseDown.

Just removing onMouseDown works for multi-selection but doesn't allow dragging properly anymore since this way it'll try to select blocks while dragging and this will cause a bunch of errors.

Especially with Text block for some reason, some other blocks are still kind of draggable.

Tried briefly adding toggleSelection when starting dragging but this way dragging wasn't possible at all, didn't look into it very thoroughly though.

[swissspidy]

Made some good progress again upstream today: WordPress/gutenberg#16811

[swissspidy]

Looks like it has to wait until WordPress/gutenberg#16835 is merged