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

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts

@@ -2,3 +2,17 @@ export const PATTERN_SOURCE_SITE_ID = 174455321; // dotcompatterns
 export const STYLE_SHEET = 'pub/blank-canvas-blocks';
 export const PUBLIC_API_URL = 'https://public-api.wordpress.com';
 export const PREVIEW_PATTERN_URL = PUBLIC_API_URL + '/wpcom/v2/block-previews/pattern';
+
+export const CUSTOM_HOME_PAGE_TEMPLATE_CONTENT = {
+	HEADER: '<!-- wp:template-part {"slug":"header","tagName":"header"} /-->',
+	MAIN: `
+<!-- wp:group {"tagName":"main","lock":{"move":false,"remove":true}} -->
+<main class="wp-block-group">
+
+<!-- wp:post-content {"layout":{"inherit":true},"lock":{"move":false,"remove":true}} /-->
+</main>
+<!-- /wp:group -->
+`,
+	FOOTER:
+		'<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->',
+};

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx

@@ -1,5 +1,6 @@
 import { StepContainer } from '@automattic/onboarding';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
 import { useDispatch as useReduxDispatch } from 'react-redux';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
@@ -11,20 +12,21 @@ import { SITE_STORE, ONBOARD_STORE } from '../../../../stores';
 import PatternAssemblerPreview from './pattern-assembler-preview';
 import PatternLayout from './pattern-layout';
 import PatternSelectorLoader from './pattern-selector-loader';
-import { encodePatternId } from './utils';
+import { encodePatternId, makeCustomHomePageTemplateContent } from './utils';
 import type { Step } from '../../types';
 import type { Pattern } from './types';
 import type { DesignRecipe, Design } from '@automattic/design-picker/src/types';
 import './style.scss';
 
 const PatternAssembler: Step = ( { navigation } ) => {
+	const translate = useTranslate();
 	const [ showPatternSelectorType, setShowPatternSelectorType ] = useState< string | null >( null );
 	const [ header, setHeader ] = useState< Pattern | null >( null );
 	const [ footer, setFooter ] = useState< Pattern | null >( null );
 	const [ sections, setSections ] = useState< Pattern[] >( [] );
 	const [ sectionPosition, setSectionPosition ] = useState< number | null >( null );
 	const { goBack, goNext, submit } = navigation;
-	const { setDesignOnSite } = useDispatch( SITE_STORE );
+	const { setDesignOnSite, createTemplate } = useDispatch( SITE_STORE );
 	const reduxDispatch = useReduxDispatch();
 	const { setPendingAction } = useDispatch( ONBOARD_STORE );
 	const selectedDesign = useSelect( ( select ) => select( ONBOARD_STORE ).getSelectedDesign() );
@@ -44,16 +46,6 @@ const PatternAssembler: Step = ( { navigation } ) => {
 			} as DesignRecipe,
 		} as Design );
 
-	const getPageTemplate = () => {
-		let pageTemplate = 'footer-only';
-
-		if ( header ) {
-			pageTemplate = 'header-footer-only';
-		}
-
-		return pageTemplate;
-	};
-
 	const addSection = ( pattern: Pattern ) => {
 		if ( sectionPosition !== null ) {
 			setSections( [
@@ -147,12 +139,19 @@ const PatternAssembler: Step = ( { navigation } ) => {
 						onContinueClick={ () => {
 							if ( siteSlugOrId ) {
 								const design = getDesign();
-								const pageTemplate = getPageTemplate();
 
 								setPendingAction( () =>
-									setDesignOnSite( siteSlugOrId, design, { pageTemplate } ).then( () =>
-										reduxDispatch( requestActiveTheme( site?.ID || -1 ) )
+									createTemplate(
+										siteSlugOrId,
+										design.recipe!.stylesheet!,
+										'custom-home',
+										translate( 'Custom Home' ),
+										makeCustomHomePageTemplateContent( !! header, !! footer )
 									)
+										.then( ( { slug } ) =>
+											setDesignOnSite( siteSlugOrId, design, { pageTemplate: slug } )
+										)
+										.then( () => reduxDispatch( requestActiveTheme( site?.ID || -1 ) ) )
 								);
 
 								submit?.();

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts

@@ -1,5 +1,10 @@
 import { addQueryArgs } from '@wordpress/url';
-import { PATTERN_SOURCE_SITE_ID, PREVIEW_PATTERN_URL, STYLE_SHEET } from './constants';
+import {
+	PATTERN_SOURCE_SITE_ID,
+	PREVIEW_PATTERN_URL,
+	STYLE_SHEET,
+	CUSTOM_HOME_PAGE_TEMPLATE_CONTENT,
+} from './constants';
 
 export const encodePatternId = ( patternId: number ) =>
 	`${ patternId }-${ PATTERN_SOURCE_SITE_ID }`;
@@ -18,3 +23,12 @@ export const handleKeyboard =
 	( { key }: { key: string } ) => {
 		if ( key === 'Enter' || key === ' ' ) callback();
 	};
+
+export const makeCustomHomePageTemplateContent = ( hasHeader: boolean, hasFooter: boolean ) =>
+	[
+		hasHeader && CUSTOM_HOME_PAGE_TEMPLATE_CONTENT.HEADER,
+		CUSTOM_HOME_PAGE_TEMPLATE_CONTENT.MAIN,
+		hasFooter && CUSTOM_HOME_PAGE_TEMPLATE_CONTENT.FOOTER,
+	]
+		.filter( Boolean )
+		.join( '\n' );

packages/data-stores/src/site/actions.ts

@@ -349,6 +349,32 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		}
 	}
 
+	function* createTemplate(
+		siteSlug: string,
+		stylesheet: string,
+		slug: string,
+		title: string,
+		content: string
+	) {
+		const templateSlug = `wp-custom-template-${ slug }`;
+		const response: { slug: string } = yield wpcomRequest( {
+			path: `/sites/${ encodeURIComponent( siteSlug ) }/templates`,
+			apiNamespace: 'wp/v2',
+			body: {
+				id: `${ stylesheet }//${ templateSlug }`,
+				slug: templateSlug,
+				theme: stylesheet,
+				title,
+				content,
+				status: 'publish',
+				is_wp_suggestion: false,
+			},
+			method: 'POST',
+		} );
+
+		return response;
+	}
+
 	const setSiteSetupError = ( error: string, message: string ) => ( {
 		type: 'SET_SITE_SETUP_ERROR',
 		error,
@@ -545,6 +571,7 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		resetNewSiteFailed,
 		setThemeOnSite,
 		setDesignOnSite,
+		createTemplate,
 		createSite,
 		receiveSite,
 		receiveSiteFailed,