Clicking Edit Template brings one into a different kind of focused view

[paaljoachim]

Description

Testing WordPress 6.5 alpha latest nightly version.

Clicking Edit Template shows another kind of focused view. One I do not understand why I see the grey area. One I am not certain how to exit out of. I find it confusing as it adds something I do not understand. I can not resize similar to regular focused view. I just want it to use the regular view I am used to not suddenly use something else. Having the grey border around the content creates confusion and does not add to the template editing experience.

Step-by-step reproduction instructions

In the Site Editor i clicked the first page that showed up. In my setup that was a Front page. I clicked Edit Template and it then went into a kind of focused view.

Screenshots, screen recording, code snippet

What is this?

Environment info

The newest nightly alpha of WordPress 6.5. Using the WordPress beta tester plugin. Gutenberg plugin is deactivated.

Please confirm that you have searched existing issues in the repo.

No

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[bph]

The Snackbar notice "Edit your template to edit this block, with the link to Edit template" only appears when you click on a section (here the header on the page), that is actually controlled by a template or a template part. If you didn't mean to edit the header, you can ignore the invitation. If you want to edit the header, it then offers you the template in focus mode.

There are also subtle clues in the header middle when the page editing screen, switches over to the template editing mode and the color changes from black to purple and the title of the page changes to "Page Template." The later version of that top middle section has a back link to get back to the page content editing screen.

It's an attempt to make the distinction between editing content on a page and editing sections in a template easier, more obvious. I guess, we are not there yet :-)

Here is did a run through the screens with the Sample page, it might be easier to see, if it's not a more complex idea of the front page.

https://github.com/WordPress/gutenberg/assets/39980/5958fabd-e8f2-484a-8221-b5ef24910bb7

Once you are in the Template focus mode you can click in the navigation again and change this part of the template. Knowing all this, how do you think can it be made clearer to you?

[paaljoachim]

I clicked the Header -> Edit Template to see what it looked like. (Let's say that I wanted to edit the Header.)

I do not see a back button:

"It's an attempt to make the distinction between editing content on a page and editing sections in a template easier, more obvious" ---> It just makes it confusing. As I have no idea why I see one with a border and one without. It is not at all associated with editing a page or template. I use text as a visual clue to see where I am. Using a border does not help. I look at the border and wonder if there is an additional feature to the reasoning behind the border. If it is just pretty to signal you have entered template editing. Well that does not at all help.

The video is not working for me.

"Once you are in the Template focus mode you can click in the navigation again and change this part of the template. Knowing all this, how do you think can it be made clearer to you?"

---> Click navigation again? I am not any less confused. Perhaps it helps watching the video you added.

[bph]

Try it the video again. It should work. Might need to give it a few more seconds time...

[paaljoachim]

Hey Birgit. Thanks. I saw the video and it did not make it any more clear for me. I still do not see the purpose in having the grey border around the content. As I do not see the connection it has with template editing.

[bph]

In page content view - you can see the navigation in the header, but when you want to edit it you need to switch over to template editor, by following the "Edit template" link. As a visual clue that you are in a different space, the window gets a gray border around, the text in the gray box on the top changes color from black to purple and there is a back link to the page content editor.

Once you are in the template view you need to click on the section you want to change, again, as you are now at the right place, so another click in the navigation block allows you to edit it now.

[annezazu]

cc @SaxonF as the grey border afaik is part of https://github.com/WordPress/gutenberg/issues/55025 based on this recent PR https://github.com/WordPress/gutenberg/pull/58528

[talldan]

Relabelling as this seems more like feedback than a bug. AFAIK, it works as intended.

[bph]

I do not see the connection it has with template editing. @paaljoachim Please test it again with WordPress 6.5 Beta 1.

[paaljoachim]

I have installed Beta 1. It looks similar to what I have already seen. I still do not see the purpose of the grey border area.

I still do not see a back button next to the Pages template title. I have to use the browser back button to go back to the Page. (Not template)

When I see the grey broder area around the canvas it makes me think that I am able to select the background behind the full page. That I should be able to click the grey border area to either deselect anything I had selected or select the background behind the canvas.

The grey creates a difference between the page vs template. But I at the same time want it to have a purpose in not only that it is decorative meant to work on creating a more distinction between page vs template.

Brain storming. Today in page view as one clicks a template a snackbar shows up asking if one wants to go to edit the template. In template view. Clicking the Content block in template view it shows up as locked. What about adding a snackbar here asking if one wants to edit the content of a single post or page? Similar to clicking the header to get the snackbar to edit the template.