Advancing the Select Tool

[richtabor]

As part of thinking about flows that leverage improvements to contentOnly editing and zoomed out views and how they can help improve section-level editing, there emerges an opportunity to look at the Select and Edit tools that already exist in the block editor.

Here's the current select tool:

The main problem to solve is the complexity of editing blocks, when every block has its own tools, options, and nesting depths. It's this same motivation, differentiating levels of granularity, that is driving much of the work on zooming and contentOnly.

It also resonates with the original goal of select mode: the ability to navigate to block number 10 in 10 tab-stops, skipping all block complexity and nesting that may be present.

Editor-wide content only editing

With the select tool enabled, all sections would be edited as if they had the contentOnly attribute applied. This keeps with the existing select tool behavior, but flattens the hierarchy for nested blocks.

Use the reduced contentOnly toolbar for Select mode

Currently with the Select tool chosen, a minimal toolbar is rendered. Instead, have the contentOnly toolbar available. The expectation here is that when you select a block, you also see its reduced contentOnly toolbar controls:

Do not auto-disengage Select mode

At the moment, with the Select tool enabled, selecting a block with contentOnly applied requires you to click it twice to exit the Select tool, and enter Edit mode, in order to be able to edit. The expectation here would be that "Select" mode does not auto-disengage; that I have to manually turn it off in the editor header.

More intuitive editing and designing

The main goal of these initiatives would be to allow high level styling and section manipulation with the select tool, while having lower granularity for the most common tasks of building out a page using patterns. Perhaps the tool expresses those avenues, editing and designing:

Tasks

• Update write/design tools panel items  #65663
• Persist edit and design modes #65572

[ndiego]

I like this approach for designing/modifying page and template layouts. However, if I wanted to write a blog post that consists mainly of individual blocks (no patterns), it seems like I would need to be in "Design" mode. That feels a bit unintuitive. Perhaps this is just a question of naming and helper text.

As an aside, I literally never use the current Select tool, so I welcome any improvement that makes that mode more capable.

[getdave]

if I wanted to write a blog post that consists mainly of individual blocks (no patterns), it seems like I would need to be in "Design" mode.

I'm curious. Why don't you think you would use "Edit - Focus on content" for writing a blog post with individual blocks (no sections)? Is it because "Edit" mode would limit your ability to insert new blocks to your post? Perhaps instead we should allow new blocks to be inserted but those blocks would display limited controls (i.e. blockEditingMode: contentOnly).

I suppose this could get complicated if you want to add "layout" type blocks to your blog post such as Columns. But how often does that happen?

I'd like to understand more about how we could make the Edit mode flexible enough for folks to write blog posts, whilst still keeping things simple and avoiding the overwhelm of Design mode (e.g. of lots of options and container/layout blocks as we see today in the editor).

I also wonder whether we should keep in mind that Edit would be separate from the efforts around Zoom Out has have a greater focus on manipulating top level "sections" of the page.

[mtias]

@ndiego perhaps the Write / Design is more of a distinction based on whether template-visible is on or off for any given context and post type. Pages are a good example where both cases can be true—sometimes the editing experience would be "writing" and abstracted away (no template visible) and other times it's page building (template visible).

That makes me think of the following configurations, regardless of how we name them:

• Template visible
  • Content — only edit text and images
  • Design — edit everything
• Abstracted view
  • Write — the canonical post editor experience of pure writing

[hanneslsm]

I feel like this issue is somehow also connected to the Views and we should consider those already: Distraction free, Spotlight, (Fullscreen).
Distraction free for example implies that the user switches to Write Mode.

I could even see the Code editor in the tools selection.

[ntsekouras]

Is something more missing from this issue or we can close it?

[mtias]

@hanneslsm distraction free can also be used in design mode, we did a few demos of it and it can be a nice experience.

@ntsekouras we still have the dark toolbar pending, but it's also tracked here #66054.