Repository navigation
Section overview UI (exploded view) #40319
Description
This is purely a UI task. The objective is to implement this overview UI shown in the mockup:
In order for the persons working on this task not to be blocked from having the concept of sections, the first version of this task can rely on three sections the header (header template part), the middle section, all the blocks between the header, and footer, and the footer section (footer template part). The code should not take shortcuts and should be made in a way that makes it easy to update it to have N sections.
The UI should offer the button to open this mode on the site editor. It should be possible to use the delete button to remove a section, use the arrow buttons to switch header and footer template parts in a carousel-like experience, and press the replace button to open the existing template part replace modal.
After the base UI work is done, the persons working on this task should look into animations and try to have some of the animations shown on these videos #39281 (comment). The animation solution we propose should try to be as generic as possible. Ideally, we would be able to use it in other places.
- Render a list of exploded blocks
- Click to select a block
- A dedicated toolbar with just the movers, block lock and the title of the block
- Pattern switchers for "semantic sections" on the side
- Animation between the modes
- Animation when moving blocks
- Drag and drop to move top level blocks
- Double click to go back to "normal" mode?
- A different design for the list view (focused on sections/ root level blocks)
- A different design for the inserter (focused on patterns)
- Remove button on the side
- Backspace/Delete to delete the currently selected section/block
Activity
youknowriad commentedon Apr 14, 2022
I updated the issue with a todo list that can be iterated on. The first PR is in #40314 and it checks a number of items on the list already.
annezazu commentedon Oct 3, 2022
While I know this work is still being explored, I wanted to note the following feedback from the seventeenth call for testing for the FSE Outreach Program on the currently implemented zoomed out view, since I see above that "double click to go back to normal mode" is on the list:
Happy to open a separate issue but, when I saw this listed above, I decided against it.
annezazu commentedon Oct 15, 2022
More feedback from the seventeenth call for testing for the FSE Outreach Program to pass along:
TLDR: folks definitely are keen to see both a delete and replace option visible when in this view.
jorgefilipecosta commentedon Jun 4, 2024
Closing this issue as it is better represented at #50739.