Can’t select multiple blocks at a time on iOS

[desrosj]

Describe the bug
Selecting multiple blocks at a time while using the block editor on mobile seems impossible. This makes reorganizing headings and the following paragraphs very difficult and time consuming.

Screenshots
(Will upload a screen recording here, currently on bad WiFi)

Smartphone (please complete the following information):

• Device: iPad (6th generation)
• OS: 12.3.1
• Browser: Firefox

[ellatrix]

Right, selecting is only possible with a pointer device, not by touch. We'll need to think a bit how it could work on touchscreens. Perhaps we'll need a button to allow selecting multiple blocks, much like you can select multiple images in the iOS photos app.

So I'd suggest adding a "Select" button.
On click this turns into a "Cancel" button.
Then you can select multiple blocks (editing is disabled).
I'm unsure where this button should be placed.

Cc @jasmussen.

[jasmussen]

Perhaps we'll need a button to allow selecting multiple blocks, much like you can select multiple images in the iOS photos app.

Can we detect a longpress? I would imagine you longpress a block until it's selected, and then you can simply tap other blocks to select them, or tap outside to deselect.

I'm not opposed to an explicit button for it, but keep in mind we're looking at a screen that's maybe 360x400px effectively (when the browser chrome and soft keyboard are showing), and we need space for both the editing and publishing UI, as well as translations. This means making hard decisions about what UI to put where.

CC: @iamthomasbishop for some insights on the mobile native interface.

[iamthomasbishop]

Thanks for the ping @jasmussen! A couple of things at play here: Multi-block selection and cross-block selection. The latter is a much harder tech problem to solve so we haven't yet gotten there on native mobile, but for multi-block selection, I've proposed something similar to what @ellatrix proposed above called "Layout Mode" (which will probably be re-named). I'm by no means saying that the web should follow this, but here's what it looks like:

• On iOS, it's typical to have a "Select" button that activates a list/selection view of sorts that shows drag handles and checkboxes to allow multi-select
• On Android, that view is activated by long-pressing a list of things.

Here's an (old) blueprint that might help visualize things:

The explicit button would probably make more sense because in practice a long-press would probably conflict with other text/element selection. With that said, I'm not sure where I would put the "select" button in the iOS example considering the UI is already quite cramped. A couple more "crazy" options could be to:

• Add a trigger of sorts in the ••• overflow menu on the top toolbar that activates a special mode – that could surely open a can of worms
• Allow sorting in the document outline – I feel like I saw some cool changes coming in the document outline popover – this might be an interesting place to do it from that perspective

I'm not sure if that helps at all, but those two examples above are what's going to be considered for native mobile :)

[jasmussen]

I knew you might have a completely delicious and convincing mockup handy!

Although iOS 13 looks to possibly be changing this, we still have some challenges with positioning toolbars, and in mobile web we don't yet have a "modal" between previewing and editing quite yet. So although I have to admit that explicit Select button looks very userfriendly, it feels like the longpress to invoke multi select is the most actionable and pragmatic path forward, for the time being. What do you think?

If we strongly prefer the explicit button approach, depending on when we can reopen and fix #7479 (comment), we might be able to revisit.

[iamthomasbishop]

@jasmussen <3

it feels like the longpress to invoke multi select is the most actionable and pragmatic path forward, for the time being. What do you think?

I agree, with the caveat that we should beware of how long-press might conflict with the selection controls (tooltip that shows a list of options when you select text) and drag & drop. If we can get those things to co-exist, then that's probably the best path.

[jasmussen]

My goodness that is a solid, solid point. I guess the button might be the pragmatic solution after all. I'll keep looking at the mobile Safari improvements and see if they enable a docked toolbar, that might free up the necessary space.