Discussion: consolidating various navigation modes in favor of List View + Focus Mode

[annezazu]

A larger discussion was had in the Hallway Hangout on improving accessibility in the Site Editor that I wanted to bring into GitHub to continue talking through. At the simplest, the core takeaway was how we could consider the combination of using List View and evolving Focus Mode on more container blocks in #45264 could perhaps allow for consolidating and deprecating other tools, like navigation and edit mode first introduced in Gutenberg 6.3.

@alexstine doesn’t like the different modes and finds List View is easier to work with partially because you don’t know where to navigate around in the canvas otherwise with the keyboard. It’s very unpredictable what direction you will be traveling based on what you select. Right now, we’re in a situation where we have too many ways to move around: arrow keys in the canvas, have an edit mode, have a navigation mode, have list view. Can we consolidate? @afercia added context that edit and navigation mode were done when there were no inner blocks. It was a way to simplify navigation between blocks but the structure of the blocks was way simpler. This led to a broader discussion around showing List View for individual blocks, similar to what’s been done with the Navigation block, where you can only see the “tree” of that specific block with the inner blocks. @joen jumped in to talk about design explorations on exactly that where you can use a “focus mode” to zoom in on just that part of the page and have List View for just that part of the system.

What can be done today to take us in that direction? What risks are there? What improvements might be needed to List View to make it more useful from an accessibility point of view? Let's discuss here! I'd also like to hold a future hallway hangout on the topic as more of a working session to see what progress can be made.

@WordPress/gutenberg-design @alexstine @afercia @joedolson

[jasmussen]

From the design side, I'm happy to work with what best practices get recommended here.

Select mode as it exists does bring with it some benefits on mobile, where nested blocks are selected child-first, making it easier to tap to select the right layer. On the desktop breakpoint there's also a userflow for deleting blocks (press Esc to enter select mode and select a block, then press Delete, and it's gone), which feels valid. But it seems like it should be possible to merge the modes into one, and ideally retain the best of both worlds. Almost certainly a difficult task that requires careful thought, but happy to support it.

[annezazu]

Noting this issue as related to focus mode: #56150

[annezazu]

Proposing a Gutenberg Experiment

Last week, a group of us joined a dedicated hallway hangout to this topic. The full notes and video can be found here. As a next step from this conversation, I'd like to pitch deprecating navigation mode in favor of List View and Focus Mode as a Gutenberg Experiment with a subsequent call for testing. Right now, the mode no longer serves the role it was intended, is prominently positioned in the experience, and results in multiple ways to try to do the same thing. To accomplish this and move forward, a few things are needed:

• Resolving how the "back" button works: Focus mode for content types needs means to immediately "go back" to full site editing view #56150
• Opening up focus mode for any container block: Focus mode: Allow on any container block from the ellipsis menu #45264

If the latter item is a blocker, we could also try just using List View as an experiment. The main concerns that came up in doing this is around how many folks might be using this mode (particularly non screen reader users) and the impact on Gutenberg as a framework if this is fully deprecated since navigation mode is built into it as a package. We need to consider this in removing the navigation mode and it might be that it remains for third party usage cc @youknowriad as a heads up. Of note, I tried to get data from Automattic (my employer) around the navigation mode usage but it isn't tracked.

In terms of timeline, I'd love to try this experiment and call for testing before WordPress 6.5 to see what the impact might be.

@WordPress/gutenberg-design any blockers to this? @mtias I'd love your thoughts here.

[annezazu]

Looping back on this after digging in a bit more and wanted to share context as to why this hasn't moved forward with 6.5 beta 1 out the door. Right now, edit/select mode serves a role, specifically within the zoomed out view where the focus jumps to patterns rather than individual blocks using this mode. There's big potential there when combined with the power of patterns and also a lot of current bugs. Deprecating is complex both from this future work angle and when thinking about Gutenberg as a framework, mentioned above. Either way, for now, until we figure out a better way to do drag and drop in canvas and the zoomed out view, select mode still serves a broader role in the project.

Stay tuned with Zoomed Out view work and let's revisit this in the future.