Pattern Assembler: Create custom home page template and use it as the default one

[arthur791004]

Proposed Changes

• This PR tries to create a customized home page template on the fly to eliminate the confusion of the template name such as “Header and Footer Only” or “Footer Only”.
• The current approach is to create a template based on the selected theme (ex. blank-canvas-blocks in PA). Additionally, we will customize the content according to the user's selection. That is, we insert the template parts only when the user selects a header or footer.

Caveats

• The template slug might be duplicated. However, normal users go through the onboarding flow only once, so I think we could ignore this case.
• When you click on the "Customized Home", it's a bit weird as the description is Give the template a title that indicates its purpose, e.g. "Full Width".. Our customers might feel confused that “what's the template?”, “is it not a home page?” 😓
  

Testing Instructions

• Go to /setup?siteSlug=<your_site>
• Select “Promote myself or business”
• When you land on the Design Picker, pick “Blank Canvas” CTA
• When you land on Pattern Assembler, select a header, sections and footer, and click "Continue"
• When you land on the site editor, you have to see the “Customized Home” which is the name of the customized template.

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Related to p1664503702896599/1664449686.617609-slack-CRWCHQGUB

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-44931

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-44931&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~333 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-stepper             +858 B  (+0.0%)     +333 B  (+0.0%)
entry-gutenboarding       +272 B  (+0.0%)      +85 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~91 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
signup                +272 B  (+0.1%)      +91 B  (+0.1%)
jetpack-connect       +272 B  (+0.0%)      +91 B  (+0.0%)
accept-invite         +272 B  (+0.1%)      +91 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~88 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
async-load-automattic-help-center       +272 B  (+0.0%)      +88 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[fushar]

@arthur791004 Since this will be user-visible, I have a grammar suggestion. I think it usually should be Custom Home instead of Customized Home. What do you think? (if you agree then it must be changed everywhere in the code as well)

[arthur791004]

Okay, I'll change to “Custom Home”

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit feat/pa-create-customized-home-page-template on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[autumnfjeld]

@arthur791004 Thank you for this work.

When you click on the "Customized Home", it's a bit weird as the description is Give the template a title that indicates its purpose, e.g. "Full Width".. Our customers might feel confused that “what's the template?”, “is it not a home page?” 😓

Yes, that is definitely weird. I don't think we should ship with this. It's exchanging one problem for another. Is the root cause of that because the template isn't recognized as a "user created template" ?

---

Side note/rant (that isn't word for us, but I'm still commenting). Another example of odd wording using the example of "Full Width" as a template. Reading the docs, we should use some example of how a user might create a template for an actual page, like "Landing page" or

Docs
https://wordpress.org/support/article/template-editor/
https://www.godaddy.com/garage/wordpress-template-editor-create-a-landing-page/

[arthur791004]

Is the root cause of that because the template isn't recognized as a "user created template" ?

@autumnfjeld No, it's the current behavior when the user creates a new custom template. That said, there are 2 kinds of templates

• An actual page, ex. Home
• A template that can be assigned to a page, ex. the newly created template by this PR

So, if we want to keep the page content on a specific page, we need to create a custom template like this PR. However, its description would be weird and cannot be modified.

[miksansegundo]

@arthur791004 I have tested it in the Calypso live image with a newly created site, and it worked as expected 🙌

On a second try using the same site, the API /templates failed with the error code "rest_template_insert_error" and "No templates exist with that id.". Most probably it's related to the template slug as you already mentioned.

About the "weird" description of the template in the site editor, it is a hint of a feature that allows renaming a custom template directly from the top of the editor.

When creating the template from the API, we pass the param is_wp_suggestion: false. I found that this param was introduced in this PR to differentiate the templates and when it is true the feature to the rename template is disabled. Maybe this is something that we can use to hide that "weird" description?

[arthur791004]

When creating the template from the API, we pass the param is_wp_suggestion: false. I found that this param was introduced in this WordPress/gutenberg#41387 to differentiate the templates and when it is true the feature to the rename template is disabled. Maybe this is something that we can use to hide that "weird" description?

I know this magic but I don't prefer to use is_wp_suggestion: true because there might be any side effects behind that 🥲

[autumnfjeld]

OH. I see. I would call this a bug or bad UX. This makes absolutely no sense.

• I made a template
• then went back to the site editor, can see my template name at the top of the editor
• I click on the template and I see the prompt to "Give the template a title...." even though it already has a title !

@arthur791004 Can you look and see if there is already a bug report for this? And if not, file one? Then ping us in Ganon slack so we can follow this. I would like to know if it is a "core" issue, can we/Ganon fix it?

[arthur791004]

Can you look and see if there is already a bug report for this? And if not, file one? Then ping us in Ganon slack so we can follow this. I would like to know if it is a "core" issue, can we/Ganon fix it?

No, I search by something like “template title description” but I cannot find that. So, I can file a new one on https://github.com/WordPress/gutenberg. However, I think it might be a feature rather than a bug 🤔

[autumnfjeld]

Yes, I agree it isn't a bug, more like a UX improvement. Thank you for filing on GB repo.

[autumnfjeld]

I suppose we can close this as the new "Blanker Canvas" theme, p1664498573444889/1663881788.778639-slack-C029FM1EH , means this issue is obsolete, ya?

[arthur791004]

Close it in favor of using the new blank canvas theme 🙂