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.

[paaljoachim]

EDIT:
I removed the contents of this comment and added it to this issue instead.
#27899 (comment)

[jameskoster]

It would be helpful to add a clarity to the template area one is editing

We've added an outline to template parts when innerblocks are being edited already :)

Further exploration around how to indicate when one is editing template vs content, and how to move between views, can be seen in this issue/comment.

[overclokk]

I would do the simplest thing:
If I'm editing the template in FSE the post|page content is blocked with a placeholder
The placeholder may have a button for editing content

The flow I'm thinking inside FSE:

• I click on "modify content"
• alert "are you sure you you want to edit the content?"
• I click on "yes"
• Than it will open the content editor and hide the template editor

If I'm on post editor it will be viceversa.
(I have seen now in post editor there is a "Template Edit" option inside the right sidebar, and if I click on "edit" an allert is showed up (and it's ok) but maybe the "cancel" link should be placed in place of "edit" and not in the topbar)

I hope I have well explained the flow I have in mind.

[jameskoster]

@overclokk This sounds similar to something we're exploring for reusable blocks in #29337.

[overclokk]

@jameskoster I just saw but I was thinking to also lock the content inside the FSE, I don't want to accidentally modify the content or the title.

[paaljoachim]

I have been playing with the thought of having a lock icon in the toolbar for reusable blocks and for FSE template blocks.
At the moment it is just too easy to accidentally modify the content inside these kinds of blocks.

[jameskoster]

@paaljoachim I'm optimistic that the Overlay we were discussing in #29337 will serve as a pseudo-lock effect. An actual lock icon feels a little heavy handed, and may draw people to interact with it, which would actually add more friction that simply clicking through.

[paaljoachim]

Hey James @jameskoster
I agree. Having a click-through by first automatically clicking the parent before going to inner blocks will likely help with reusable blocks and FSE blocks. One would not as easy accidentally click an inner block. Because the initial click selects the parent.

[paaljoachim]

In the page content one sees a mention of Template then page (Edit).
The purpose here is to switch into Full Site Editing. Then to edit the Page Template.

Step 1: Click Edit to switch to Full Site Editing.
Step 2: Modify the Page template.

Currently the below screenshot merges the above two steps into one action.

In the below video I am focusing on step 1 to switch to Full Site Editing.
In Full Site Editing one will have a lot of options to play with such as editing the page template.

Here is an update to switching between Page content and Full Site Editing content.
Using an easier to understand language and a similar interface as currently exists for FSE. This makes it easy to jump between Page content <-> Full Site content.

Switch-Page-Full-Site.mp4

Figma protytype (can be scrolled)
https://www.figma.com/proto/De3yU46oeTResqpxkRPojb/FSE?node-id=1%3A6&scaling=min-zoom

@annezazu

[annezazu]

I dig this attempt! My only concern is that it's almost too smooth of a switch. I feel like there needs to be some good friction particularly when switching to edit the full site. Perhaps that's the idea of having a notice pop up once one does switch over.

[paaljoachim]

Perhaps something like this:

and

[jameskoster]

Thanks for sharing more ideas @paaljoachim!

Step 1: Click Edit to switch to Full Site Editing.
Step 2: Modify the Page template.

I'm not sure we need to distinguish the experience in these steps. Modifying a template (or template part for that matter which may occur while editing content) is full site editing. The notion of FSE being this discrete experience that people move in and out of is something I'm not convinced we should actively encourage. I still see WordPress itself as the Site Editor, and within it there are different views for editing content, templates, reusable blocks, block patterns, styles, and so on.

The key is to knit those features together in a way that feels seamless while still providing the necessary clarity as outlined in the OP. I fear that adding more steps only serves to fragment and harm the overall UX.

It may not be the final solution, but I happen to think there is something nice about the simple and explicit "Template: Page (edit)" implementation we currently have. It is crystal clear that from there I am able to go and edit the template applied to the content on the canvas.

---

All that said, I'd like to share another idea that @jasmussen and I discussed recently which riffs on my original suggestion of using color to differentiate between the views.

In recent design work around site editing concepts such as isolated template part editing and the template mosaic view this idea of exposing the surface behind the canvas has come up:

It's a simple but powerful idea that enables us to build on this concept of zooming in and out of different views, which is something that Matias has mentioned several times in the past. It could make sense to use this affordance to satisfy the issues outlined in the OP. Here's a rough demo that stitches those ideas all together:

site.editing.mp4

There is a lot still to be explored here, but I'd love to hear thoughts around this concept.

[jasmussen]

Very much agree with Jay here: full site editing is both post editing, and site editing, and this should be kept in mind when conveying the switch. A button in the sidebar was the smallest thing we could do, but it's not something we should optimize for long term: it doesn't scale to mobile, and it doesn't sufficiently convey the context shift. Any change to this switching interface should probably be designed to exist outside the sidebar entirely.

The idea that Jay is sharing, of literally zooming out when you go from post to template editing, I also believe is where we wil ultimately need to go. It alludes to "seeing the full picture", and the animated shift can help visually convey context even beyond "now you're editing the template", perhaps up to and including swapping out templates in a mosaic view, or even swapping out sections of a page in an exploded view.

Getting the whole flow right is going to be a very difficult endeavour, and the difficult part is figuring out which of these ingredients we can start to use today, without compromising the larger vision. Showing the gray frame around the content for the template editing context is likely going to play a part in that vision, but I can't figure out whether it's a good first step to take without changes also to the separate site editor item. But the benefit would be that it would provide a big visual shift, solving the crux of the issue.

[paaljoachim]

Hey James

I feel you are onto something with the zoom in <-> out of various parts when in Full Site Editing.
Going through the video.
1-Starts out with showing the full site for the post Hello World. (View)
2-Clicking Edit zooms out and shows a grey area around with a <- Back button. (Edit)
3-Here one can click example the Header and it changes into focus on the Header template part. (Edit)
4-Click into the content area it shows the Single post template. (I assume Edit)
5-Click back button zooms in to the Hello World (Single post template).( I assume View)
6-Click View all (Shows all page/post templates)

This is really interesting, James!

The above shows Full Site Editing view and edit.
What I miss is how would one switch over to directly editing Post content.
For instance would one click the content area (step 4) and then having an option in the content area toolbar to edit the post content? Having a zoom into the post content. With a back arrow to go back to Full Site view again.

[jameskoster]

What I miss is how would one switch over to directly editing Post content.

I think we could potentially use something similar to the click-through pattern we're currently exploring for Reusable Blocks (#29337):

back.to.content.mp4

Consequently this is another use case for block locking (#29864) – note how I am not able to move the post title block while editing the post itself.

[paaljoachim]

A gradual evolution of FSE and post/page content creation.
What I am suggesting here is a small evolution from what exists today: #27849 (comment)

What you are suggesting, James is a much bigger leap in evolution.
#27849 (comment)

Should we go with something I suggested just to improve the current method?
Then over time gradually move to what you are suggesting James?

If the purpose is to create a MVP to be made available in the beginning of April, then we need to make sure that we create small adjustments making it ready for folks to test out. Having a MVP ready in the beginning of April will make it possible for a huge amount of people to test and give feedback.

[jameskoster]

It's a bigger leap when you consider the isolated template part / mosaic views, and contextual block locking. But those are being handled in other issues and the dots will hopefully connect organically as we close them out.

I don't believe that introducing the "frame" around the template as you switch from content editing to template editing is all that much work. Especially if we leave out the animation initially. I just put this together in a couple of minutes in the browser inspector:

inspector.mp4

All that to say, it's probably worth getting input from a developer as this point, in particular around the transition between content <> template editing in this comment, including the "back" button that appears above the canvas. If it's not too much work, perhaps we can get a try PR together?

[paaljoachim]

What we can do is add the "Needs dev" label.

I also went ahead and removed the "Needs Design" and the "Needs Design Feedback" labels.

(It can of course be changed if there is a need to do so.)

[jameskoster]

Once #31330 and #31678 are merged perhaps we can close this out? There will then be three UI patterns indicating that one has entered the template editor:

1. The welcome guide
2. The dark frame that appears around the template
3. The template name clearly visible in the Top Bar

[jorgefilipecosta]

#31330 and #31678 are already merged? Can we close this issue or is there anything pending?

[jasmussen]

Let's close this one, good call. It's so easy to reopen if it was in error 👍 👍