From 0c02a500f3fe0f8428f6c2114c5fb52581a5b0a3 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 1 Apr 2020 23:28:53 +0200 Subject: [PATCH 1/4] Set base to base --- .../gutenboarding/onboarding-block/style-preview/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx index 06ab4ca153c66d..46bf670621ffd9 100644 --- a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx +++ b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx @@ -121,7 +121,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => { setRequestedFonts( nextFonts ); } iframeDocument.body.style.setProperty( '--font-headings', headings ); - iframeDocument.body.style.setProperty( '--font-base', headings ); + iframeDocument.body.style.setProperty( '--font-base', base ); } else { iframeDocument.body.style.removeProperty( '--font-headings' ); iframeDocument.body.style.removeProperty( '--font-base' ); From b63293495f9f33e548fb2bc2e04057d74ddf1340 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 1 Apr 2020 23:32:52 +0200 Subject: [PATCH 2/4] Set default fonts on design selection --- client/landing/gutenboarding/constants.ts | 7 +++++-- .../design-selector/index.tsx | 14 +++++-------- .../style-preview/font-select.tsx | 10 ++++++--- .../gutenboarding/stores/onboard/actions.ts | 21 ++++++++++++------- 4 files changed, 31 insertions(+), 21 deletions(-) diff --git a/client/landing/gutenboarding/constants.ts b/client/landing/gutenboarding/constants.ts index bc3cf8184134da..2ee4bf5bc3070d 100644 --- a/client/landing/gutenboarding/constants.ts +++ b/client/landing/gutenboarding/constants.ts @@ -49,5 +49,8 @@ export const fontPairings = [ }, ] as const; -export type FontPair = ValuesType< typeof fontPairings >; -export type Font = FontPair[ keyof FontPair ]; +export type Font = ValuesType< ValuesType< typeof fontPairings > >; +export interface FontPair { + headings: Font; + base: Font; +} diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx index b5606bcc0eb4f1..08da10a72be0b2 100644 --- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx @@ -20,6 +20,7 @@ import { SubTitle, Title } from '../../components/titles'; import './style.scss'; +type Font = import('../../constants').Font; type Design = import('../../stores/onboard/types').Design; // Values for springs: @@ -32,11 +33,7 @@ const DesignSelector: React.FunctionComponent = () => { const { __: NO__ } = useI18n(); const { push } = useHistory(); const makePath = usePath(); - const { setSelectedDesign, resetFonts, resetOnboardStore } = useDispatch( ONBOARD_STORE ); - - const handleStartOverButtonClick = () => { - resetOnboardStore(); - }; + const { setSelectedDesign, setFonts, resetOnboardStore } = useDispatch( ONBOARD_STORE ); const getDesignUrl = ( design: Design ) => { const mshotsUrl = 'https://s.wordpress.com/mshots/v1/'; @@ -63,7 +60,7 @@ const DesignSelector: React.FunctionComponent = () => { resetOnboardStore() } to={ makePath( Step.IntentGathering ) } isLink > @@ -94,9 +91,8 @@ const DesignSelector: React.FunctionComponent = () => { onClick={ () => { setSelectedDesign( design ); - // Our design selector shows each template's default fonts, so the user expects to see those - // in the style preview. To match that expectation, we reset any previously user-selected fonts. - resetFonts(); + // Update fonts to the design defaults + setFonts( design.fonts as [ Font, Font ] ); if ( isEnabled( 'gutenboarding/style-preview' ) ) { push( makePath( Step.Style ) ); diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx index c3c72ab8ac52f3..9d063b8ea0081b 100644 --- a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx +++ b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx @@ -11,7 +11,7 @@ import { useI18n } from '@automattic/react-i18n'; /** * Internal dependencies */ -import { fontPairings, getFontTitle, FontPair } from '../../constants'; +import { fontPairings, getFontTitle, FontPair, Font } from '../../constants'; import { STORE_KEY } from '../../stores/onboard'; import designs from '../../available-designs.json'; @@ -49,8 +49,12 @@ const FontSelect: React.FunctionComponent = () => { return (
diff --git a/client/landing/gutenboarding/stores/onboard/actions.ts b/client/landing/gutenboarding/stores/onboard/actions.ts index 3df08f984bf27c..309194d243fdbf 100644 --- a/client/landing/gutenboarding/stores/onboard/actions.ts +++ b/client/landing/gutenboarding/stores/onboard/actions.ts @@ -12,11 +12,12 @@ import { Design, SiteVertical } from './types'; import { STORE_KEY as ONBOARD_STORE } from './constants'; import { SITE_STORE } from '../site'; -type State = import('.').State; -type FontPair = import('../../constants').FontPair; +type CreateSiteParams = import('@automattic/data-stores').Site.CreateSiteParams; type DomainSuggestion = DomainSuggestions.DomainSuggestion; +type Font = import('../../constants').Font; +type FontPair = import('../../constants').FontPair; +type State = import('.').State; type Template = VerticalsTemplates.Template; -type CreateSiteParams = import('@automattic/data-stores').Site.CreateSiteParams; export const setDomain = ( domain: DomainSuggestion | undefined ) => ( { type: 'SET_DOMAIN' as const, @@ -51,10 +52,16 @@ export const resetFonts = () => ( { type: 'RESET_FONTS' as const, } ); -export const setFonts = ( fonts: FontPair | undefined ) => ( { - type: 'SET_FONTS' as const, - fonts, -} ); +// Handles { headings, base } and [ headings, base ] formats +export const setFonts = ( fonts: FontPair | [ Font, Font ] | undefined ) => { + const nextFonts: FontPair | undefined = Array.isArray( fonts ) + ? { headings: fonts[ 0 ], base: fonts[ 1 ] } + : fonts; + return { + type: 'SET_FONTS' as const, + fonts: nextFonts, + }; +}; export const resetOnboardStore = () => ( { type: 'RESET_ONBOARD_STORE' as const, From 759ef15af4b943f4993f4dbef96324b283f698ef Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 2 Apr 2020 11:23:43 +0200 Subject: [PATCH 3/4] Type available-designs Better type safety Remove type cases --- .../gutenboarding/available-designs.json | 94 ------------- .../gutenboarding/available-designs.ts | 129 ++++++++++++++++++ .../design-selector/index.tsx | 9 +- .../style-preview/font-select.tsx | 20 +-- .../style-preview/preview.tsx | 8 +- .../gutenboarding/stores/onboard/actions.ts | 8 +- .../gutenboarding/stores/onboard/types.ts | 4 +- 7 files changed, 153 insertions(+), 119 deletions(-) delete mode 100644 client/landing/gutenboarding/available-designs.json create mode 100644 client/landing/gutenboarding/available-designs.ts diff --git a/client/landing/gutenboarding/available-designs.json b/client/landing/gutenboarding/available-designs.json deleted file mode 100644 index fffb760b730588..00000000000000 --- a/client/landing/gutenboarding/available-designs.json +++ /dev/null @@ -1,94 +0,0 @@ -{ - "featured": [ - { - "title": "Vesta", - "slug": "vesta", - "template": "mayland2", - "theme": "mayland", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/mayland/mayland2/", - "fonts": [ "Cabin", "Raleway" ], - "categories": [ "featured", "portfolio" ] - }, - { - "title": "WIP Event Template", - "slug": "rivington", - "template": "rivington", - "theme": "rivington", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/rivington/rivington/", - "fonts": [ "Arvo", "Montserrat" ], - "categories": [ "event" ] - }, - { - "title": "Reynolds", - "slug": "reynolds", - "template": "rockfield2", - "theme": "rockfield", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/rockfield/rockfield2/", - "fonts": [ "Playfair Display", "Fira Sans" ], - "categories": [ "featured", "portfolio" ] - }, - { - "title": "Easley", - "slug": "easley", - "template": "maywood", - "theme": "maywood", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/maywood/maywood/", - "fonts": [ "Space Mono", "Roboto" ], - "categories": [ "featured", "portfolio" ] - }, - { - "title": "Camden", - "slug": "Camden", - "template": "maywood2", - "theme": "maywood", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/maywood/maywood2/", - "fonts": [ "Space Mono", "Roboto" ], - "categories": [ "featured", "portfolio" ] - }, - { - "title": "Bowen", - "slug": "bowen", - "template": "bowen", - "theme": "coutoire", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/coutoire/bowen/", - "fonts": [ "Playfair Display", "Fira Sans" ], - "categories": [ "featured", "blog" ] - }, - { - "title": "Edison", - "slug": "edison", - "template": "stratford2", - "theme": "stratford", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/stratford/stratford2/", - "fonts": [ "Chivo", "Open Sans" ], - "categories": [ "featured", "blog" ] - }, - { - "title": "Cassel", - "slug": "cassel", - "template": "mayland", - "theme": "mayland", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/mayland/mayland/", - "fonts": [ "Playfair Display", "Fira Sans" ], - "categories": [ "featured", "blog" ] - }, - { - "title": "Overton", - "slug": "overton", - "template": "alves", - "theme": "alves", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/alves/alves/", - "fonts": [ "Cabin", "Raleway" ], - "categories": [ "featured", "business" ] - }, - { - "title": "Doyle", - "slug": "doyle", - "template": "alves2", - "theme": "alves", - "src": "https://public-api.wordpress.com/rest/v1/template/demo/alves/alves2/", - "fonts": [ "Playfair Display", "Fira Sans" ], - "categories": [ "featured", "business" ] - } - ] -} diff --git a/client/landing/gutenboarding/available-designs.ts b/client/landing/gutenboarding/available-designs.ts new file mode 100644 index 00000000000000..76a29370c3c962 --- /dev/null +++ b/client/landing/gutenboarding/available-designs.ts @@ -0,0 +1,129 @@ +const availableDesigns: Readonly< AvailableDesigns > = { + featured: [ + { + title: 'Vesta', + slug: 'vesta', + template: 'mayland2', + theme: 'mayland', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/mayland/mayland2/', + fonts: { + headings: 'Cabin', + base: 'Raleway', + }, + categories: [ 'featured', 'portfolio' ], + }, + { + title: 'WIP Event Template', + slug: 'rivington', + template: 'rivington', + theme: 'rivington', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/rivington/rivington/', + fonts: { + headings: 'Arvo', + base: 'Montserrat', + }, + categories: [ 'event' ], + }, + { + title: 'Reynolds', + slug: 'reynolds', + template: 'rockfield2', + theme: 'rockfield', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/rockfield/rockfield2/', + fonts: { + headings: 'Playfair Display', + base: 'Fira Sans', + }, + categories: [ 'featured', 'portfolio' ], + }, + { + title: 'Easley', + slug: 'easley', + template: 'maywood', + theme: 'maywood', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/maywood/maywood/', + fonts: { + headings: 'Space Mono', + base: 'Roboto', + }, + categories: [ 'featured', 'portfolio' ], + }, + { + title: 'Camden', + slug: 'Camden', + template: 'maywood2', + theme: 'maywood', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/maywood/maywood2/', + fonts: { + headings: 'Space Mono', + base: 'Roboto', + }, + categories: [ 'featured', 'portfolio' ], + }, + { + title: 'Bowen', + slug: 'bowen', + template: 'bowen', + theme: 'coutoire', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/coutoire/bowen/', + fonts: { + headings: 'Playfair Display', + base: 'Fira Sans', + }, + categories: [ 'featured', 'blog' ], + }, + { + title: 'Edison', + slug: 'edison', + template: 'stratford2', + theme: 'stratford', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/stratford/stratford2/', + fonts: { + headings: 'Chivo', + base: 'Open Sans', + }, + categories: [ 'featured', 'blog' ], + }, + { + title: 'Cassel', + slug: 'cassel', + template: 'mayland', + theme: 'mayland', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/mayland/mayland/', + fonts: { + headings: 'Playfair Display', + base: 'Fira Sans', + }, + categories: [ 'featured', 'blog' ], + }, + { + title: 'Overton', + slug: 'overton', + template: 'alves', + theme: 'alves', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/alves/alves/', + fonts: { + headings: 'Cabin', + base: 'Raleway', + }, + categories: [ 'featured', 'business' ], + }, + { + title: 'Doyle', + slug: 'doyle', + template: 'alves2', + theme: 'alves', + src: 'https://public-api.wordpress.com/rest/v1/template/demo/alves/alves2/', + fonts: { + headings: 'Playfair Display', + base: 'Fira Sans', + }, + categories: [ 'featured', 'business' ], + }, + ], +}; + +export default availableDesigns; +interface AvailableDesigns { + featured: Array< import('./stores/onboard/types').Design >; +} diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx index 08da10a72be0b2..cc8b79decfaacf 100644 --- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx @@ -12,7 +12,7 @@ import { Spring, animated } from 'react-spring/renderprops'; * Internal dependencies */ import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard'; -import designs from '../../available-designs.json'; +import designs from '../../available-designs'; import { usePath, Step } from '../../path'; import { isEnabled } from '../../../../config'; import Link from '../../components/link'; @@ -20,7 +20,6 @@ import { SubTitle, Title } from '../../components/titles'; import './style.scss'; -type Font = import('../../constants').Font; type Design = import('../../stores/onboard/types').Design; // Values for springs: @@ -38,8 +37,8 @@ const DesignSelector: React.FunctionComponent = () => { const getDesignUrl = ( design: Design ) => { const mshotsUrl = 'https://s.wordpress.com/mshots/v1/'; const previewUrl = addQueryArgs( design.src, { - font_headings: design.fonts[ 0 ], - font_base: design.fonts[ 1 ], + font_headings: design.fonts.headings, + font_base: design.fonts.base, } ); return mshotsUrl + encodeURIComponent( previewUrl ); }; @@ -92,7 +91,7 @@ const DesignSelector: React.FunctionComponent = () => { setSelectedDesign( design ); // Update fonts to the design defaults - setFonts( design.fonts as [ Font, Font ] ); + setFonts( design.fonts ); if ( isEnabled( 'gutenboarding/style-preview' ) ) { push( makePath( Step.Style ) ); diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx index 9d063b8ea0081b..ba317c15bc27d1 100644 --- a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx +++ b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx @@ -11,9 +11,9 @@ import { useI18n } from '@automattic/react-i18n'; /** * Internal dependencies */ -import { fontPairings, getFontTitle, FontPair, Font } from '../../constants'; +import { fontPairings, getFontTitle, FontPair } from '../../constants'; import { STORE_KEY } from '../../stores/onboard'; -import designs from '../../available-designs.json'; +import designs from '../../available-designs'; const FontSelect: React.FunctionComponent = () => { const { __: NO__ } = useI18n(); @@ -26,12 +26,12 @@ const FontSelect: React.FunctionComponent = () => { )?.fonts; const defaultFontOption = selectedDesignDefaultFonts ? ( <> - - { getFontTitle( selectedDesignDefaultFonts[ 0 ] ) } + + { getFontTitle( selectedDesignDefaultFonts.headings ) }  /  - - { getFontTitle( selectedDesignDefaultFonts[ 1 ] ) } + + { getFontTitle( selectedDesignDefaultFonts.base ) } ) : ( @@ -42,7 +42,7 @@ const FontSelect: React.FunctionComponent = () => { if ( ! selectedDesignDefaultFonts ) { return true; } - const [ defaultHeadings, defaultBase ] = selectedDesignDefaultFonts; + const { headings: defaultHeadings, base: defaultBase } = selectedDesignDefaultFonts; return pair.headings !== defaultHeadings && pair.base !== defaultBase; }; @@ -51,10 +51,10 @@ const FontSelect: React.FunctionComponent = () => { diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx index 46bf670621ffd9..8f21f2b4050803 100644 --- a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx +++ b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx @@ -43,9 +43,11 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => { const url = addQueryArgs( templateUrl, { language: language, vertical: siteVertical?.label, - font_headings: selectedFonts?.headings, - font_base: selectedFonts?.base, site_title: siteTitle, + ...( selectedFonts && { + font_headings: selectedFonts.headings, + font_base: selectedFonts.base, + } ), } ); let resp; @@ -67,7 +69,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => { const html = await resp.text(); setPreviewHtml( html ); setRequestedFonts( - new Set( [ selectedFonts?.headings, selectedFonts?.base ].filter( Boolean ) as Font[] ) + new Set( selectedFonts ? [ selectedFonts.headings, selectedFonts.base ] : undefined ) ); }; eff(); diff --git a/client/landing/gutenboarding/stores/onboard/actions.ts b/client/landing/gutenboarding/stores/onboard/actions.ts index 309194d243fdbf..4ee7b7fa8ede41 100644 --- a/client/landing/gutenboarding/stores/onboard/actions.ts +++ b/client/landing/gutenboarding/stores/onboard/actions.ts @@ -52,14 +52,10 @@ export const resetFonts = () => ( { type: 'RESET_FONTS' as const, } ); -// Handles { headings, base } and [ headings, base ] formats -export const setFonts = ( fonts: FontPair | [ Font, Font ] | undefined ) => { - const nextFonts: FontPair | undefined = Array.isArray( fonts ) - ? { headings: fonts[ 0 ], base: fonts[ 1 ] } - : fonts; +export const setFonts = ( fonts: FontPair | undefined ) => { return { type: 'SET_FONTS' as const, - fonts: nextFonts, + fonts: fonts, }; }; diff --git a/client/landing/gutenboarding/stores/onboard/types.ts b/client/landing/gutenboarding/stores/onboard/types.ts index ad5677552bd9af..a666e94937bbe3 100644 --- a/client/landing/gutenboarding/stores/onboard/types.ts +++ b/client/landing/gutenboarding/stores/onboard/types.ts @@ -1,3 +1,5 @@ +type FontPair = import('../../constants').FontPair; + export interface SiteVertical { /** * Vertical Label. Either obtained from WP.com, or specified by the user. @@ -30,6 +32,6 @@ export interface Design { src: string; theme: string; template: string; - fonts: Array< string >; + fonts: FontPair; categories: Array< string >; } From 29ecfb4f03b8967776e1360dadd07cf7fb3758fb Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Thu, 2 Apr 2020 12:57:38 +0200 Subject: [PATCH 4/4] Use isShallowEqual when possible --- .../onboarding-block/style-preview/font-select.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx index ba317c15bc27d1..2ef756064d586e 100644 --- a/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx +++ b/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx @@ -24,6 +24,7 @@ const FontSelect: React.FunctionComponent = () => { const selectedDesignDefaultFonts = designs.featured.find( design => design.slug === selectedDesign?.slug )?.fonts; + const defaultFontOption = selectedDesignDefaultFonts ? ( <> @@ -42,8 +43,7 @@ const FontSelect: React.FunctionComponent = () => { if ( ! selectedDesignDefaultFonts ) { return true; } - const { headings: defaultHeadings, base: defaultBase } = selectedDesignDefaultFonts; - return pair.headings !== defaultHeadings && pair.base !== defaultBase; + return ! isShallowEqual( pair, selectedDesignDefaultFonts ); }; return (