Wp-calypso: Editor: Add homepage templates from all template first themes to page template selector

[apeatling]

We have many homepage templates built for our 18 template-first Gutenberg themes. All of these page templates should be available in the template picker, regardless of the theme that you have chosen.

Currently, users think they have to change their entire theme in order to get a different home page template. They're correct, but this should not be necessary.

Ref: p58i-8cp-wpcom

[shaunandrews]

I worry about listing out a bunch of templates in a single group. One simple thing we could do is introduce a simple grouping like this:

[davipontesblog]

This probably means new code on this selector screen, but ideally, we could use a search bar and collapsible categories to make it not only fit these new ones better but also make the page template selector more scaleable as we move forward? I can see us offering 2-3 types of contact pages in the future, 4-5 different blog page styles with the new Newspack block, etc. So maybe not something we do for this sprint here but wanted to share this idea.

[iamtakashi]

I was thinking the same thing as Davi mentioned above. For when we have more templates, it'd be great if the UI is scalable to hold more templates.

Like Kioken and Astra, how about having categories on the left and displaying smaller previews for each template? To compensate the small previews, how about make it scrollable on hover?

[shaunandrews]

how about having categories on the left

I could see this, but with accordions to show the various templates within those categories.

and displaying smaller previews for each template

One of the major takeaways from our early user testing was that the small previews were not enough for a customer to make a choice — every person wanted to see a larger preview of the template before making a decision.

To compensate the small previews, how about make it scrollable on hover

This was explored, but we opted to use a larger preview — which allows you to scroll in a more natural fashion.

[davipontesblog]

I wonder how something like the ability to change the template from within the editor, once an option is picked, could come into play in this discussion:

https://github.com/Automattic/wp-calypso/issues/37281

So in a way, the user might feel more compelled to picking a template even without a larger preview if they know they can change it later from the editor?

[shaunandrews]

I wonder how something like the ability to change the template from within the editor, once an option is picked, could come into play in this discussion

I do think there's a connection here. But one thing with the preview is that it provides a more realistic rendering of the template/layout — letting you interact with elements like a gallery, slider, :hover affects, and more.

Right now, the thumbnails are rendered as static images due to performance issues. The preview allows us to render a single template/layout at once, avoiding those performance issues.

[iamtakashi]

One of the major takeaways from our early user testing was that the small previews were not enough for a customer to make a choice — every person wanted to see a larger preview of the template before making a decision.

That's good to know. I can understand a 100% scale preview that allows the user to scroll in a more natural fashion is helpful for making a decision.

(the preview) letting you interact with elements like a gallery, slider, :hover affects, and more.

I know the preview consists of real blocks, but it doesn't seem to let me interact with elements on the preview. What I see there is what I'll see in the editor but without the interaction with blocks.

As Davi said, I also wonder if the point of the large preview will stay when the user can change easily the layout in the editor because what they see in the editor will essentially be a 100% scale preview. I think it's worth to keep thinking about how we could let the user add a layout in the editor as opposed to a separate step. And I feel the discussion going on here https://github.com/WordPress/gutenberg/issues/17335 is very relevant.