Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gutenboarding: Set design default fonts #40680

Merged
merged 4 commits into from
Apr 2, 2020
Merged

Gutenboarding: Set design default fonts #40680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c02a50
Set base to base
sirreal Apr 1, 2020
b632934
Set default fonts on design selection
sirreal Apr 1, 2020
759ef15
Type available-designs
sirreal Apr 2, 2020
29ecfb4
Use isShallowEqual when possible
alshakero Apr 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 0 additions & 94 deletions client/landing/gutenboarding/available-designs.json
View file
Open in desktop

This file was deleted.

129 changes: 129 additions & 0 deletions client/landing/gutenboarding/available-designs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' ],
Comment on lines +1 to +121
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ ❤️ ❤️ ❤️

},
],
};

export default availableDesigns;
interface AvailableDesigns {
featured: Array< import('./stores/onboard/types').Design >;
}
7 changes: 5 additions & 2 deletions client/landing/gutenboarding/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Comment on lines +52 to +56
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let known fonts appear in either position.

Copy link
Member

@alshakero alshakero Apr 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe these should be moved here? Then Design will have the correct fonts types, not array < string >. It's 100% up to you though.

19 changes: 7 additions & 12 deletions client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -32,17 +32,13 @@ 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/';
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 );
};
Expand All @@ -63,7 +59,7 @@ const DesignSelector: React.FunctionComponent = () => {
</div>
<Link
className="design-selector__start-over-button"
onClick={ handleStartOverButtonClick }
onClick={ () => resetOnboardStore() }
to={ makePath( Step.IntentGathering ) }
isLink
>
Expand Down Expand Up @@ -94,9 +90,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 );

if ( isEnabled( 'gutenboarding/style-preview' ) ) {
push( makePath( Step.Style ) );
Expand Down
22 changes: 13 additions & 9 deletions client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useI18n } from '@automattic/react-i18n';
*/
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();
Expand All @@ -24,14 +24,15 @@ const FontSelect: React.FunctionComponent = () => {
const selectedDesignDefaultFonts = designs.featured.find(
design => design.slug === selectedDesign?.slug
)?.fonts;

const defaultFontOption = selectedDesignDefaultFonts ? (
<>
<span style={ { fontFamily: selectedDesignDefaultFonts[ 0 ], fontWeight: 700 } }>
{ getFontTitle( selectedDesignDefaultFonts[ 0 ] ) }
<span style={ { fontFamily: selectedDesignDefaultFonts.headings, fontWeight: 700 } }>
{ getFontTitle( selectedDesignDefaultFonts.headings ) }
</span>
&nbsp;/&nbsp;
<span style={ { fontFamily: selectedDesignDefaultFonts[ 1 ] } }>
{ getFontTitle( selectedDesignDefaultFonts[ 1 ] ) }
<span style={ { fontFamily: selectedDesignDefaultFonts.base } }>
{ getFontTitle( selectedDesignDefaultFonts.base ) }
</span>
</>
) : (
Expand All @@ -42,15 +43,18 @@ const FontSelect: React.FunctionComponent = () => {
if ( ! selectedDesignDefaultFonts ) {
return true;
}
const [ defaultHeadings, defaultBase ] = selectedDesignDefaultFonts;
return pair.headings !== defaultHeadings && pair.base !== defaultBase;
return ! isShallowEqual( pair, selectedDesignDefaultFonts );
};

return (
<div className="style-preview__font-options">
<Button
className={ classnames( 'style-preview__font-option', { 'is-selected': ! selectedFonts } ) }
onClick={ () => setFonts( undefined ) }
className={ classnames( 'style-preview__font-option', {
'is-selected':
selectedFonts?.headings === selectedDesignDefaultFonts?.headings &&
selectedFonts?.base === selectedDesignDefaultFonts?.base,
sirreal marked this conversation as resolved.
Show resolved Hide resolved
} ) }
onClick={ () => setFonts( selectedDesignDefaultFonts ) }
>
<span className="style-preview__font-option-contents">{ defaultFontOption }</span>
</Button>
Expand Down
10 changes: 6 additions & 4 deletions client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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();
Expand Down Expand Up @@ -121,7 +123,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' );
Expand Down
Loading