Wp-calypso: [Checklist] Allow design selection before editing your homepage

[apeatling]

Problem
Our user tests so far have shown that we need to provide design selection before editing. None of the users have been happy with their homepage design at the point when they are in the editor.

Goal

We modify the first checklist item with "Update your Homepage" that opens Gutenberg with the starter page template UI showing. Here the user will select the homepage template they want to start with.

See: https://github.com/Automattic/wp-calypso/pull/37407

This option means that homepage templates will use Maywood as the base theme, and will look less appealing than being used on their native theme. They'll look OK, but not perfect.

Tasks

For the user test on Wednesday 13th November:

1. Modify the first checklist item to say "Update your Homepage" @jblz
2. When the user selects "Try It" on the "Update your homepage" checklist item, open Gutenberg and present the template selector UI (#37407) @jblz
3. Show the Homepage templates before the "Other templates" (blank, About, Contact, etc). The default Maywood homepage template should be auto-selected. @noahtallen @Copons
4. The user selects a homepage template (or any other template), and it's inserted, replacing the default Maywood homepage template. @noahtallen @Copons

Pre-requisites

37281

37407

/cc @rickybanister @ianstewart @michaeldcain @shaunandrews @olaolusoga @jblz

[apeatling]

Exford has been worked on here by Jacopo: https://github.com/Automattic/themes/pull/1649

[apeatling]

@Copons & @noahtallen What plumbing work do we need to do where we can just keep adding new FSE compatible themes to the plugin?

[noahtallen]

To summarize some conversations:

Plumbing changes

One thing will be this:

1. https://github.com/Automattic/wp-calypso/pull/37434

It allows us to define FSE support in the theme. This way we don't have to whitelist anything.

1. We need to update the snapshot script.

This is stored at trunk/bin/calypso/snapshot-fse-demo-data.php-trac, and we need to make two changes to it. We need to figure out which blog IDs are the header and footer. (Line 74 and 75) Currently they are hard-coded, so we'll need to get theme dynamically

This needs to happen for all themes. But then, as we add themes we also need to modify the following:

_This seems so much more difficult than it should be. I'll look at automating it._

Demo Site Setup

1. Create a new demo site.
2. Activate FSE on it.
3. Modify the header/footer post content to match what we want.
4. Switch the demo site to use the theme we want to target and somehow make sure that we still reference the correct header/footer. We may have to do this manually.
5. Store which post ID contains the header and footer.
6. In the snapshot script we will need to add a blog ID for each new theme demo site. (Line 51).
7. In the template part API, we need to add the blog ID for each demo site. (Line 100 of trunk/wp-content/rest-api-plugins/endpoints/full-site-editing.php)
8. Run the snapshot script which will persist the templates to an option that the API can use.

Theme Changes

1. Make sure the header/footer are rendered by FSE.
2. CSS changes. @Copons knows about this stuff
3. Make sure FSE is in the theme tags and under add_theme_support.

[apeatling]

I've updated this issue to remove option 1 (FSE themes in signup for the test). We will re-explore this option after the test on Wednesday.

Let's push ahead with using the template selector. So we need:

1. When the user selects "Try It" on the "Update your homepage" checklist item, open Gutenberg and present the template selector UI.
2. Show the Homepage templates before the "Other templates" (blank, About, Contact, etc). The default Maywood homepage template should be auto-selected.
3. The user selects a homepage template (or any other template), and it's inserted, replacing the default Maywood homepage template.

[apeatling]

@Copons There is some work to do here to reorder how templates are displayed specifically for editing the homepage. See point 2 above.

[adamziel]

Assigning @jblz who's the most experienced person in Zelda when it comes to the Checklist. Please coordinate with @Copons in regard to backend trigger (assuming the current one wouldn't work).

[apeatling]

@cain will also be updating the homepage template thumbnails to match what they look like with Maywood as a base.

[noahtallen]

Some technical considerations for each step:

1. This will require https://github.com/Automattic/wp-calypso/issues/37281 to be finished as the selector only displays now for new pages. (Possibly we can hack around this if we figure out what flow we're coming from)
2. This should be conditioned on coming from the homepage, I imagine. We probably don't want to rearrange everything for the existing "create a page" flow
3. Thankfully the SPT selector should replace the page content by default without any tweaking as long as we get it to display! :)

[apeatling]

This will require #37281 to be finished as the selector only displays now for new pages. (Possibly we can hack around this if we figure out what flow we're coming from)

Yes, let's keep #37281 as a prerequisite.

This should be conditioned on coming from the homepage, I imagine. We probably don't want to rearrange everything for the existing "create a page" flow

I think for now, only when coming from this checklist item. In the future though it should also be the case if you edit the homepage, and access the page template selector again from within the editor via https://github.com/Automattic/wp-calypso/issues/37281

[Copons]

Show the Homepage templates before the "Other templates" (blank, About, Contact, etc). The default Maywood homepage template should be auto-selected.

@apeatling You say "Maywood" because we actually want it to be Maywood in any case, or because it's currently the only FSE theme but eventually it will be "the current (FSE) theme" (maybe defaulting to Maywood)?

Assigning @jblz who's the most experienced person in Zelda when it comes to the Checklist. Please coordinate with @Copons in regard to backend trigger (assuming the current one wouldn't work).

@jblz We only have one endpoint that returns the templates (search for the topic-verticals.php file on WPCOM).
It's called in the SPT plugin, the results are sent to the editor via wp_localize_script, end eventually rendered.

It currently doesn't return all themes home templates, but I'm working on it in #37407 + D35170-code.
It's almost ready, I "only" need to improve its performances, which are not great right now (suggestions welcome btw 😄).

(cc @Automattic/ajax who wrote SPT in the first place)

[jblz]

I implemented an approach that could work for this in:

37458

It uses a query argument to tell the editor wrapper to set the page to the front on publish so that side of things is completely client-driven.

It also does not edit the existing (headstarted or otherwise) homepage, but creates a new one when the Checklist item CTA is clicked.

The only way I see this flow breaking is if someone closes the browser and wants to pick back up "Updating their homepage."

As a user building out a new site, I almost want some some UI on the post editor sidebar to specify that the post should become the new front page of the site when published 🤔

[apeatling]

Show the Homepage templates before the "Other templates" (blank, About, Contact, etc). The default Maywood homepage template should be auto-selected. @noahtallen @Copons

@Copons What's the status of this one now that we have homepage templates displaying in the template selector. Is this one your radar?

[Copons]

@apeatling Working on it right now: #37666
One question: should we show the home templates before the others only when we are editing the front page, or in any case?

[vindl]

One question: should we show the home templates before the others only when we are editing the front page, or in any case?

I think it would make sense to only show them when editing the front page. The con of that being that it might be visually inconsistent across pages. 🤔

[Copons]

One question: should we show the home templates before the others only when we are editing the front page, or in any case?

I think it would make sense to only show them when editing the front page. The con of that being that it might be visually inconsistent across pages. 🤔

I don't think it would be that much inconsistent though.

For front pages, we'd have these groups:

• Choose a layout (followed by a list of homepages layouts)
• Other layouts (followed by blank, about, contact, etc.)

For any other page, we'd keep the current behaviour:

• Choose a layout (blank, about, etc.)
• Homepage layouts (list of home layouts)

I think it could be a nice QOL enhancement, and I don't expect much work involved (I made sure #37666 is ready for it with a simple component change): it should be enough to just check if get_option( 'page_on_front' ) matches the edited post ID in PHP and pass the results to JS via script localization.

[apeatling]

Yes, just for editing a homepage, exactly as you described.

[apeatling]

@Copons I actually think the wording needs to be more consistent, I left a comment in your PR.

[apeatling]

With https://github.com/Automattic/wp-calypso/pull/37458 merged, everything is wrapped up here. Great work everyone!