Site Editing: It is not clear at-a-glance whether one is editing a template or an item of content

[jameskoster]

Once it is possible to view the template whilst editing a post or page (#27847), it will no longer be easy to tell at a glance what is being edited – the content or the template. Consider the screenshot below:

On the left I am editing my “Hello World” post (while viewing template), on the right I am editing my “Post” template directly. You need an eagle-eye to identify which instance is which, so we should investigate some additional visual cues in the UI to make this distinction more obvious.

[jameskoster]

One option here would be to use different color treatments on landmark UI elements to help indicate which context you are in. For example, we might invert the top bar and toolbars when template editing:

In addition to this, some simple animation that occurs as one transitions between editing content and template might help as well:

[ridesirat]

That seems great.
Since it's such a relevant meter in case of accident, and to distinguish a bit with the dashboard color, I would be a bit boulder and add to the top maybe a thin, fixed darker red bar. Or just the name of the template on the top right in red, bigger and verticallyy aligned with the "Template/Post" tab. And maybe with a "?" symbol with the hover:warning "Changes made here affect all posts and pages that use the template.
And would change the Save button to red too.

[jameskoster]

Or just the name of the template on the top right

Oops, for some reason the template name is missing in the gif above. Here's an updated version:

I'm a little hesitant to add red to the UI since that is generally used for destructive actions like deletion. Instead I think some kind of welcome guide the first time a user encounters the template editor, and explains the concepts therein might work better. We don't have an issue for that yet, but it is mentioned in #27814. Here's a very rough example of how that might work:

[ridesirat]

I understand. But this kind of falls under destruction level :)
Using the opposite colors is great but it's "comfortable", we may forget were we are. A different "reminder" could be useful.
Instead of red, maybe the official "Theme color of the year"..? With T21, a pastel..? It could be voted, or coming from the theme designers?

A welcome message is always good but I tend to skip them and they tend to be annoying, specially if you work on multiple projects (an option to opt out - until opposite notice?)

This is just a quick printscreen draft with some mixed (or not) solutions for comparison, to see if something feels good..

[jameskoster]

But this kind of falls under destruction level :)

Could you elaborate on your thoughts there? I don't see anything destructive here, it is still editing, just editing a different thing :)

we may forget were we are

The idea here is that the inverted top bar is enough to remind you that you are editing a template rather than content. To clarify – when you're editing content (posts/pages) the top bar is white, and when you're editing a template it is black. If one misses such a dramatic change, I'm not sure that changing the button color is going to make much difference :D

In your mockup I noticed you have the template name twice, what is the thinking there?

I also noticed that you added a back button, I like the idea of offering users a shortcut back to the thing they were editing a lot :)

[ridesirat]

I don't see anything destructive here

It was just to alert a more distracted user to a change in all posts (red is also for that - like the updates alert).
But I think the alternating model (white/black) works quite well - I understood your example, it was very clear :)

In your mockup I noticed you have the template name twice, what is the thinking there?

I imagined it could be easier to distinguish between a lot of templates, CPTs, Pages, etc. And if you have a "centralized" working area/workflow for templates.

[paaljoachim]

I would first start out in a subtile way. No animation or changing color from white to black.

We can give many hints that one is going from a post to a template.

For instance the Post - Block tabs at the top of the settings sidebar area.
For template:
Change Post to Template.
#27470

Top bar title.
post: -name of title-
page: -name of title-
#27093

That is atleast a nice and soft start. Taking it one step at a time..:)

[jameskoster]

As I mentioned here, I'm not sure this is a part of the UX to exercise subtlety. If the change is not bold, then the issue described in the OP is not fully addressed. It's important the user understands that templates are totally separate from content, and consequently when they are editing one or the other.

That said, animation and color are just two ways we might communicate this shift in context. We should use this issue to explore other options for sure!

EDIT: Including this quote from the FSE Outreach Program summary. On "Distinction between editing modes (template vs page/post)":

I believe it was not clear enough how those changes could impact the site. If you don’t already know how templates, template parts, and global blocks like Site Title work, you might not understand how your editing will affect the rest of the site.

[paaljoachim]

I believe users will just open a page and just want to edit all of it. Having a clear way to show the user which section they are editing will help.

An example.
Case 1.
I open a page.
Click around and notice that I click into the Site Title, because it says so in the sidebar settings area. The only place I can "easily" see that I am inside a template is looking at the bottom Breadcrumbs.

It would be helpful to add a clarity to the template area one is editing. (I know this has been brought up in other issues earlier, but I do find this method helpful. As it gives a clear definition for the user what this specific area is and where it is located.)
Case 2.
I open a page.
Click into a block which I notice is the Site Title. In addition I can easily see that the Site Title is inside a Template Part: Header. I also notice the boundry of the header area.

Clicking into any block inside the header would then show the boundry of the Header and the blocks it contains.
It would create a clear difference between clicking into a template vs clicking the page/post content.
One would easily see where the header begins and ends.

If we take this for instance to a sidebar it would be even more helpful to have a boundry where the sidebar is located in relation to the page/post content.