Problem/Motivation
Some complex page layouts leverage multiple section containers for long-form content, where reordering sections would be helpful.
Proposed resolution
Allow re-ordering of sections through the UI in mobile-friendly, accessible manner.
Completed tasks
- Determine the best UI for re-ordering sections
- Write patch with functionality
- Write tests
- Community review and confirmation
- Usability review
Remaining tasks
Additional tasks and optimizations prior to follow-up review:
- #3080606-77: Reorder Layout Builder sections: Move the "Reorder sections" trigger to be in-line with each section, alongside the remove X and the "Configure section" link. This is inspired by http://www.drupal.org/project/lb_ux. Reasons for this include: the "reorder sections" is something likely done while looking at a given section, and scrolling back to the top takes you away from that focus. Also, the "Save layout" and "Discard buttons" are actual buttons that perform a standard operation, and it's easy to scroll past that and miss the "Reorder sections" link
- #3080606-77: Reorder Layout Builder sections: By having the reorder section be triggered from a specific section, we can highlight that section in the tabledrag. Compare to the highlight effect when you use the "Move" contextual link for any block in Layout Builder. See also the Block UI, after placing a new block, it scrolls to and highlights the newly placed box.
- #3080606-77: Reorder Layout Builder sections: Add a second column to the tabledrag with the human-readable label of the layout plugin used for each section. This additional metadata will be very helpful when trying to keep track of which section is which, especially if you haven't added custom labels to your sections (by default they are only numbered). If needed, it should be possible to specify a greater width for the off-canvas sidebar.
- #3080606-84: Reorder Layout Builder sections: Try to make the UI for reordering sections as much like the UI for reordering components as you can. That applies to the interaction in the off-canvas sidebar. It also applies to the link that opens the sidebar. For reordering components, I think that is a contextual link, along with Configure and Delete. Would it make sense to have similar contextual links, or a drop button, for sections?
- #3080606-84: Reorder Layout Builder sections: I see links to some screenshots in #74, but nothing under "User interface changes" in the issue summary. Once the suggestions in #77 are implemented, it will help to get updated screenshots and add them to the issue summary.
- Receive @tim.plunkett (subsystem maintainer) review signoff (per #3080606-55: Reorder Layout Builder sections and #3080606-60: Reorder Layout Builder sections, as stated in #3080606-77: Reorder Layout Builder sections).
- #3080606-85: Reorder Layout Builder sections: I think this issue needs a change record, so I am adding the tag for that. It might also need a release-note snippet at the end of the issue summary.
User interface changes
Needed, see #3080606-84: Reorder Layout Builder sections or remaining tasks above for process to create UI changes.
API changes
None anticipated.
Data model changes
None anticipated.
Release notes snippet
TBD
Follow-up issues
TBD
#3293787: Section reorder through click-and-drag
#3293789: Replace "Show Content Preview" checkbox with collapseable sections
Screenshots
New reorder section task
Off canvas to reorder sections
