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