Site Editor: As a newer user, it's difficult to understand the concept of templates and template parts in the navigation sidebar

[jeyip]

What

This is less of a specific feature request. I noticed general confusion about the concepts of WordPress block-templates, template resolution, and block-template-parts, especially related to expected behavior from the navigation sidebar. I know Matias mentioned in the past that the first iteration of full site editing was geared towards theme developers, so this friction may be expected, but it still seems important to keep track of for the dotcom side of FSE.

I wonder if a more in-depth, introductory tour or friendlier terminology might be worth considering.

Feedback Describing Confusion

I find the whole sidebar confusing – is there a good place to understand some of the design rationale behind it? (Aadil M.)

I tried to add a template from W > Theme > Templates > + > 404, but I’m not sure what that did at all. (Desiree F.)

Templates seem like they could be really powerful, however I don't really understand [them]. And I've got all of this stuff to do with themes...What's a template part? (Kyle N.)

How

Not entirely certain. If we decide to address this, it will require more discussion amongst engineering and design.

[Addison-Stavlo]

Received other feedback regarding this. A user selected a 'template' expecting their current page to be rendered in that template. The user was then confused about why they 'lost their content'

[mtias]

Yes, this is mostly a hint that for most users they will get to the template from a page and not to a page from a template. It'd be alright for more advanced users (https://www.youtube.com/watch?v=JHxsDSAImn0).

That's the bulk of the work on the part 3 of the "infrastructure and UI" milestone. However, I think there are a few things that can help:

• More clarity on how the sidebar presents templates (dynamic pages).
• More contextual help, particularly when creating a new template (I'd imagine a modal flow explaining what these are). cc @jameskoster
• Implement the Mosaic View as proposed.
• Better handling of "home" page.

[jameskoster]

I intend to explore better organisation of the sidebar menu in WordPress/gutenberg#29150.

In WordPress/gutenberg#29031 I propose adding a welcome guide to the Site Editor, which can introduce concepts like templates and template parts. It's worth noting that template editing is inherently complex though, and should only be accessible to users with the appropriate permissions.

---

the first iteration of full site editing was geared towards theme developers, so this friction may be expected

I think this is absolutely the case. Despite framing this feature as a "Site Editor" from the beginning, it is at this point still mostly focussed on template editing. The site editing expectations will be better met over time as the content and site editors align more closely with one another.

[jameskoster]

Thinking about this some more...

Currently whenever folks open the Site Editor, they land on whichever template loads their home page. This is kind of confusing (based on the "Site Editor" promise) and makes the experience feel template-first, which I do not believe is the long-term objective.

As a user, my expectation is that when I open the site editor, I would find myself editing whatever is set to appear on my homepage in the WordPress settings. Not the template that displays the thing that is set to appear on the homepage. I should still see the template, but it would not be the primary focus. IE the first tab in the Inspector should be the "Post" or "Page" tab, and I should not be able to directly edit template attributes.

All that to say, I think many of the ingredients to install the flow outlined above already exist. And the pieces that are missing do not feel too far out of reach...

If we implemented WordPress/gutenberg#27847, we could send folks to whatever is set to appear on their homepage when they open the Site Editor, and they would be able to see the template as well.

If we also implemented WordPress/gutenberg#26924 the the sidebar menu interaction would feel –imo – much more natural.

WordPress/gutenberg#27849 would be a bonus that ties the whole room together.

Here's a video demonstrating the flow:

Site.Editing.mp4

Figma prototype here.