Proposal: Reduce complexity of editing template parts from pages

[richtabor]

It's particularly difficult to edit a site header from a page context, i.e. your "About" page.

The expectation is that you can edit the header, as it is composed of blocks and visible in the Site Editor. But in actuality, you have to first switch to the "template editing experience" to edit what is technically part of the template. This switch is harsh, as the content of your page is no longer visible, but rather the placeholders for title, content, featured image, etc.

It feels much too complex. I don't think we should be asking people to go in and out of content and templating editing—as that increases the contextual knowledge required to edit something as simple as the header or footer (and any associated contents, like your logo or navigation) of your site.

Proposal

Currently when editing pages, only the Post Content block and its contents are rendered within List View, all others are omitted. I think perhaps we're being too smart here, trying to simplify the page editing experience—but in doing so, we made it much less intuitive.

When editing pages, instead of hiding, or rather preventing access to, template parts (like header and footer) what if we brought them into the editing experience, but made it clear that you're editing something site-wide, vs the page's contents. Perhaps with a clear "Edit" to engage with the template part, and a scrim to induce focus on the editable blocks.

I realize we have isolated/focus views, which are useful in many contexts, like editing a header or pattern from the Site Editor patterns view, but I do think it's valuable to be able to edit a header within the context of a site—not solely via its own isolated view.

Visual

template-parts.mp4

Details

1. From a page in the Site Editor, I can select a template part — but not its contents.
2. Once I click "Edit", instead of going to an isolated/focused view of the template part, I have an "inline" focus view, where it's clear I am editing the template part. The first block in the template part is focused.
3. When I am editing a template part, the document title is updated to reflect I am editing the part.
4. If I click out of the template part (on the post content block/scrim for example), the template part is "closed" and I am now editing my content.

[SaxonF]

As a first pass we can just allow the top level selection of template parts from within pages. This shows the already existing toolbar which includes an "edit" action that takes a user to isolated editing mode.

We can follow this up with more contextual isolated editing (other blocks faded out) which may also apply to synced patterns.

The rest of the template blocks should behave as they currently do ie aren't selectable.

[jameskoster]

Very closely related to #43608. Personally I'd like to see this treatment applied in the template editing context as well.

[richtabor]

I'd like to see this treatment applied in the template editing context as well.

Yes, I think so too. Just was focusing on it from the page perspective, as within template editing there's not an artificial barrier between the template and template part.

[noisysocks]

As a first pass we can just allow the top level selection of template parts from within pages. This shows the already existing toolbar which includes an "edit" action that takes a user to isolated editing mode.

Took a stab at this in #60010. Let me know what you think.

[annezazu]

In testing #60010, I'm confused about how this reduces confusion between editing a template vs a page. While it might make it easier to make quick changes to header/footer, it also surfaces confusion in being dropped into the focus mode and why other parts aren't editable. It now feels like there are three experiences in a page: editing content, editing what feels like an unpredictable part of the template, and an isolated view to editor header/footer (without clarity or warning that you are now editing something across your site).

[richtabor]

I'm confused about how this reduces confusion between editing a template vs a page.

I think we're too focused on separating template and content, rather than making it more intuitive to edit one or the other.

In trunk it's much too difficult to edit your site header and footer, from any page on a site. You switch to template editing (typically via the snack bar that tells you that editing is not allowed as-is) and see your content replaced by placeholders, reducing confidence and adding so much cognitive weight.

That difficultly is unexpected; you should be able to edit your header and footer easily. Communicating those changes are global is a different, closely related issue.

[richtabor]

it also surfaces confusion in being dropped into the focus mode

The idea behind focus mode is that it helps communicate that you're editing something that lives elsewhere (like a header on any page).

I still think it's worth exploring this "inline focus mode" where it's more clear that you're editing something apart from content, but with the context of the page you're editing still available.

[wpmark]

Currently when editing pages, only the Post Content block and its contents are rendered within List View, all others are omitted. I think perhaps we're being too smart here, trying to simplify the page editing experience—but in doing so, we made it much less intuitive

I think this is what we should keep. When editing pages users are focused on editing the content of those pages and shouldn't have other confusing things to edit at the same time.

I think being able to edit and header/footer whilst inside editing a page is more confusing personally.

The idea behind focus mode is that it helps communicate that you're editing something that lives elsewhere

I personally don't believe this does that.

[mikemcalister]

I like this approach over the dedicated template edit view, which is confusing and contextually disconnected from the page.

I'm imagining myself as a new user to all of this. I'm editing my About page, but notice the header color is slightly off so I click up there and change it. That transition should be as seamless as possible, without a context switch. Finally, I can easily go back to editing my page.

Then, when I go to save the page, that change gets saved along with my other changes, similarly how we do in other flows.

This should be anti-climactic for the user, something they barely have to think about.

[richtabor]

I'm imagining myself as a new user to all of this. I'm editing my About page, but notice the header color is slightly off so I click up there and change it. That transition should be as seamless as possible, without a context switch. Finally, I can easily go back to editing my page.

This is on point. Or if you want to add another menu item, rearrange them. Switching to a template editing view to do these things feels like far too much friction. @mikemcalister have you given #60010 a run, as a first pass?

[bacoords]

I'm imagining myself as a new user to all of this. I'm editing my About page, but notice the header color is slightly off so I click up there and change it. That transition should be as seamless as possible, without a context switch. Finally, I can easily go back to editing my page.

I'm not sure I fully agree with this - there should be a context switch- editing a global vs editing a singular piece of content should be much more called out.

I understand that dropping into the singular template mode is not ideal (root padding anyone?), but the user should be aware of the implications of what they're doing. Overall a fan of #60010 based on some very limited testing

[SaxonF]

There should still be a level of friction between local and global elements. All global elements (template, synced patterns, parts) require an edit action and a context shift (whether that's isolated or fading out surrounding context). I don't think we should change this.

Conceptually since the template part is part of the template it would make sense to first enter the template to edit, however in practice we know there is confusion surrounding the editing of site navigation. Since the template part still requires an edit action I feel in this case it's ok to diverge from the template editing model and just skip that step. We are still alerting people that it's a global element, though I'd like to see us do more there, like mentioning how many times it's being used .

[mikemcalister]

I know it’s just a turn of phrase, but I can’t help but recoil a bit when I read about consciously adding friction to an experience that users are telling us is fraught with friction. 😅 Anyway, I digress.

One thing I will say, from a designer perspective and someone who has designed many patterns and sites in the site editor, I can’t stand when my design flow is interrupted. Being dropped into the template edit view where I can’t see the rest of my page is a non-starter. Designers and builders consider all of the elements of their site when creating unique, expressive, and cohesive designs. I want to see my site when editing my header or footer.

Even dimming the rest of the content in a “focused” view feels like a bit of a burden since you’re obfuscating my design canvas and it's not immediately obvious why. However, I could live with this iteration since it does seem like the least obtrusive given the current flow.

Something I keep coming back to — are we leaning on these UI tricks as a replacement to proper education on the local/global paradigm?

Could we be doing more with inline education in the form of strategically placed instances of the guide component that teach these features more thoroughly? This new site building experience needs to be learned, users are not just intuitively picking it up, even with seemingly clever UI hinting.

[SaxonF]

We can definitely do more education, but unlike professional orientated tools like Webflow, Figma, Framer, we also have to cater to non technical folks, and from previous feedback I don't think any level of education is going to prevent people from adding local content to a global context, especially when it comes to templates. Even the idea of a template is a tricky concept to grasp, let alone when you introduce the template hierarchy and templates like front-page/home.

Designers and builders consider all of the elements of their site when creating unique, expressive, and cohesive designs. I want to see my site when editing my header or footer.

This is exactly why pages was introduced in the site editor. I can't go back to using the post editor because I much prefer to see the surrounding template.

Personally, I also prefer the Framer or Webflow way of working where templates aren't a thing and you just lean on singular global "components". You can kind of reproduce this by creating blank templates with just post content block, which would align with your way of working @mikemcalister . The downside is obviously you have to recreate the structure of a page each time.

Until we treat templates in a simpler way, I do think we need extra guardrails in place. This issue and the corresponding PR at least finds a better balance.

[SaxonF]

I'll give a basic example. You have a template that wraps post content block in a group block. Educating a user on why a parent group block is global, but not certain elements within, would be very tricky.

Would welcome any ideas here though!

[annezazu]

Since the template part still requires an edit action I feel in this case it's ok to diverge from the template editing model and just skip that step. We are still alerting people that it's a global element, though I'd like to see us do more there, like mentioning how many times it's being used.

Agreed ^. Without some messaging there, I worry folks will make changes without fully realizing the possible consequences with our current mental models.

[jameskoster]

like mentioning how many times it's being used

This part feels important. #58990