Promote table of contents for navigation of nested blocks

[westonruter]

In working with nested blocks, one of the biggest challenges is navigating between the nested levels to select the desired nested block parent. In #6459 the nested block breadcrumbs were introduced to inform the user which block is selected, but it didn't actually help with selecting in the first place. Ironically navigating via keyboard is more reliable way to select the desired nested block rather than using the mouse, and this is clearly problematic for touch devices.

In order to make it easier to navigate the nested blocks, what if the table of contents were extended to include the hierarchy of nested blocks? Currently it only contains the headings:

If each level of nested block were included in the table of contents, it would be easy to visualize and to select the blocks. Since including non-heading blocks would add a lot of noise to the ToC list, perhaps they should be collapsed by default in the list. I'm wary of this veering into power user territory as well.

Additionally, what if the table of contents were made more prominent for users by placing it in the sidebar as opposed to being behind the ℹ️ button? I know it used to be in the Document tab, but this clearly had a problem in that once you clicked on a block in the list, it would select a block and show the block tab in the selector, hiding the previously-visible table of contents. The only idea that comes to mind for that is to show the table of contents in the sidebar outside of both the Document and Block tabs, since really it is a way to navigate both the document and its blocks. So perhaps it could be shown above the two tabs.

When selecting a block, the table of contents could highlight the item in the list for that block to show its relation to its parent and child blocks. This would facilitate navigation up and down the levels of nesting.

Another challenge is once a block has been selected to move a block to another parent; this doesn't seem to be currently even possible. As suggested in #5301, the table of contents could allow for dragging blocks in the list to change their position in the document (though this shouldn't preclude movement by another means, such as dragging a block inside the document to a new position).

[ZebulanStanphill]

Oxygen has something like this:
https://oxygenbuilder.com/documentation/visual-editing/editor-overview/

I think this would be a great feature, though I think perhaps it would warrant turning the Document Outline into a sidebar plugin (like what Yoast has in its recent 8.0 update), rather than a pop-up.

Speaking of which, there has been some discussion of making the Document Outline use the plugin API, though it has been under the idea that it would continue to look like it does now. See #4287. I think if it were to show all blocks rather than just headings, it should start being a full sidebar and not just a pop-up.

Perhaps the sidebar could have 2 collapsable sections: one that shows a document outline like what it has now, and one that lists every block in the post and its hierarchy and lets you drag-and-drop blocks from that UI.

[ZebulanStanphill]

Elementor is also getting something like this called Navigator:
elementor/elementor#5493

[jasmussen]

@westonruter I have been thinking about how to improve the way to navigate nested blocks, and I have some ideas that I'm still refining that have the potential to improve it overall for the user, and will share as soon as those ideas are fully baked.

However even with those improvements in place, the challenges you outline require additional ways to select blocks. Imagine you had a block that featured parallax layers, or perhaps simply a slideshow block with a number of the slides being out of visible view — you might still want to be able to configure those at the block level.

As such, here's a suggestion for a sidebar panel. It would:

• Be visible for any block that features child blocks
• Sit in the "block" tab for that block
• Possibly be collapsed by default because it's rather advanced
• Show every block that's inside the selected parent block

[chrisvanpatten]

There are also some explorations over in #6459!

[ZebulanStanphill]

@jasmussen I really like that mockup! I think a full-document structure view would still be nice to have in addition to this, though. (Probably implemented as a sidebar plugin.)

[westonruter]

@jasmussen awesome.

As such, here's a suggestion for a sidebar panel.

If you click on a block inside Cover Image, would it cause that nested block to be selected? Would it then change the Block in the sidebar? Would that have the negative effect of losing the context of the expanded contents box? Or would that box somehow persist across selected blocks?

As for how to handle the selection of blocks that are layered on top of each other, @jwold has a promising design at least for the use case of the AMP Story format. The idea there is to expose layers as persistent icons alongside the right side of the parent block to make them easily selectable regardless of which block is currently selected. I believe he'll be shortly putting those designs up on ampproject/amp-wp#968.

[jasmussen]

If you click on a block inside Cover Image, would it cause that nested block to be selected? Would it then change the Block in the sidebar? Would that have the negative effect of losing the context of the expanded contents box? Or would that box somehow persist across selected blocks?

Solid question. @mtias any thoughts here? The obvious path seems to be to try and persist the open contents box.

Regarding layered blocks — are those not nested blocks? Do they use a separate API? In any case, very curious to see the mockups!

[jwold]

@jasmussen I've uploaded screenshots of the work we did to the issue. :)

[westonruter]

Regarding layered blocks — are those not nested blocks? Do they use a separate API? In any case, very curious to see the mockups!

Yes, they are nested blocks. The nesting structure looks like this:

There can by any number of sibling amp-story-grid-layer elements/blocks and they are layered. So in @jwold's mocks, each of the layers has a persistent icon button appearing to the right of the containing amp-story-page block allowing them to be selected at any time, regardless of which block is currently selected.

[jasmussen]

Thanks for the clarification, very cool. I responded in ampproject/amp-wp#968 (comment), but the key I'm looking for here is to see if we can somehow canonize the way to select layers/child blocks so that we can use this for all blocks that have child blocks, or at least create a generic interface for it that blocks can opt-in to perhaps.

[westonruter]

Agreed. There needs to be a generic solution for nested blocks rather than the tailored solution for AMP Stories.

[ktmn]

When a nested block is active there could be a button somewhere to switch to it's parent block. Maybe on the toolbar with the block appender, undo, redo and content structure buttons.

It doesn't have to be the final design, but a simple button would help out so much right now. It's so annoying hovering around all over the place trying to find the parent block.

[jasmussen]

@ktmn yep, that's essentially part of #9053 (comment), notice the small breadcrumb up there.

I'm still refining some mockups and have a few ideas, but I promise I'll share more mockups as soon as I can.

[jasmussen]

Many of the ideas discussed in this ticket, and referred to for block navigation, are finally unstuck via an idea from @alexislloyd and being discussed also in #9628 (comment). Please have a look and share your thoughts.

[jasmussen]

Given the block traversal tool more or less addresses the initial suggestion here, should we close this ticket?

Alternately, I feel it is important that we reduce the number of actions up there, and merge the Document Outline button and the Block Traversal buttons into a single button that does both. Should we rename/rejigger this ticket to be about that?

[ZebulanStanphill]

@jasmussen I don't really think the 2 belong in the same modal/pop-up anymore. Also, if one or both the Document Outline and Block Navigation were sidebar plugins that could be pinned and unpinned, there would not be as much of a need to combine them, and both could be hidden if desired to save space in the toolbar. (I would imagine that a lot of people would rarely use the Document Outline in particular.)

[karmatosed]

@jasmussen I think reconfiguring this ticket works.

[mapk]

I think this has been resolved with the more obvious and clickable Block Navigation. I'm closing this in light of that feature. If I'm missing something, please let me know.