From 3c7c1a9bca3d9c5e68ce12c415af94c68c97c9d5 Mon Sep 17 00:00:00 2001 From: arthur Date: Fri, 30 Sep 2022 16:12:47 +0800 Subject: [PATCH 1/2] Pattern Assembler: Create customized home page template and use it as the default one --- .../pattern-assembler/constants.ts | 14 +++++++++ .../pattern-assembler/index.tsx | 29 +++++++++---------- .../pattern-assembler/utils.ts | 16 +++++++++- packages/data-stores/src/site/actions.ts | 27 +++++++++++++++++ 4 files changed, 70 insertions(+), 16 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts index 902bf4a042b9a..60d65034099f6 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts +++ b/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 CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT = { + HEADER: '', + MAIN: ` + +
+ + +
+ +`, + FOOTER: + '', +}; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx index 41c8676fd63be..90c9eed3d2eb4 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx +++ b/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, makeCustomizedHomePageTemplateContent } 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!, + 'customized-home', + translate( 'Customized Home' ), + makeCustomizedHomePageTemplateContent( !! header, !! footer ) ) + .then( ( { slug } ) => + setDesignOnSite( siteSlugOrId, design, { pageTemplate: slug } ) + ) + .then( () => reduxDispatch( requestActiveTheme( site?.ID || -1 ) ) ) ); submit?.(); diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts index b81709ea07b28..b3397dd824c11 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts +++ b/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, + CUSTOMIZED_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 makeCustomizedHomePageTemplateContent = ( hasHeader: boolean, hasFooter: boolean ) => + [ + hasHeader && CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT.HEADER, + CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT.MAIN, + hasFooter && CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT.FOOTER, + ] + .filter( Boolean ) + .join( '\n' ); diff --git a/packages/data-stores/src/site/actions.ts b/packages/data-stores/src/site/actions.ts index 15c46e6930b57..0f527f3f7081d 100644 --- a/packages/data-stores/src/site/actions.ts +++ b/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, From 4148d4f347ba39ae139a752004f06ab946777a3c Mon Sep 17 00:00:00 2001 From: arthur Date: Mon, 3 Oct 2022 11:39:09 +0800 Subject: [PATCH 2/2] Rename cutomized home to cutom home --- .../steps-repository/pattern-assembler/constants.ts | 2 +- .../steps-repository/pattern-assembler/index.tsx | 8 ++++---- .../steps-repository/pattern-assembler/utils.ts | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts index 60d65034099f6..01fefb847bd24 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts @@ -3,7 +3,7 @@ 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 CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT = { +export const CUSTOM_HOME_PAGE_TEMPLATE_CONTENT = { HEADER: '', MAIN: ` diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx index 90c9eed3d2eb4..a1cd27466d564 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx @@ -12,7 +12,7 @@ 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, makeCustomizedHomePageTemplateContent } 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'; @@ -144,9 +144,9 @@ const PatternAssembler: Step = ( { navigation } ) => { createTemplate( siteSlugOrId, design.recipe!.stylesheet!, - 'customized-home', - translate( 'Customized Home' ), - makeCustomizedHomePageTemplateContent( !! header, !! footer ) + 'custom-home', + translate( 'Custom Home' ), + makeCustomHomePageTemplateContent( !! header, !! footer ) ) .then( ( { slug } ) => setDesignOnSite( siteSlugOrId, design, { pageTemplate: slug } ) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts index b3397dd824c11..6fbcb7e4bc7d2 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/utils.ts @@ -3,7 +3,7 @@ import { PATTERN_SOURCE_SITE_ID, PREVIEW_PATTERN_URL, STYLE_SHEET, - CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT, + CUSTOM_HOME_PAGE_TEMPLATE_CONTENT, } from './constants'; export const encodePatternId = ( patternId: number ) => @@ -24,11 +24,11 @@ export const handleKeyboard = if ( key === 'Enter' || key === ' ' ) callback(); }; -export const makeCustomizedHomePageTemplateContent = ( hasHeader: boolean, hasFooter: boolean ) => +export const makeCustomHomePageTemplateContent = ( hasHeader: boolean, hasFooter: boolean ) => [ - hasHeader && CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT.HEADER, - CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT.MAIN, - hasFooter && CUSTOMIZED_HOME_PAGE_TEMPLATE_CONTENT.FOOTER, + hasHeader && CUSTOM_HOME_PAGE_TEMPLATE_CONTENT.HEADER, + CUSTOM_HOME_PAGE_TEMPLATE_CONTENT.MAIN, + hasFooter && CUSTOM_HOME_PAGE_TEMPLATE_CONTENT.FOOTER, ] .filter( Boolean ) .join( '\n' );