Gutenberg: Edit Site: Display current theme template and template hierarchy selection

[mtias]

The new edit-site editor environment should clearly display the current template being edited (index, home, singular, etc) and offer the ability to switch to a different one.

One challenge is going to be to determine _how much_ of the template hierarchy should be displayed without exposing all of its complexity. A good baseline is going to be to start by only showing what the theme has defined and evolve from there.

Initial IA proposal:

• Clearly show current template.
• Offer a dropdown to select other templates (highlight the currently viewed one).
• Allow selecting template parts separately (flyout menu) to discriminate between parts and full page templates.
• Allow creating a new template part from the flyout itself.

(The "navigate to:" should be explored elsewhere, see #19204.)

[epiqueras]

Current Prototype:

Switching templates:

Adding templates:

Clicking on a template part isolates it, like described in #19253.

[mtias]

Let's move it to the left so that it can provide location awareness.

[epiqueras]

Good idea. I also added the "New" button and removed the form from the sidebar:

[shaunandrews]

Spent some time this week looking at how we could show templates and template parts. One question that came to mind as I worked on this was how to list template parts; That is, in @mtias' first mockup is the list of template parts showing _all_ template parts, or is it showing template parts related to the current document?

With that question in mind, here's a few design variations I came up with:

The list of templates could be rather large:

We could go with a two-column layout, but the feels overly complex:

If we wanted to show the relationship between templates and the parts they use, maybe we could add submenus for each template — or just the currently selected template:

Another option for showing the relationship between the current template and it's template parts is to show them in the same list with some indentation:

--

Another option is to separate the template parts from the templates. We could show the template parts used by the current document in the Content Structure menu:

[epiqueras]

This is excellent stuff!

The first variation makes the most sense to me. I don't like that the other ones either take up more space or show the same template part in multiple places.

is the list of template parts showing all template parts, or is it showing template parts related to the current document?

I am not sure either, but I think the latter makes more sense. It's a sort of zoom-in focused editing feature, and the site's entire repertoire of template parts could get rather long for a dropdown. It makes more sense to have that in a searchable gallery on the empty template part block placeholder.

[mtias]

I am not sure either, but I think the latter makes more sense. It's a sort of zoom-in focused editing feature

Yes, the selector for template parts is about seeing what is used and focusing, it's not necessarily the best way to insert a template part to the document.

[MichaelArestad]

I tried a variation of this in conjunction with tackling a few other issues. I thought they might fit nicely in the block toolbar like this:

[jasmussen]

Glad to see so many high fidelity mockups coming out, it's really conducive to fast focused discussion. Thank you!

I see what you're trying to do with the shading — but it feels a bit heavy, and I'm wondering if we need it at all. One of the things to remember with static mockups is that they are static — I wonder how it would look if the padding simply animated in and the background simply bled through. There would be edgecases, yes, where a particularly fixed background image would lose perfect 1:1 synchronicity, but given the principle of "a block can show additional controls when selected" this seems worth a shot.

Edit: essentially what you're trying with "mind the gap" in https://github.com/WordPress/gutenberg/issues/20631.

[shaunandrews]

[mtias]

This looks like a good start to me. I feel the "Create..." is lost a bit without the + icon.

[joanrho]

@shaunandrews @MichaelArestad Saw this was moved to Needs Dev. Just to confirm, are we moving forward with the direction posted in Shaun's last comment or is there a newer direction that has an add (+) icon before the "Create new template"?

[MichaelArestad]

We're moving forward with this. We can iterate further as we get feedback on the PR.

[ockham]

I'd like to give this a shot :slightly_smiling_face:

[ockham]

Some preliminary findings on what's needed to implement https://github.com/WordPress/gutenberg/issues/19252#issuecomment-601351888:

• A submenu component (for template parts). I've checked DropdownMenu, MenuGroup, MenuItem, and friends, and there doesn't currently seem to be one. (I also didn't see one in the UI, at least at first glance.)
• We need to query the currently active theme. I haven't seen a dedicated selector/resolver; should be easy tho, it's the '/wp/v2/themes?status=active endpoint (used here e.g.)

I've noticed (and asked about) a bit of a discrepancy between templates and template parts that are stored as CPTs (manually added through the eponymous submenus of the 'Appearance' menu) vs the ones that select( 'core' ).getEntityRecords( 'postType', 'wp_template_part' ) gives me. The latter are coming from the currently active theme.

• I'm going to ignore this discrepancy for now, as it's arguably orthogonal to this issue. (We'll probably need to provide some sort of endpoint that replicates the fallback order of CPT/theme-provided/whatever for templates that we're going to use for the frontend IIRC.)

Of note, I'm using the https://github.com/WordPress/theme-experiments repo for testing template-based themes (thanks to a tip by @mtias). This is easily done by adding a .wp-env.override.json to your local Gutenberg copy with the following contents (see):

{
    "core": "WordPress/WordPress",
    "plugins": [ "." ],
    "themes": [ "WordPress/theme-experiments" ]
}

(I'm currently using the _Parisienne_ theme from that repo for testing.)

[noahtallen]

A submenu component (for template parts)

There is an existing issue here for this part of the functionality that I was looking into: #20470. Tldr is that the current popover API doesn't currently handle an implementation that would look like the design, so I made #21275 about improving the popover API :)

[ockham]

Thanks Noah, hadn't seen those issues!

Turns out there's also a dedicated one for showing the current theme in the popover menu: #20469