diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx index 0a8c4b3600127..0ad9e99abcad7 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx @@ -51,6 +51,11 @@ import type { StarterDesigns } from '@automattic/data-stores'; import type { Design, StyleVariation } from '@automattic/design-picker'; const SiteIntent = Onboard.SiteIntent; +const SITE_ASSEMBLER_AVAILABLE_INTENTS: string[] = [ SiteIntent.Build ]; + +if ( isEnabled( 'pattern-assembler/write-flow' ) ) { + SITE_ASSEMBLER_AVAILABLE_INTENTS.push( SiteIntent.Write ); +} const UnifiedDesignPickerStep: Step = ( { navigation, flow } ) => { const { goBack, submit, exitFlow } = navigation; @@ -100,9 +105,12 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow } ) => { const blankCanvasDesignOffset = allDesigns.static.designs.findIndex( isBlankCanvasDesign ); if ( blankCanvasDesignOffset !== -1 ) { - // Extract the blank canvas design first and then insert it into the last one for the build intent + // Extract the blank canvas design first and then insert it into the last one for the build and write intents const blankCanvasDesign = allDesigns.static.designs.splice( blankCanvasDesignOffset, 1 ); - if ( isEnabled( 'signup/design-picker-pattern-assembler' ) && intent === SiteIntent.Build ) { + if ( + isEnabled( 'signup/design-picker-pattern-assembler' ) && + SITE_ASSEMBLER_AVAILABLE_INTENTS.includes( intent ) + ) { allDesigns.static.designs.push( ...blankCanvasDesign ); } } 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 7b1ebeeaf7c51..5f71bebb6603f 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,4 @@ export const PATTERN_SOURCE_SITE_ID = 174455321; // dotcompatterns 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 SITE_TAGLINE = 'Site Tagline'; +export const PLACEHOLDER_SITE_ID = 211865921; // blankcanvas3demo.wordpress.com 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 8c298b0e06f08..91d9f9dfa4b80 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 @@ -13,7 +13,7 @@ import { useSiteIdParam } from '../../../../hooks/use-site-id-param'; import { useSiteSlugParam } from '../../../../hooks/use-site-slug-param'; import { SITE_STORE, ONBOARD_STORE } from '../../../../stores'; import { recordSelectedDesign } from '../../analytics/record-design'; -import { SITE_TAGLINE } from './constants'; +import { SITE_TAGLINE, PLACEHOLDER_SITE_ID } from './constants'; import PatternLayout from './pattern-layout'; import PatternSelectorLoader from './pattern-selector-loader'; import { useAllPatterns } from './patterns-data'; @@ -257,7 +257,12 @@ const PatternAssembler: Step = ( { navigation, flow } ) => { createCustomHomeTemplateContent( stylesheet, !! header, !! footer, !! sections.length ) ) ) - .then( () => runThemeSetupOnSite( siteSlugOrId, design ) ) + .then( () => + runThemeSetupOnSite( siteSlugOrId, design, { + trimContent: false, + posts_source_site_id: PLACEHOLDER_SITE_ID, + } ) + ) .then( () => reduxDispatch( requestActiveTheme( site?.ID || -1 ) ) ) ); diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-assembler-container.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-assembler-container.tsx index 3488438dfd0e7..c5dddbe0bcad2 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-assembler-container.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-assembler-container.tsx @@ -1,4 +1,5 @@ import { BlockRendererProvider, PatternsRendererProvider } from '@automattic/block-renderer'; +import { PLACEHOLDER_SITE_ID } from './constants'; import type { SiteInfo } from '@automattic/block-renderer'; interface Props { @@ -18,11 +19,12 @@ const PatternAssemblerContainer = ( { }: Props ) => ( { children } diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/patterns-data.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/patterns-data.ts index 3c56177564e18..f5e84732b1557 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/patterns-data.ts +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/patterns-data.ts @@ -1,3 +1,4 @@ +import { isEnabled } from '@automattic/calypso-config'; import { useTranslate } from 'i18n-calypso'; import { useMemo } from 'react'; import type { Pattern } from './types'; @@ -185,240 +186,284 @@ const useSectionPatterns = () => { const links = translate( 'Links' ); const services = translate( 'Services' ); const portfolio = translate( 'Portfolio' ); + const posts = translate( 'Posts' ); const sectionPatterns: Pattern[] = useMemo( - () => [ - { - id: 7156, - name: 'Media and text with image on the right', - category: callToAction, - }, - { - id: 7153, - name: 'Media and text with image on the left', - category: callToAction, - }, - { - id: 7146, - name: 'Four column list', - category: callToAction, - }, - { - id: 7132, - name: 'Cover image with left-aligned call to action', - category: callToAction, - }, - { - id: 7159, - name: 'Cover image with centered text and a button', - category: callToAction, - }, - { - id: 3741, - name: 'Large CTA', - category: callToAction, - }, - { - id: 6303, - name: 'Two Buttons Centered CTA', - category: callToAction, - }, - { - id: 6304, - name: 'Centered Heading with CTA', - category: callToAction, - }, - { - id: 6311, - name: 'Portfolio Project', - category: callToAction, - }, - { - id: 3747, - name: 'Hero with CTA', - category: callToAction, - }, - { - id: 6308, - name: 'Cover Image with CTA', - category: callToAction, - }, - { - id: 6310, - name: 'Gallery with description on the left', - category: callToAction, - }, - { - id: 6312, - name: 'Two Column CTA', - category: callToAction, - }, - { - id: 6305, - name: 'Heading with Image Grid', - category: images, - }, - { - id: 7149, - name: 'Two column image grid', - category: images, - }, - { - id: 5691, - name: 'Three logos, heading, and paragraphs', - category: images, - }, - { - id: 7143, - name: 'Full-width image', - category: images, - }, - { - id: 737, - name: 'Logos', - category: images, - }, - { - id: 1585, - name: 'Quote and logos', - category: images, - }, - { - id: 7135, - name: 'Three columns with images and text', - category: list, - }, - { - id: 789, - name: 'Numbered list', - category: list, - }, - { - id: 6712, - name: 'List of events', - category: list, - }, - { - id: 5666, - name: 'Large numbers, heading, and paragraphs', - category: numbers, - }, - { - id: 462, - name: 'Numbers', - category: numbers, - }, - { - id: 6309, - name: '6309', - category: about, - }, - { - id: 6306, - name: 'Names List', - category: about, - }, - { - id: 5663, - name: 'Large headline', - category: about, - }, - { - id: 7140, - name: 'Left-aligned headline', - category: about, - }, - { - id: 7138, - name: 'Centered headline and text', - category: about, - }, - { - id: 7161, - name: 'Two testimonials side by side', - category: testimonials, - }, - { - id: 6307, - name: '3 Column Testimonials', - category: testimonials, - }, - { - id: 6324, - name: 'Two Column Testimonials', - category: testimonials, - }, - { - id: 1600, - name: 'Three column text and links', - category: links, - }, - { - id: 6323, - name: "FAQ's", - category: services, - }, - { - id: 3743, - name: 'Simple Two Column Layout', - category: services, - }, - { - id: 39, - name: 'Topics with Image', - category: services, - }, - { - id: 6313, - name: 'Portfolio Intro', - category: portfolio, - }, - { - id: 6314, - name: 'Centered Intro', - category: portfolio, - }, - { - id: 6315, - name: 'Large Intro Text', - category: portfolio, - }, - { - id: 6316, - name: 'Squared Media & Text', - category: portfolio, - }, - { - id: 6317, - name: 'Horizontal Media & Text', - category: portfolio, - }, - { - id: 6318, - name: 'Offset Projects', - category: portfolio, - }, - { - id: 6319, - name: 'Case Study', - category: portfolio, - }, - { - id: 6320, - name: 'Heading with two images and descriptions', - category: portfolio, - }, - { - id: 6321, - name: 'CV Text Grid', - category: portfolio, - }, - { - id: 6322, - name: 'Tall Item One Column', - category: portfolio, - }, - ], + () => + [ + { + id: 7156, + name: 'Media and text with image on the right', + category: callToAction, + }, + { + id: 7153, + name: 'Media and text with image on the left', + category: callToAction, + }, + { + id: 7146, + name: 'Four column list', + category: callToAction, + }, + { + id: 7132, + name: 'Cover image with left-aligned call to action', + category: callToAction, + }, + { + id: 7159, + name: 'Cover image with centered text and a button', + category: callToAction, + }, + { + id: 3741, + name: 'Large CTA', + category: callToAction, + }, + { + id: 6303, + name: 'Two Buttons Centered CTA', + category: callToAction, + }, + { + id: 6304, + name: 'Centered Heading with CTA', + category: callToAction, + }, + { + id: 6311, + name: 'Portfolio Project', + category: callToAction, + }, + { + id: 3747, + name: 'Hero with CTA', + category: callToAction, + }, + { + id: 6308, + name: 'Cover Image with CTA', + category: callToAction, + }, + { + id: 6310, + name: 'Gallery with description on the left', + category: callToAction, + }, + { + id: 6312, + name: 'Two Column CTA', + category: callToAction, + }, + { + id: 5645, + name: 'Four Recent Blog Posts', + category: posts, + }, + { + id: 1784, + name: 'Recent Posts', + category: posts, + }, + { + id: 8421, + name: 'Grid of posts 2x3', + category: posts, + }, + { + id: 8435, + name: 'Grid of Posts 3x2', + category: posts, + }, + { + id: 7996, + name: 'Grid of Posts 4x2', + category: posts, + }, + { + id: 8437, + name: 'List of posts', + category: posts, + }, + { + id: 3213, + name: 'Latest podcast episodes', + category: posts, + }, + { + id: 6305, + name: 'Heading with Image Grid', + category: images, + }, + { + id: 7149, + name: 'Two column image grid', + category: images, + }, + { + id: 7149, + name: 'Two column image grid', + category: images, + }, + { + id: 5691, + name: 'Three logos, heading, and paragraphs', + category: images, + }, + { + id: 7143, + name: 'Full-width image', + category: images, + }, + { + id: 737, + name: 'Logos', + category: images, + }, + { + id: 1585, + name: 'Quote and logos', + category: images, + }, + { + id: 7135, + name: 'Three columns with images and text', + category: list, + }, + { + id: 789, + name: 'Numbered list', + category: list, + }, + { + id: 6712, + name: 'List of events', + category: list, + }, + { + id: 5666, + name: 'Large numbers, heading, and paragraphs', + category: numbers, + }, + { + id: 462, + name: 'Numbers', + category: numbers, + }, + { + id: 6309, + name: '6309', + category: about, + }, + { + id: 6306, + name: 'Names List', + category: about, + }, + { + id: 5663, + name: 'Large headline', + category: about, + }, + { + id: 7140, + name: 'Left-aligned headline', + category: about, + }, + { + id: 7138, + name: 'Centered headline and text', + category: about, + }, + { + id: 7161, + name: 'Two testimonials side by side', + category: testimonials, + }, + { + id: 6307, + name: '3 Column Testimonials', + category: testimonials, + }, + { + id: 6324, + name: 'Two Column Testimonials', + category: testimonials, + }, + { + id: 1600, + name: 'Three column text and links', + category: links, + }, + { + id: 6323, + name: "FAQ's", + category: services, + }, + { + id: 3743, + name: 'Simple Two Column Layout', + category: services, + }, + { + id: 39, + name: 'Topics with Image', + category: services, + }, + { + id: 6313, + name: 'Portfolio Intro', + category: portfolio, + }, + { + id: 6314, + name: 'Centered Intro', + category: portfolio, + }, + { + id: 6315, + name: 'Large Intro Text', + category: portfolio, + }, + { + id: 6316, + name: 'Squared Media & Text', + category: portfolio, + }, + { + id: 6317, + name: 'Horizontal Media & Text', + category: portfolio, + }, + { + id: 6318, + name: 'Offset Projects', + category: portfolio, + }, + { + id: 6319, + name: 'Case Study', + category: portfolio, + }, + { + id: 6320, + name: 'Heading with two images and descriptions', + category: portfolio, + }, + { + id: 6321, + name: 'CV Text Grid', + category: portfolio, + }, + { + id: 6322, + name: 'Tall Item One Column', + category: portfolio, + }, + ].filter( + ( { category } ) => isEnabled( 'pattern-assembler/write-flow' ) || category !== posts + ), [] ); diff --git a/config/development.json b/config/development.json index 337011aeb507f..67ba3ac3ab9a9 100644 --- a/config/development.json +++ b/config/development.json @@ -131,6 +131,7 @@ "page/export": true, "pattern-assembler/client-side-render": true, "pattern-assembler/logged-out-showcase": true, + "pattern-assembler/write-flow": true, "plans/personal-plan": true, "plans/pro-plan": false, "plans/starter-plan": false, diff --git a/config/horizon.json b/config/horizon.json index 9a9a48d57adea..fa49e76a33276 100644 --- a/config/horizon.json +++ b/config/horizon.json @@ -82,6 +82,7 @@ "p2/p2-plus": true, "pattern-assembler/client-side-render": true, "pattern-assembler/logged-out-showcase": true, + "pattern-assembler/write-flow": false, "plans/personal-plan": true, "plans/pro-plan": false, "plans/starter-plan": false, diff --git a/config/production.json b/config/production.json index a24a370a91b8e..9343810c1b1fa 100644 --- a/config/production.json +++ b/config/production.json @@ -96,6 +96,7 @@ "p2/p2-plus": true, "pattern-assembler/client-side-render": true, "pattern-assembler/logged-out-showcase": false, + "pattern-assembler/write-flow": false, "plans/personal-plan": true, "plans/pro-plan": false, "plans/starter-plan": false, diff --git a/config/stage.json b/config/stage.json index 139c70a1d9edd..774ce83d4c3b2 100644 --- a/config/stage.json +++ b/config/stage.json @@ -94,6 +94,7 @@ "page/export": true, "pattern-assembler/client-side-render": true, "pattern-assembler/logged-out-showcase": false, + "pattern-assembler/write-flow": false, "plans/personal-plan": true, "plans/pro-plan": false, "plans/starter-plan": false, diff --git a/config/wpcalypso.json b/config/wpcalypso.json index 81b4f8c09a883..f24c421f7821e 100644 --- a/config/wpcalypso.json +++ b/config/wpcalypso.json @@ -103,6 +103,7 @@ "p2/p2-plus": true, "pattern-assembler/client-side-render": true, "pattern-assembler/logged-out-showcase": true, + "pattern-assembler/write-flow": true, "plans/personal-plan": true, "plans/pro-plan": false, "plans/starter-plan": false, diff --git a/packages/data-stores/src/site/actions.ts b/packages/data-stores/src/site/actions.ts index 06322e7ebdfac..2f27a7b20c778 100644 --- a/packages/data-stores/src/site/actions.ts +++ b/packages/data-stores/src/site/actions.ts @@ -398,9 +398,13 @@ export function createActions( clientCreds: WpcomClientCredentials ) { } const themeSetupOptions: ThemeSetupOptions = { - trim_content: true, + trim_content: options?.trimContent ?? true, }; + if ( options?.posts_source_site_id ) { + themeSetupOptions.posts_source_site_id = options.posts_source_site_id; + } + if ( verticalizable ) { themeSetupOptions.vertical_id = options?.verticalId; } diff --git a/packages/data-stores/src/site/types.ts b/packages/data-stores/src/site/types.ts index ce1ce2da06895..13cf5df7db391 100644 --- a/packages/data-stores/src/site/types.ts +++ b/packages/data-stores/src/site/types.ts @@ -472,6 +472,7 @@ export interface ThemeSetupOptions { pattern_ids?: number[] | string[]; header_pattern_ids?: number[] | string[]; footer_pattern_ids?: number[] | string[]; + posts_source_site_id?: number; } export interface ActiveTheme { diff --git a/packages/design-picker/src/types.ts b/packages/design-picker/src/types.ts index dfd3dba752fdf..be3bb15a3119d 100644 --- a/packages/design-picker/src/types.ts +++ b/packages/design-picker/src/types.ts @@ -117,6 +117,8 @@ export interface DesignOptions { styleVariation?: StyleVariation; verticalId?: string; pageTemplate?: string; + trimContent?: boolean; + posts_source_site_id?: number; } export interface DesignPreviewOptions {