Wp-calypso: Patterns Toolkit: Use DotcomPatterns as the source site for Page Layouts

[ianstewart]

The Problem

In Calypso, using the Editing Toolkit Plugin, we make the following screen available to users when they add a new page.

This page could use a design refresh @rickybanister and @joanrho and the layouts themselves could use a refresh @iamtakashi and @ me.

This issue is not about those issues. :)

Currently, these layouts arrive in this screen from two different sources.

• Non-homepage layouts are page layouts stored on one source site deployed as Headstart annotations using one workflow stored in one location.
• Homepage layouts are page layouts stored as Headstart layouts stored in themes — meaning another location, and another workflow for deployment.

This results in difficult deployment of patterns and thus fewer new page layouts or improvements shipped here along with difficult debugging and deployment of fixes when new versions of Gutenberg ship.

Additionally, it also means we don't have a method yet of adding the homepage layouts to the Add New Page Screen from the signup flow at WP.com/new.

Proposed Solution

The title of the issue gives away the proposed solution: use DotcomPatterns as the source site for Page Layouts.

Existing homepage layouts have already been added to, and categorized on that source site here:

https://dotcompatterns.wordpress.com/tag/layout/

Homepage layouts used in theme demo sites and the WP.com/new site can be easily added to DotcomPatterns, tagged as layout, they can be categorized as home. All layout posts from the source site can be looped through and displayed in their respective categories.

I'm not quite sure how the thumbnails can be handled. If there is still performance issues with live previews we may want to use the source site itself to store thumbnail previews as featured images. This may require updating the Patterns Toolkit API.

cc @apeatling

[noahtallen]

Homepage layouts used in theme demo sites and the WP.com/new site can be easily added to DotcomPatterns, tagged as layout, they can be categorized as home. All layout posts from the source site can be looped through and displayed in their respective categories.

One thing @andrewserong and I talked about yesterday was keeping theme demo sites synced with the patterns site. Do you think we actually need that? Or, could the theme homepages just be defined in the patterns site and updated separately? (And is it ok for the two to get out of sync?) Another idea I had was to copy the page pattern from the theme demo site to the patterns demo site when you run the headstart generate annotations command. Or something like that. Just a way of "deploying it" to the patterns site.

[ianstewart]

keeping theme demo sites synced with the patterns site. Do you think we actually need that?

I don't think so.

Or, could the theme homepages just be defined in the patterns site and updated separately?

I hope so. :D

And is it ok for the two to get out of sync?

It's not ideal but it seems much easier to update a theme demo site than our current situation. If an update is made to a theme demo site homepage it's quickly resolved with a copy-paste from the source site for the page layouts. So, out-of-sync problems could be easily corrected manually when they arise. In the future perhaps we could then use the Patterns Toolkit to offer better displays and previews of home pages. "I like this theme but … let's flick over to another homepage to see how it looks." That sort of thing.

Theme demo previewing is almost its own separate issue. Our current theme demo sites are almost too idiosyncratic creating a "how do I make it look like the demo?" problem. I think they're almost never updated — I think we've only been updating them recently in order to resolve the issues we have in using them as sources for this screen. Changes that don't really affect their use as a visual for someone "theme-shopping."

[noahtallen]

One thing that @mattwiebe mentioned is that the caching mechanism could be improved for SPT as well. I'm guessing a client-side fetch would work better than the current inline PHP approach, especially for existing pages. That could be part of this project

[andrewserong]

Thanks for writing this issue up, Ian, I'm super excited for this to happen!

I'm guessing a client-side fetch would work better than the current inline PHP approach

+1 to this! Also the API endpoint supports pagination, so depending on a new design for the page layout picker, it'd be awesome to have it default to listing the first say 6 layouts, and as you scroll down, lazy-load the rest of the layouts until you get to the bottom of the list, instead of fetching all at once.

[ianstewart]

have it default to listing the first say 6 layouts, and as you scroll down, lazy-load the rest of the layouts until you get to the bottom of the list, instead of fetching all at once.

I wonder if this could unlock the performance blockers for using live previews for the thumbs in the current design / future design work.

It would be especially helpful for the blog page layouts and the homepage layouts that have blog posts on them.

[davipontesblog]

There is an added urgency to implement this solution since, currently, the starter designs we show users in Gutenboarding/ new site creation flow are not available anywhere else on our platform once the site is created. So users reach out for support with questions like:

• "Why can't I find the option "Bowen" (insert any other design name here) that I saw during signup?"
• "I am looking for a theme option that I saw during signup and can't find. Please help."

It's hard for Happiness Engineers to support users with these questions too since these homepage layouts aren't available anywhere in calypso.

[rickybanister]

@davipontesblog thanks so much for adding a note of urgency here. I'm very excited to make this happen and revamp the layout screen.

This is a highly ridiculous suggestion, but layouts (and patterns) can be copy/pasted from one dotcom site to another so in order to appease a specific user before we hook things up to an api, we could point them to a demo site or give them paste-able html to get one of those layouts in the meantime.

[davipontesblog]

give them paste-able html to get one of those layouts in the meantime.

that's the route I've been recommending we use as HE's 👍
p7DVsv-906-p2