Problem/Motivation
The Layout Builder UI currently relies on mouse-driven drag-and-drop to move around blocks.
Once #2956204: Allow Layout Builder sections to be reordered is finished, it will also be used for sections.
The designs include another keyboard-driven mechanism for these reordering actions.
Proposed resolution
Current proposed solution:
- Add a "Move" contextual link
- Clicking this opens a form in the off-canvas dialog(same as "Configure" and other actions)
- The form has a "Region" dropdown which allows moving to another region
- The form also has a blocks draggable table
- The blocks in the table are update for when the region changes
Demo video: https://youtu.be/z3TlnuVSFqQ
The demo video also has #2725259: [regression] Table Drag handles no longer respond to up/down arrow keys and #2938132: Ship layouts that make sense with Layout Builder's concept of sections applied
Previous proposed solution:
Previous/Next Links
Each block would have 2 links "Previous" and "Next"(probably replaced with arrow icons)
Clicking these links would move a block through the regions and sections of the layout.
Latest patch for this version: https://www.drupal.org/files/issues/2018-10-19/2995689-13.patch in #13
Video demo: https://youtu.be/5dHSoEPOgq0
4 way directional links
Each block may have up to 4 direction links(up/down/left/right)
The links will only be shown if the block can move in that direction. For instance if the block is region with no regions to the left or right these links will not show up.
The direction links are determined by the currently available regions. For instance if the layout is on small screen and the regions that were left and right are now up and down the links will be updated to remove left and right links.
Latest patch: https://www.drupal.org/files/issues/2018-10-26/2995689-22.patch#22
video demo: https://youtu.be/d63oIeKpxZA
Target method(limit other links)
Each block will have a contextual link "Move block"
Once "Move block" is clicked every possible place the block to could be place will have a "Place Block" link.
When the user clicks "Place Block" the block is moved to that location and all "Place block" links are removed until next "Move block" link is clicked.
Other links like "add block" will removed until the block is placed
Latest patch: https://www.drupal.org/files/issues/2018-10-26/2995689-26.patch#26
Demo video: https://youtu.be/41OfUEz-4wY
Target method(don't limit link)
Same as above but other links are not removed. If the user clicks "Move block" but before clicking a "Place block" link does another action like "Configure block" or "Add block" the "Place block" links are removed.
Latest patch: https://www.drupal.org/files/issues/2018-12-04/2995689-46.patch
Demo video: @todo @tedbow will make demo video
Original mockups
Remaining tasks
TBD
User interface changes
Yes
API changes
N/A
Data model changes
N/A