Gutenberg: Show Template Parts in Flyout Menu (or similar)

[mtias]

We should find a more scalable way to show template parts as the dropdown could start growing a lot. Either a flyout menu like:

Or something like splitting the whole panel with tabs (Templates and Parts).

[MichaelArestad]

I'm not sure it is necessary to show the template parts in this menu at all. The included template parts can be selected via the navigator or, with some minor changes to the template part blocks, directly in the editor.

Why not use the inserter to add or create a new template part?

[mtias]

The selection that occurs from this menu is different since it isolates the template part. It's the equivalent view you'd get by directly loading a single template post type.

[shaunandrews]

Here's an updated mockup with the template parts showing in a submenu, along with the template previews (from #20478) and the theme info (from #20469):

I also tried tabs in the menu, but quickly abandoned it as I found the multiple select/focus states confusing:

[shaunandrews]

One thought on the combination of the template previews, and the template part flyout: The position of these elements is different.

• The previews appear in a fixed position with the hopes of making it easier on your eyes as you scrub between templates.
• The flyout menu appears relative to its parent menu item.

Does this mixing of positions feel ok?

[shaunandrews]

Also, thinking a little bit about mobile.

We could make the dropdown a fullscreen modal on small devices, and how the template parts inline:

Alternatively, we could keep the dropdown/flyout interaction the same on mobile, repositioning the flyout menu as needed:

I thought the flyout might be problematic on mobile devices, but when playing with the the above prototype on my phone it actually feels pretty natural.

[MichaelArestad]

@shaunandrews Could the template parts flyout show up when hovering over a template?

Edit: It's not clear to me if the template parts are part of the selected template or if it is a list of all template parts.

[mtias]

@MichaelArestad list of all so far.

[MichaelArestad]

Ah. Thanks for clarifying @mtias. I think we can move forward with the proposals (without tabs) from @shaunandrews.

[noahtallen]

Do we have any existing components which handle flyouts? Do we need to create one?

[mtias]

Not currently. We need to create one.

[noahtallen]

It doesn't look as if the current Popover positioning will be able to handle this style, so I created an issue about improving the API to make it more flexible (#21275). I'm working towards getting a basic flyout working, even if the style doesn't match 100% yet

[vindl]

Given that we'll likely be removing the template dropdown and replacing it with navigation sidebar (https://github.com/WordPress/gutenberg/issues/23939), this issue is probably no longer relevant?

[MichaelArestad]

@vindl let's keep this open for now, but focus on the sidebar. If we can get that sidebar implemented, we can close this out.