- { __( 'How would you like to sound?', 'woocommerce' ) } + { __( + 'Which writing style do you prefer?', + 'woocommerce' + ) }
{ choices.map( ( { title, subtitle, key } ) => {
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts
index 5fa682b0aee..2eaba5f279b 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts
@@ -200,11 +200,14 @@ const colorChoices: ColorPalette[] = [
];
const allowedNames: string[] = colorChoices.map( ( palette ) => palette.name );
const hexColorRegex = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
+const colorPaletteNameValidator = z
+ .string()
+ .refine( ( name ) => allowedNames.includes( name ), {
+ message: 'Color palette not part of allowed list',
+ } );
export const colorPaletteValidator = z.object( {
- name: z.string().refine( ( name ) => allowedNames.includes( name ), {
- message: 'Color palette not part of allowed list',
- } ),
+ name: colorPaletteNameValidator,
primary: z
.string()
.regex( hexColorRegex, { message: 'Invalid primary color' } ),
@@ -219,6 +222,11 @@ export const colorPaletteValidator = z.object( {
.regex( hexColorRegex, { message: 'Invalid background color' } ),
} );
+export const colorPaletteResponseValidator = z.object( {
+ default: colorPaletteNameValidator,
+ bestColors: z.array( colorPaletteNameValidator ).length( 8 ),
+} );
+
export const defaultColorPalette = {
queryId: 'default_color_palette',
@@ -226,8 +234,8 @@ export const defaultColorPalette = {
version: '2023-09-18',
prompt: ( businessDescription: string, look: string, tone: string ) => {
return `
- You are a WordPress theme expert. Analyse the following store description, merchant's chosen look and tone, and determine the most appropriate color scheme.
- Respond only with one color scheme and only its JSON.
+ You are a WordPress theme expert. Analyse the following store description, merchant's chosen look and tone, and determine the most appropriate color scheme, along with 8 best alternatives.
+ Respond in the form: "{ default: "palette name", bestColors: [ "palette name 1", "palette name 2", "palette name 3", "palette name 4", "palette name 5", "palette name 6", "palette name 7", "palette name 8" ] }"
Chosen look and tone: ${ look } look, ${ tone } tone.
Business description: ${ businessDescription }
@@ -236,5 +244,5 @@ export const defaultColorPalette = {
${ JSON.stringify( colorChoices ) }
`;
},
- responseValidation: colorPaletteValidator.parse,
+ responseValidation: colorPaletteResponseValidator.parse,
};
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/fontPairings.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/fontPairings.ts
new file mode 100644
index 00000000000..e8af1cb7549
--- /dev/null
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/fontPairings.ts
@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import { z } from 'zod';
+
+/** This block below was generated by ChatGPT using GPT-4 on 2023-09-18 */
+/** Original source: plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts */
+const fontChoices = [
+ {
+ pair_name: 'Bodoni Moda + Overpass',
+ fonts: {
+ 'Bodoni Moda':
+ 'A modern serif font with high contrast between thick and thin lines, commonly used for headings.',
+ Overpass:
+ 'A clean, modern sans-serif, originally inspired by Highway Gothic. Good for text and UI elements.',
+ },
+ settings:
+ 'Overpass is used for buttons and general typography, while Bodoni Moda is specified for headings and some core blocks like site title and post navigation link.',
+ },
+ {
+ pair_name: 'Commissioner + Crimson Pro',
+ fonts: {
+ Commissioner:
+ 'A low-contrast, geometric sans-serif, designed for legibility and readability in long texts.',
+ 'Crimson Pro':
+ 'A serif typeface designed for readability and long-form text.',
+ },
+ settings:
+ 'Commissioner dominates elements like buttons, headings, and core blocks, while Crimson Pro is set for general typography.',
+ },
+ {
+ pair_name: 'Libre Baskerville + DM Sans',
+ fonts: {
+ 'Libre Baskerville':
+ 'A serif typeface with a classic feel, good for long reading and often used for body text in books.',
+ 'DM Sans':
+ 'A clean, geometric sans-serif, often used for UI and short text.',
+ },
+ settings:
+ 'Libre Baskerville is used for headings and core blocks, whereas DM Sans is used for buttons and general typography.',
+ },
+ {
+ pair_name: 'Libre Franklin + EB Garamond',
+ fonts: {
+ 'Libre Franklin':
+ 'A sans-serif that offers readability, suitable for both text and display.',
+ 'EB Garamond':
+ "A revival of the classical 'Garamond' typefaces, suitable for long-form text.",
+ },
+ settings:
+ 'Libre Franklin is predominantly used for elements like buttons, headings, and core blocks. EB Garamond is set for general typography.',
+ },
+ {
+ pair_name: 'Montserrat + Arvo',
+ fonts: {
+ Montserrat:
+ 'A geometric sans-serif, popular for its modern clean lines.',
+ Arvo: 'A slab-serif font with a more traditional feel, suitable for print and screen.',
+ },
+ settings:
+ 'Montserrat is used for buttons, headings, and core blocks. Arvo is used for general typography.',
+ },
+ {
+ pair_name: 'Playfair Display + Fira Sans',
+ fonts: {
+ 'Playfair Display':
+ 'A high-contrast serif designed for headings and offers a modern take on older serif fonts.',
+ 'Fira Sans':
+ 'A sans-serif designed for readability at small sizes, making it suitable for both UI and text.',
+ },
+ settings:
+ 'Playfair Display is used in italics for headings and core blocks, while Fira Sans is used for buttons and general typography.',
+ },
+ {
+ pair_name: 'Rubik + Inter',
+ fonts: {
+ Rubik: 'A sans-serif with slightly rounded corners, designed for a softer, more modern look.',
+ Inter: 'A highly legible sans-serif, optimized for UI design.',
+ },
+ settings:
+ 'Rubik is applied for headings and core blocks. Inter is used for buttons and general typography.',
+ },
+ {
+ pair_name: 'Space Mono + Roboto',
+ fonts: {
+ 'Space Mono': 'A monospace typeface with a futuristic vibe.',
+ Roboto: 'A neo-grotesque sans-serif, known for its flexibility and modern design.',
+ },
+ settings:
+ 'Space Mono is used for headings, while Roboto takes care of buttons and general typography.',
+ },
+];
+
+const allowedFontChoices = fontChoices.map( ( config ) => config.pair_name );
+
+export const fontChoiceValidator = z.object( {
+ pair_name: z
+ .string()
+ .refine( ( name ) => allowedFontChoices.includes( name ), {
+ message: 'Font choice not part of allowed list',
+ } ),
+} );
+
+export const fontPairings = {
+ queryId: 'font_pairings',
+ version: '2023-09-18',
+ prompt: ( businessDescription: string, look: string, tone: string ) => {
+ return `
+ You are a WordPress theme expert. Analyse the following store description, merchant's chosen look and tone, and determine the most appropriate font pairing.
+ Respond only with one font pairing and and in the format: '{"pair_name":"font 1 + font 2"}'.
+
+ Chosen look and tone: ${ look } look, ${ tone } tone.
+ Business description: ${ businessDescription }
+
+ Font pairings to choose from:
+ ${ JSON.stringify( fontChoices ) }
+ `;
+ },
+ responseValidation: fontChoiceValidator.parse,
+};
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/index.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/index.ts
index ee134ed5941..b0533ec1dc8 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/index.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/index.ts
@@ -1,2 +1,3 @@
export * from './colorChoices';
export * from './lookAndTone';
+export * from './fontPairings';
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.test.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts
similarity index 55%
rename from plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.test.ts
rename to plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts
index 91c7d0df06e..d1aae496b45 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.test.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts
@@ -1,9 +1,9 @@
/**
* Internal dependencies
*/
-import { defaultColorPalette } from '.';
+import { colorPaletteValidator, defaultColorPalette } from '..';
-describe( 'colorPairing.responseValidation', () => {
+describe( 'colorPaletteValidator', () => {
it( 'should validate a correct color palette', () => {
const validPalette = {
name: 'Ancient Bronze',
@@ -13,8 +13,7 @@ describe( 'colorPairing.responseValidation', () => {
background: '#ffffff',
};
- const parsedResult =
- defaultColorPalette.responseValidation( validPalette );
+ const parsedResult = colorPaletteValidator.parse( validPalette );
expect( parsedResult ).toEqual( validPalette );
} );
@@ -26,7 +25,7 @@ describe( 'colorPairing.responseValidation', () => {
foreground: '#11163d',
background: '#ffffff',
};
- expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ expect( () => colorPaletteValidator.parse( invalidPalette ) )
.toThrowErrorMatchingInlineSnapshot( `
"[
{
@@ -48,7 +47,7 @@ describe( 'colorPairing.responseValidation', () => {
foreground: '#11163d',
background: '#ffffff',
};
- expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ expect( () => colorPaletteValidator.parse( invalidPalette ) )
.toThrowErrorMatchingInlineSnapshot( `
"[
{
@@ -71,7 +70,7 @@ describe( 'colorPairing.responseValidation', () => {
foreground: '#11163d',
background: '#ffffff',
};
- expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ expect( () => colorPaletteValidator.parse( invalidPalette ) )
.toThrowErrorMatchingInlineSnapshot( `
"[
{
@@ -94,7 +93,7 @@ describe( 'colorPairing.responseValidation', () => {
foreground: '#invalid_color',
background: '#ffffff',
};
- expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ expect( () => colorPaletteValidator.parse( invalidPalette ) )
.toThrowErrorMatchingInlineSnapshot( `
"[
{
@@ -125,7 +124,7 @@ describe( 'colorPairing.responseValidation', () => {
foreground: '#11163d',
background: '#fffff',
};
- expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ expect( () => colorPaletteValidator.parse( invalidPalette ) )
.toThrowErrorMatchingInlineSnapshot( `
"[
{
@@ -140,3 +139,100 @@ describe( 'colorPairing.responseValidation', () => {
` );
} );
} );
+
+describe( 'colorPaletteResponseValidator', () => {
+ it( 'should validate a correct color palette response', () => {
+ const validPalette = {
+ default: 'Ancient Bronze',
+ bestColors: Array( 8 ).fill( 'Ancient Bronze' ),
+ };
+
+ const parsedResult =
+ defaultColorPalette.responseValidation( validPalette );
+ expect( parsedResult ).toEqual( validPalette );
+ } );
+
+ it( 'should fail if array contains invalid color', () => {
+ const invalidPalette = {
+ default: 'Ancient Bronze',
+ bestColors: Array( 7 )
+ .fill( 'Ancient Bronze' )
+ .concat( [ 'Invalid Color' ] ),
+ };
+ expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ .toThrowErrorMatchingInlineSnapshot( `
+ "[
+ {
+ \\"code\\": \\"custom\\",
+ \\"message\\": \\"Color palette not part of allowed list\\",
+ \\"path\\": [
+ \\"bestColors\\",
+ 7
+ ]
+ }
+ ]"
+ ` );
+ } );
+
+ it( 'should fail if bestColors property is missing', () => {
+ const invalidPalette = {
+ default: 'Ancient Bronze',
+ };
+ expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ .toThrowErrorMatchingInlineSnapshot( `
+ "[
+ {
+ \\"code\\": \\"invalid_type\\",
+ \\"expected\\": \\"array\\",
+ \\"received\\": \\"undefined\\",
+ \\"path\\": [
+ \\"bestColors\\"
+ ],
+ \\"message\\": \\"Required\\"
+ }
+ ]"
+ ` );
+ } );
+ it( 'should fail if default property is missing', () => {
+ const invalidPalette = {
+ bestColors: Array( 8 ).fill( 'Ancient Bronze' ),
+ };
+ expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ .toThrowErrorMatchingInlineSnapshot( `
+ "[
+ {
+ \\"code\\": \\"invalid_type\\",
+ \\"expected\\": \\"string\\",
+ \\"received\\": \\"undefined\\",
+ \\"path\\": [
+ \\"default\\"
+ ],
+ \\"message\\": \\"Required\\"
+ }
+ ]"
+ ` );
+ } );
+
+ it( 'should fail if bestColors array is not of length 8', () => {
+ const invalidPalette = {
+ default: 'Ancient Bronze',
+ bestColors: Array( 7 ).fill( 'Ancient Bronze' ),
+ };
+ expect( () => defaultColorPalette.responseValidation( invalidPalette ) )
+ .toThrowErrorMatchingInlineSnapshot( `
+ "[
+ {
+ \\"code\\": \\"too_small\\",
+ \\"minimum\\": 8,
+ \\"type\\": \\"array\\",
+ \\"inclusive\\": true,
+ \\"exact\\": true,
+ \\"message\\": \\"Array must contain exactly 8 element(s)\\",
+ \\"path\\": [
+ \\"bestColors\\"
+ ]
+ }
+ ]"
+ ` );
+ } );
+} );
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/fontPairings.test.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/fontPairings.test.ts
new file mode 100644
index 00000000000..dfb132a8e24
--- /dev/null
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/fontPairings.test.ts
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import { fontChoiceValidator } from '..';
+
+describe( 'fontChoiceValidator', () => {
+ it( 'should validate when font choice is part of the allowed list', () => {
+ const validFontChoice = { pair_name: 'Montserrat + Arvo' };
+ expect( () =>
+ fontChoiceValidator.parse( validFontChoice )
+ ).not.toThrow();
+ } );
+
+ it( 'should not validate when font choice is not part of the allowed list', () => {
+ const invalidFontChoice = { pair_name: 'Comic Sans' };
+ expect( () => fontChoiceValidator.parse( invalidFontChoice ) )
+ .toThrowErrorMatchingInlineSnapshot( `
+ "[
+ {
+ \\"code\\": \\"custom\\",
+ \\"message\\": \\"Font choice not part of allowed list\\",
+ \\"path\\": [
+ \\"pair_name\\"
+ ]
+ }
+ ]"
+ ` );
+ } );
+
+ it( 'should not validate when pair_name is not a string', () => {
+ const invalidType = { pair_name: 123 };
+ expect( () => fontChoiceValidator.parse( invalidType ) )
+ .toThrowErrorMatchingInlineSnapshot( `
+ "[
+ {
+ \\"code\\": \\"invalid_type\\",
+ \\"expected\\": \\"string\\",
+ \\"received\\": \\"number\\",
+ \\"path\\": [
+ \\"pair_name\\"
+ ],
+ \\"message\\": \\"Expected string, received number\\"
+ }
+ ]"
+ ` );
+ } );
+} );
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/lookAndTone.test.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/lookAndTone.test.ts
similarity index 89%
rename from plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/lookAndTone.test.ts
rename to plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/lookAndTone.test.ts
index cea15cc91b2..a5957d25a3e 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/lookAndTone.test.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/lookAndTone.test.ts
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import { LookAndToneCompletionResponse } from '../types';
-import { lookAndTone } from '.';
+import { LookAndToneCompletionResponse } from '../../types';
+import { lookAndTone } from '..';
describe( 'parseLookAndToneCompletionResponse', () => {
it( 'should return a valid object when given valid JSON', () => {
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx
index 58dd0367583..50bc7fb8298 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/state-machine.tsx
@@ -10,7 +10,8 @@ import { getQuery } from '@woocommerce/navigation';
import {
designWithAiStateMachineContext,
designWithAiStateMachineEvents,
- ColorPalette,
+ FontPairing,
+ ColorPaletteResponse,
} from './types';
import {
BusinessInfoDescription,
@@ -20,7 +21,7 @@ import {
} from './pages';
import { actions } from './actions';
import { services } from './services';
-import { defaultColorPalette } from './prompts';
+import { defaultColorPalette, fontPairings } from './prompts';
export const hasStepInUrl = (
_ctx: unknown,
@@ -69,7 +70,8 @@ export const designWithAiStateMachineDefinition = createMachine(
choice: '',
},
aiSuggestions: {
- defaultColorPalette: {} as ColorPalette,
+ defaultColorPalette: {} as ColorPaletteResponse,
+ fontPairing: '' as FontPairing[ 'pair_name' ],
},
},
initial: 'navigate',
@@ -291,6 +293,25 @@ export const designWithAiStateMachineDefinition = createMachine(
},
},
},
+ chooseFontPairing: {
+ invoke: {
+ src: 'queryAiEndpoint',
+ data: ( context ) => {
+ return {
+ ...fontPairings,
+ prompt: fontPairings.prompt(
+ context.businessInfoDescription
+ .descriptionText,
+ context.lookAndFeel.choice,
+ context.toneOfVoice.choice
+ ),
+ };
+ },
+ onDone: {
+ actions: [ 'assignFontPairing' ],
+ },
+ },
+ },
},
},
postApiCallLoader: {},
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts
index 743d094d1c4..a639755078e 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/types.ts
@@ -5,7 +5,11 @@ import { z } from 'zod';
/**
* Internal dependencies
*/
-import { colorPaletteValidator } from './prompts';
+import {
+ colorPaletteValidator,
+ colorPaletteResponseValidator,
+ fontChoiceValidator,
+} from './prompts';
export type designWithAiStateMachineContext = {
businessInfoDescription: {
@@ -18,7 +22,8 @@ export type designWithAiStateMachineContext = {
choice: Tone | '';
};
aiSuggestions: {
- defaultColorPalette: ColorPalette;
+ defaultColorPalette: ColorPaletteResponse;
+ fontPairing: FontPairing[ 'pair_name' ];
};
// If we require more data from options, previously provided core profiler details,
// we can retrieve them in preBusinessInfoDescription and then assign them here
@@ -50,3 +55,8 @@ export interface LookAndToneCompletionResponse {
}
export type ColorPalette = z.infer< typeof colorPaletteValidator >;
+export type ColorPaletteResponse = z.infer<
+ typeof colorPaletteResponseValidator
+>;
+
+export type FontPairing = z.infer< typeof fontChoiceValidator >;
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
index 9e06b0e8c77..c498a3667bb 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
@@ -1,8 +1,17 @@
+/**
+ * External dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
+
/**
* Internal dependencies
*/
import { CustomizeStoreComponent } from '../types';
+import './intro.scss';
+
export type events =
| { type: 'DESIGN_WITH_AI' }
| { type: 'CLICKED_ON_BREADCRUMB' }
@@ -15,33 +24,106 @@ export * as services from './services';
export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
const {
- intro: { themeCards, activeTheme },
+ intro: { themeCards },
} = context;
+
return (
<>
-
-
-
-
- ),
- visible: this.stepVisibility.import,
- },
- {
- key: 'homepage',
- label: __( 'Create a custom homepage', 'woocommerce' ),
- description: __(
- 'Create a new homepage and customize it to suit your needs',
- 'woocommerce'
- ),
- content: (
-
-
-
-
- ),
- visible: this.stepVisibility.homepage,
- },
- {
- key: 'logo',
- label: __( 'Upload a logo', 'woocommerce' ),
- description: __(
- 'Ensure your store is on-brand by adding your logo',
- 'woocommerce'
- ),
- content: isPending ? null : (
-
-
- this.setState( { isDirty: true, logo: image } )
- }
- />
-
-
-
- ),
- visible: this.stepVisibility.logo,
- },
- {
- key: 'notice',
- label: __( 'Set a store notice', 'woocommerce' ),
- description: __(
- 'Optionally display a prominent notice across all pages of your store',
- 'woocommerce'
- ),
- content: (
-
-
- this.setState( { storeNoticeText: value } )
- }
- />
-
-
- ),
- visible: true,
- },
- ];
-
- return filter( steps, ( step ) => step.visible );
- }
-
- render() {
- const { isPending, stepIndex, isUpdatingLogo, isUpdatingNotice } =
- this.state;
- const currentStep = this.getSteps()[ stepIndex ].key;
-
- return (
-
+ { ( { defaultTaskItem: DefaultTaskItem } ) => (
+
+ );
+};
registerPlugin( 'wc-admin-onboarding-task-appearance', {
scope: 'woocommerce-tasks',
- render: () => (
-
- { ( { onComplete, task } ) => (
-
- ),
+ render: () =>
Intro
-Active theme: { activeTheme }
- { themeCards?.map( ( themeCard ) => (
-
- ) ) }
-
-
+
+
+
+ { 'Site title' }
+
+
);
};
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro.scss b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss
new file mode 100644
index 00000000000..c579d9295a0
--- /dev/null
+++ b/plugins/woocommerce-admin/client/customize-store/intro/intro.scss
@@ -0,0 +1,155 @@
+.woocommerce-profile-wizard__container {
+ display: flex;
+ flex-direction: column;
+
+ button {
+ cursor: pointer;
+ }
+}
+
+.woocommerce-customize-store-header {
+ min-height: 64px;
+ padding: 1rem;
+ width: 100%;
+
+ h1 {
+ font-size: 0.8125rem;
+ font-weight: 500;
+ margin: 0;
+ padding: 0;
+ line-height: 1.5rem;
+ }
+
+}
+
+.woocommerce-customize-store-container {
+ display: flex;
+ flex-direction: row;
+}
+
+.woocommerce-customize-store-sidebar {
+ flex: 0 0 380px;
+ padding: 1rem;
+
+ .woocommerce-customize-store-sidebar__title {
+ color: #1e1e1e;
+ font-size: 1rem;
+ font-weight: 600;
+ margin: 0;
+ padding: 0;
+ line-height: 2.5;
+ }
+
+ button {
+ background-color: transparent;
+ border: none;
+ line-height: 1;
+ padding-right: 0;
+ vertical-align: middle;
+ }
+
+ svg {
+ color: inherit;
+ height: 24px;
+ width: 24px;
+ margin: 0.25rem;
+ }
+
+ p {
+ padding: 0 1rem;
+ color: #757575;
+ max-width: 20rem;
+ }
+}
+
+.woocommerce-customize-store-main {
+ margin-right: 2.5rem;
+
+ p {
+ color: #2f2f2f;
+ font-size: 1rem;
+ line-height: 1.5;
+ margin-bottom: 1.5rem;
+ }
+}
+
+.woocommerce-customize-store-banner {
+ background: var(--woo-purple-woo-purple-0, #f2edff);
+ background-image: url(../assets/images/banner-design-with-ai.svg);
+ background-repeat: no-repeat;
+ background-position: bottom right;
+ background-size: contain;
+ border-radius: 4px;
+ display: flex;
+ margin: 1.25rem 0 3.375rem;
+ min-height: 343px;
+ padding: 70px 0;
+ width: 820px;
+
+ .woocommerce-customize-store-banner-content {
+ width: 345px;
+ margin-left: 50px;
+
+ h1 {
+ font-size: 1.5rem;
+ line-height: 1.33;
+ }
+
+ p {
+ margin: 1rem 0 2rem 0;
+ }
+
+ button {
+ background-color: #3858e9;
+ border: none;
+ border-radius: 2px;
+ color: #fff;
+ display: inline-block;
+ line-height: 1.25rem;
+ padding: 10px 15px;
+
+ &:hover {
+ background-color: #2234e0;
+ }
+ }
+
+ }
+}
+
+.woocommerce-customize-store-theme-cards {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+ max-width: 820px;
+
+ .theme-card {
+ flex-basis: 45%;
+
+ img {
+ border-radius: 4px;
+ border: 1px solid #e9e9e9;
+ width: 394px;
+ }
+
+ .theme-card__title {
+ font-size: 1rem;
+ font-weight: 600;
+ margin: 1.5rem 0 0.5rem;
+ }
+ }
+}
+
+.woocommerce-customize-store-browse-themes {
+ text-align: center;
+
+ button {
+ background-color: #fff;
+ border: 1px solid #3858e9;
+ border-radius: 2px;
+ color: #3858e9;
+ display: inline-block;
+ font-size: 0.8125rem;
+ margin: 3.75rem 0;
+ padding: 0.5rem 0.75rem;
+ }
+}
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/services.ts b/plugins/woocommerce-admin/client/customize-store/intro/services.ts
index 37c282ab5a4..5fa170f3e9f 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/services.ts
+++ b/plugins/woocommerce-admin/client/customize-store/intro/services.ts
@@ -3,12 +3,55 @@
export const fetchThemeCards = async () => {
return [
{
+ slug: 'twentytwentyone',
name: 'Twenty Twenty One',
description: 'The default theme for WordPress.',
+ image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/pub/twentytwentyone/screenshot.png',
+ styleVariations: [],
},
{
+ slug: 'twentytwenty',
name: 'Twenty Twenty',
description: 'The previous default theme for WordPress.',
+ image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/pub/twentytwenty/screenshot.png',
+ styleVariations: [],
+ },
+ {
+ slug: 'tsubaki',
+ name: 'Tsubaki',
+ description:
+ 'Tsubaki puts the spotlight on your products and your customers. This theme leverages WooCommerce to provide you with intuitive product navigation and the patterns you need to master digital merchandising.',
+ image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/tsubaki/screenshot.png',
+ styleVariations: [],
+ },
+ {
+ slug: 'winkel',
+ name: 'Winkel',
+ description:
+ 'Winkel is a minimal, product-focused theme featuring Payments block. Its clean, cool look combined with a simple layout makes it perfect for showcasing fashion items – clothes, shoes, and accessories.',
+ image: 'https://i0.wp.com/s2.wp.com/wp-content/themes/pub/winkel/screenshot.png',
+ styleVariations: [
+ {
+ title: 'Default',
+ primary: '#ffffff',
+ secondary: '#676767',
+ },
+ {
+ title: 'Charcoal',
+ primary: '#1f2527',
+ secondary: '#9fd3e8',
+ },
+ {
+ title: 'Rainforest',
+ primary: '#eef4f7',
+ secondary: '#35845d',
+ },
+ {
+ title: 'Ruby Wine',
+ primary: '#ffffff',
+ secondary: '#c8133e',
+ },
+ ],
},
];
};
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/theme-cards.tsx b/plugins/woocommerce-admin/client/customize-store/intro/theme-cards.tsx
index a67b23534ae..7c8ca0f7ea3 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/theme-cards.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/intro/theme-cards.tsx
@@ -1,6 +1,9 @@
export type ThemeCard = {
// placeholder props, possibly take reference from https://github.com/Automattic/wp-calypso/blob/1f1b79210c49ef0d051f8966e24122229a334e29/packages/design-picker/src/components/theme-card/index.tsx#L32
+ slug: string;
name: string;
description: string;
image: string;
+ isActive: boolean;
+ styleVariations: string[];
};
diff --git a/plugins/woocommerce-admin/client/customize-store/style.scss b/plugins/woocommerce-admin/client/customize-store/style.scss
index b6fb0524d48..66e6c91a481 100644
--- a/plugins/woocommerce-admin/client/customize-store/style.scss
+++ b/plugins/woocommerce-admin/client/customize-store/style.scss
@@ -20,6 +20,10 @@
body.woocommerce-customize-store.js.is-fullscreen-mode {
margin-top: 0 !important;
height: 100%;
+
+ & > div.tour-kit.woocommerce-tour-kit > div > div.tour-kit-spotlight.is-visible {
+ outline: 99999px solid rgba(0, 0, 0, 0.15);
+ }
}
.woocommerce-cys-layout {
@@ -78,7 +82,7 @@ body.woocommerce-customize-store.js.is-fullscreen-mode {
padding: 12px;
width: 404px;
border-radius: 2px;
- background: var(--gutenberg-transparent-blueberry, rgba(56, 88, 233, 0.04));
+ background: var(--wp-admin-theme-color-background-04, rgba(168, 168, 170, 0.301));
color: var(--gutenberg-gray-800, #2f2f2f);
p {
diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js
index 9feefdbba9e..07a2190c324 100644
--- a/plugins/woocommerce-admin/client/index.js
+++ b/plugins/woocommerce-admin/client/index.js
@@ -19,6 +19,7 @@ import { EmbeddedBodyLayout } from './embedded-body-layout';
import { WcAdminPaymentsGatewaysBannerSlot } from './payments/payments-settings-banner-slotfill';
import { WcAdminConflictErrorSlot } from './settings/conflict-error-slotfill.js';
import './xstate.js';
+import { deriveWpAdminBackgroundColours } from './utils/derive-wp-admin-background-colours';
// Modify webpack pubilcPath at runtime based on location of WordPress Plugin.
// eslint-disable-next-line no-undef,camelcase
@@ -48,6 +49,8 @@ const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
const settingsGroup = 'wc_admin';
const hydrateUser = getAdminSetting( 'currentUserData' );
+deriveWpAdminBackgroundColours();
+
if ( appRoot ) {
let HydratedPageLayout = withSettingsHydration(
settingsGroup,
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/appearance.js b/plugins/woocommerce-admin/client/task-lists/fills/appearance.js
index bdc9a0f48d2..095f1c9b9b3 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/appearance.js
+++ b/plugins/woocommerce-admin/client/task-lists/fills/appearance.js
@@ -1,431 +1,36 @@
/**
* External dependencies
*/
-import { __ } from '@wordpress/i18n';
-import apiFetch from '@wordpress/api-fetch';
-import { Button, Card, CardBody } from '@wordpress/components';
-import { Component, Fragment } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
-import { filter } from 'lodash';
-import { withDispatch, withSelect } from '@wordpress/data';
-
-import { Stepper, TextControl, ImageUpload } from '@woocommerce/components';
-import {
- OPTIONS_STORE_NAME,
- ONBOARDING_STORE_NAME,
- WC_ADMIN_NAMESPACE,
-} from '@woocommerce/data';
-import { queueRecordEvent, recordEvent } from '@woocommerce/tracks';
+import React from 'react';
+import { WooOnboardingTaskListItem } from '@woocommerce/onboarding';
import { registerPlugin } from '@wordpress/plugins';
-import { WooOnboardingTask } from '@woocommerce/onboarding';
+import { getAdminLink } from '@woocommerce/settings';
-/**
- * Internal dependencies
- */
-class Appearance extends Component {
- constructor( props ) {
- super( props );
- const { hasHomepage, hasProducts, supportCustomLogo } =
- props.task.additionalData;
-
- this.stepVisibility = {
- homepage: ! hasHomepage,
- import: ! hasProducts,
- logo: supportCustomLogo,
- };
-
- this.state = {
- isDirty: false,
- isPending: false,
- logo: null,
- stepIndex: 0,
- isUpdatingLogo: false,
- isUpdatingNotice: false,
- storeNoticeText: props.demoStoreNotice || '',
- };
-
- this.completeStep = this.completeStep.bind( this );
- this.createHomepage = this.createHomepage.bind( this );
- this.importProducts = this.importProducts.bind( this );
- this.updateLogo = this.updateLogo.bind( this );
- this.updateNotice = this.updateNotice.bind( this );
- }
-
- componentDidMount() {
- const { themeMods } = this.props.task.additionalData;
-
- if ( themeMods && themeMods.custom_logo ) {
- /* eslint-disable react/no-did-mount-set-state */
- this.setState( { logo: { id: themeMods.custom_logo } } );
- /* eslint-enable react/no-did-mount-set-state */
- }
- }
-
- componentDidUpdate( prevProps ) {
- const { isPending, logo } = this.state;
- const { demoStoreNotice } = this.props;
-
- if ( logo && ! logo.url && ! isPending ) {
- /* eslint-disable react/no-did-update-set-state */
- this.setState( { isPending: true } );
- wp.media
- .attachment( logo.id )
- .fetch()
- .then( () => {
- const logoUrl = wp.media.attachment( logo.id ).get( 'url' );
- this.setState( {
- isPending: false,
- logo: { id: logo.id, url: logoUrl },
- } );
- } );
- /* eslint-enable react/no-did-update-set-state */
- }
-
- if (
- demoStoreNotice &&
- prevProps.demoStoreNotice !== demoStoreNotice
- ) {
- /* eslint-disable react/no-did-update-set-state */
- this.setState( {
- storeNoticeText: demoStoreNotice,
- } );
- /* eslint-enable react/no-did-update-set-state */
- }
- }
-
- async completeStep() {
- const { stepIndex } = this.state;
- const { actionTask, onComplete } = this.props;
- const nextStep = this.getSteps()[ stepIndex + 1 ];
-
- if ( nextStep ) {
- this.setState( { stepIndex: stepIndex + 1 } );
- } else {
- this.setState( { isPending: true } );
- await actionTask( 'appearance' );
- onComplete();
- }
- }
-
- importProducts() {
- const { createNotice } = this.props;
- this.setState( { isPending: true } );
-
- recordEvent( 'tasklist_appearance_import_demo', {} );
-
- apiFetch( {
- path: `${ WC_ADMIN_NAMESPACE }/onboarding/tasks/import_sample_products`,
- method: 'POST',
- } )
- .then( ( result ) => {
- if ( result.failed && result.failed.length ) {
- createNotice(
- 'error',
- __(
- 'There was an error importing some of the sample products',
- 'woocommerce'
- )
- );
- } else {
- createNotice(
- 'success',
- __(
- 'All sample products have been imported',
- 'woocommerce'
- )
- );
- }
-
- this.setState( { isPending: false } );
- this.completeStep();
- } )
- .catch( ( { message } ) => {
- createNotice(
- 'error',
- message ||
- __(
- 'There was an error importing the sample products',
- 'woocommerce'
- ),
- { __unstableHTML: true }
- );
- this.setState( { isPending: false } );
- } );
- }
-
- createHomepage() {
- const { createNotice } = this.props;
- this.setState( { isPending: true } );
-
- recordEvent( 'tasklist_appearance_create_homepage', {
- create_homepage: true,
- } );
-
- apiFetch( {
- path: '/wc-admin/onboarding/tasks/create_homepage',
- method: 'POST',
- } )
- .then( ( response ) => {
- createNotice( response.status, response.message, {
- actions: response.edit_post_link
- ? [
- {
- label: __( 'Customize', 'woocommerce' ),
- onClick: () => {
- queueRecordEvent(
- 'tasklist_appearance_customize_homepage',
- {}
- );
- window.location = `${ response.edit_post_link }&wc_onboarding_active_task=appearance`;
- },
- },
- ]
- : null,
- } );
-
- this.setState( { isPending: false } );
- this.completeStep();
- } )
- .catch( ( error ) => {
- createNotice( 'error', error.message );
- this.setState( { isPending: false } );
- } );
- }
-
- async updateLogo() {
- const { createNotice, task, updateOptions } = this.props;
- const { stylesheet, themeMods } = task.additionalData;
- const { logo } = this.state;
- const updatedThemeMods = {
- ...themeMods,
- custom_logo: logo ? logo.id : null,
- };
-
- recordEvent( 'tasklist_appearance_upload_logo' );
-
- this.setState( { isUpdatingLogo: true } );
- const update = await updateOptions( {
- [ `theme_mods_${ stylesheet }` ]: updatedThemeMods,
- } );
-
- if ( update.success ) {
- this.setState( { isUpdatingLogo: false } );
- createNotice(
- 'success',
- __( 'Store logo updated successfully', 'woocommerce' )
- );
- this.completeStep();
- } else {
- createNotice( 'error', update.message );
- }
- }
-
- async updateNotice() {
- const { createNotice, updateOptions } = this.props;
- const { storeNoticeText } = this.state;
-
- recordEvent( 'tasklist_appearance_set_store_notice', {
- added_text: Boolean( storeNoticeText.length ),
- } );
-
- this.setState( { isUpdatingNotice: true } );
- const update = await updateOptions( {
- woocommerce_demo_store: storeNoticeText.length ? 'yes' : 'no',
- woocommerce_demo_store_notice: storeNoticeText,
- } );
-
- if ( update.success ) {
- this.setState( { isUpdatingNotice: false } );
- createNotice(
- 'success',
- __(
- "🎨 Your store is looking great! Don't forget to continue personalizing it",
- 'woocommerce'
- )
- );
- this.completeStep();
- } else {
- createNotice( 'error', update.message );
- }
- }
-
- getSteps() {
- const { isDirty, isPending, logo, storeNoticeText, isUpdatingLogo } =
- this.state;
-
- const steps = [
- {
- key: 'import',
- label: __( 'Import sample products', 'woocommerce' ),
- description: __(
- 'We’ll add some products that will make it easier to see what your store looks like',
- 'woocommerce'
- ),
- content: (
-
+
+
+
+
+ { __( 'Customize your store', 'woocommerce' ) }
+
+ + { __( + 'Create a store that reflects your brand and business. Select one of our professionally designed themes to customize, or create your own using AI.', + 'woocommerce' + ) } +
+
+
+
+
+
+
+
+ + { __( + 'Use the power of AI to design your store', + 'woocommerce' + ) } +
++ { __( + 'Design the look of your store, create pages, and generate copy using our built-in AI tools.', + 'woocommerce' + ) } +
+ ++ { __( + 'Or select a professionally designed theme to customize and make your own.', + 'woocommerce' + ) } +
+ +
+ { themeCards?.map( ( themeCard ) => (
+
+
+
+
+ ) ) }
+
+ 
+
+ + { themeCard.name } +
+
+
+
+
+
+
-
-
-
-
-
+const useAppearanceClick = () => {
+ const onClick = () => {
+ window.location = getAdminLink(
+ 'theme-install.php?browse=block-themes'
);
- }
-}
+ };
-const AppearanceWrapper = compose(
- withSelect( ( select ) => {
- const { getOption } = select( OPTIONS_STORE_NAME );
+ return { onClick };
+};
- return {
- demoStoreNotice: getOption( 'woocommerce_demo_store_notice' ),
- };
- } ),
- withDispatch( ( dispatch ) => {
- const { createNotice } = dispatch( 'core/notices' );
- const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
- const { actionTask } = dispatch( ONBOARDING_STORE_NAME );
-
- return {
- actionTask,
- createNotice,
- updateOptions,
- };
- } )
-)( Appearance );
+const AppearanceFill = () => {
+ const { onClick } = useAppearanceClick();
+ return (
+