Section overview UI (exploded view)

jorgefilipecosta commented 2 years ago

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 https://github.com/WordPress/gutenberg/issues/39281#issuecomment-1084648592. 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

youknowriad commented 2 years ago

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 commented 2 years ago

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:

I tried double clicking into a section in order to be able to go edit the individual components, but this didn’t do anything. It seems like the only way to zoom back “in” is to use the toggle in the top toolbar. Perhaps giving user a way to zoom back in in the main editing experience would make sense.

Happy to open a separate issue but, when I saw this listed above, I decided against it.

annezazu commented 2 years ago

More feedback from the seventeenth call for testing for the FSE Outreach Program to pass along:

I expected a kind of 3 dot … option drop down to do additional actions such as switch area and delete.

Zooming worked well to see what was there. I was able to insert new sections or patterns. I could also rearrange sections. I was not able to replace or delete any sections. (Not sure if that’s an option yet.)

TLDR: folks definitely are keen to see both a delete and replace option visible when in this view.

jorgefilipecosta commented 5 months ago

Closing this issue as it is better represented at https://github.com/WordPress/gutenberg/issues/50739.

WordPress / gutenberg

Section overview UI (exploded view) #40319