Create contents panel for selecting hidden "layers"

[jasmussen]

This suggestion is related to efforts in #9628, is inspired by thoughts in #9628 (comment) as well as #9053 (comment). It essentially extracts those mockups from being buried in just comments, to having their own issue we can triage separately. As such, the mockups are therefore also somewhat obsolete, but hopefully the point should get across.

Regardless of any improvements we make to selecting parent blocks as part of #9628 (and both #14961 and #15537 seem promising), there will be situations when a block has innerblocks that are either invisible or otherwise impossible to select using a mouse. Examples:

• Slideshow block with off-screen slides
• Blocks with decorative overlay layers

For those situations, we could hope they were designed with simplicity in mind so the good defaults do not necessitate you having to select those layers to get basic operation done. However for advanced configuration, we should still offer a basic way to select those layers. This could be a panel in the sidebar:

This would show a layer view/tree-view of the contents of the block ancestor, regardless of which child was selected. To do this, it changes the Document/Block tabs to become a breadcrumb tree. This allows nesting containers to show their contents in a panel below. Additionally, the breadcrumbs can wrap for long block names or other translations, and finally it would scale to be able to include block areas in the future.

Thoughts?

[kjellr]

I do think this sort of thing could be helpful, but I also feel like the sidebar is a little crowded for this sort of interface. I'll think it over a bit more.

Also: this is only partially related, but thinking about this makes me kind of wish for a "quick switcher" for block navigation — hit command-k (or some other shortcut... that's just inspired by the one I'm used to with slack), then use the arrow keys to go up/down and select the block you want to edit:

I guess you can sort of do that with the Block Navigation popover today, but I can't get the keyboard shortcut to work on my machine, and it also doesn't show the interior of nested blocks unless the nested block is selected (and when it does that, it doesn't show the rest of the document tree. 🤔).

[jasmussen]

That is a solid and well-formed thought, Kjell. Very well made point. Something to think about for sure!

[SchneiderSam]

Great thing.

Very complex pages are best edited with the Navigator anyway. Too bad that there is no drag and drop yet. Is this still planned?

[jasmussen]

Very complex pages are best edited with the Navigator anyway. Too bad that there is no drag and drop yet. Is this still planned?

Can you elaborate what kind of drag and drop you're thinking of here?

As a meta-answer: drag and drop are fine interactions to think about, so long as they are made as enhancements on top of explicit buttons or actions that are both mouse and keyboard accessible. Or to frame it differently, drag and drop can never be the only way to accomplish an action, it has to be an additional method.

[SchneiderSam]

@jasmussen So first of all thank you for your interest :-)

Background:

Ok, let's assume we want to insert the last block of the content from https://wordpress.org/gutenberg/ into a column:

Then these would be the work steps:

Conclusion:
I have to be very careful with the mouse. This is quite difficult to move this block to a position far away. Especially if you're talking about very complex blocks: Paragraph in a column and this one is in a group.

How could that be simplified?

Idea:
It should be possible to move the elements in the navigator.

Example:
Elementor does that quite well:

Isn't that cool? I need a fraction of the time to do the same thing...

And the amazing thing is: you can move whole sections/group with their contents. This is currently difficult to do with GP or I as an end user just don't understand how to do it better :-)

[jasmussen]

Isn't that cool? I need a fraction of the time to do the same thing...

That is sort of cool, yes. I would suggest you use the up/down arrow movers for now.

Yes, drag and drop could be added there, provided we had some keyboard means to do so first — but that could be trivial, it could be up/down arrows on the right side of each element.

[SchneiderSam]

Thanks!

I would suggest you use the up/down arrow movers for now.

But that can only be done suboptimally. If I want to insert a block into a column, it gets a bit more complicated...

Sorry for the criticism, I just want the GBerg to get better :-)

[jasmussen]

Without criticism, especially productive like yours, many crucial details will likely go unpolished for longer. So please keep it coming!

I do agree, you've made a compelling case.

[mapk]

The initial suggestion for this issue was to allow an easier way to select blocks. I think we've resolved much of this with the new breadcrumbs design. This leads me to believe that we can close this issue. What do you think, @jasmussen ?

BUT, I also want to note that the whole drag and drop aspect of the Block Navigator sounds very compelling! I wonder, @SchneiderSam, if you can bring this to its own issue for more focused discussion?

[SchneiderSam]

BUT, I also want to note that the whole drag and drop aspect of the Block Navigator sounds very compelling! I wonder, @SchneiderSam, if you can bring this to its own issue for more focused discussion?

#19357 so good?

[jasmussen]

Apologies for missing this ping. Yes I think this ticket can be closed, because strides have been made and continue to be made. We can always revisit if need be.