Add support for dragging blocks in zoom out mode

[richtabor]

Zoom out mode does not currently support dragging top-level blocks around. As part of a page composition flow, you should be able to drag top-level blocks to reorder them vertically when zoomed-out.

We could start by enabling the drag control/functionality on the existing BlockSelectionButton component (the dark toolbar there) that renders when in zoom-out mode, instead of first re-exploring a vertical toolbar.

Note that the shuffle icon only renders for patterns (re Group blocks with category meta data).

As an aside, I wonder if BlockSelectionButton could become the vertical toolbar.

[talldan]

Something to note with a vertical toolbar is that it might be interesting in terms of keyboard navigation. Most toolbars work horizontally (using left/right arrow keys), but the one toolbar being vertical might cause dissonance in that experience.

Sighted users that use the keyboard would probably expect up/down arrow keys to work, while non-sighted users might not know what keys to use and may still expect left/right to work. 🤔

[richtabor]

Something to note with a vertical toolbar is that it might be interesting in terms of keyboard navigation. Most toolbars work horizontally (using left/right arrow keys), but the one toolbar being vertical might cause dissonance in that experience.

I see it more like a set of menu items arranged vertically. Would left/up and right/down work?

[talldan]

Some more info here:

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/roles/toolbar_role
• https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/

The aria-orientation="vertical" property can be used to specify a vertical toolbar. I'm not sure how good the screenreader support is.

The second link says that it is possible to duplicate controls (so both left/right up/down both work). Down arrow is used to open dropdowns on our current horizontal toolbars, so that may be another point of confusion.

I think it'd be worth checking in with a11y contributors, as even though there's a spec, there's still often broader considerations.

[richtabor]

Down arrow is used to open dropdowns on our current horizontal toolbars, so that may be another point of confusion.

I'm not thinking we'll have dropdowns in this vertical toolbar. I agree, it'll be potentially confusing.

[richtabor]

Noting that select mode already supports drag and drop:

[draganescu]

@richtabor dragging is now available in zoom out. Should we close or redefine this issue?