Focus mode for content types needs means to immediately "go back" to full site editing view

[getdave]

Some content types have a "focus mode" which allows you to edit just the content related to that content type. Examples of this include Template Parts and Navigation Menus.

However, once you enter this mode and the left hand site "Site View" sidebar is collapsed it is very difficult to know how you can get back to the Site Editor view for the entire site.

Reproduction Steps

A good example of this is when you edit a template part from the Site Editor.

• Click "Header" template part
• Click "Edit" in block toolbar
• Land in "Focus Mode" for the Header template part.
• There is no obvious route back to the full Site view.
• Click the "W" icon to open the left hand "Site View" sidebar
• Notice that you now have to click the "<" (back) arrow several times to get back to the full site editing view

Suggested Solution

There needs to be a "Back to Site Editor" option which immediately takes you back to the Site Editor for the entire site (or at least immediately back to where you were before you entered focus mode).

Screenshots

Screen.Capture.on.2023-11-15.at.15-31-34.mp4

Screen.Capture.on.2023-11-15.at.15-32-19.mp4

[annezazu]

We had a hallway hangout this week to chat about using focus mode + list view in place of the navigation mode and this issue came up when thinking about adding focus mode to more container blocks #45264. Here's the part of the call where we talked about this:

back.button.out.of.focus.mode.mp4

Specifically, the back button currently just drops you without focus back into the Site Editor and the ideal would be that it returned you to a state of focus on the edit button once more where you started.

[tellthemachines]

The back button that's shown in that hallway hangout video isn't showing for all templates. I think that's what this issue is about? For example, when clicking through to edit Header from the home template in TT4, there's no back button in the focused editor.
I'm not sure at what point the regression happened; it seems to work fine in WP 6.4 but not in the latest Gutenberg. It would be great to bring it back (and also to solve the focus situation on clicking the back button!)

[ramonjd]

The back button that's shown in that hallway hangout video isn't showing for all templates.

The way the BackButton component works is that it's looking for for a fromTemplateId in location.state, otherwise it won't render.

The fromTemplateId is meant to indicate that a user has drilled-down from a template. It's set in a hook that renders the "Edit" button in the toolbar, e.g., https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-site/src/hooks/navigation-menu-edit.js#L46

fromTemplateId doesn't exist when navigating from the "Manage all..." pages, or when landing on a template part/navigation post type in editing mode. The button, therefore, won't show.

Edit: I put up a semi-related PR in #56741, though it may not 100% fix this issue, addresses the situation where a user edits an in-place template area where postId doesn't exist in the URL params.

[getdave]

In #55657 I am using the "Back" button in the top toolbar rather than this "in canvas" version.

Why? Because I spoke with @jasmussen and he advised that this should become the default back button UI.

[jasmussen]

Yes, it seems a better place for it, compared to the canvas where the breadcrumbs-like behavior isn't surfaced.

[ramonjd]

Oh great. I'm happy to cull #56741 if the existing Back button is going to be purged in favour of the header navigation bar there, which I think is a good idea :D

[tellthemachines]

Oh so is the plan to add the Back button to that top-center toolbar in all views? That would be great in terms of the button being easier to find 😄

[richtabor]

Oh so is the plan to add the Back button to that top-center toolbar in all views? That would be great in terms of the button being easier to find 😄

That's nice, though it does not tend to the actual issue reported:

When you are in a focus view, the <- Back should always take you back to the view that the focus view was invoked from. Currently it acts as a "Back" action, which if not immediately invoked will not take you back to the initial view.

It's particularly rough when you start from a refresh, as you can't ever get back.

nav.mp4

[annezazu]

While testing #58528, I noticed that because I had top toolbar enabled, this was completely hidden unless I hid the block toolbar settings:

back.button.with.top.toolbar.mov

Something to consider as we improve this experience and change where the back button is shown! For those using the top toolbar, it's incredibly difficult to find a way to return. Happy to open a separate issue if folks prefer.

[davewhitley]

I have an example that I ran into which was very confusing for me. This does not seem related to the in-canvas back button.

Steps:

1. Click Templates
2. Edit a template
3. Click W site icon
4. Click on Header
5. Click back button (I'm lost because I'm not where I was before)
6. Click back button again (Still lost because I'm not where I was before)
7. Click Templates (to get back to where I was)

Kapture.2024-05-01.at.14.25.30.mp4