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).