Gutenboarding: Set design default fonts #40680
Conversation
| export type Font = ValuesType< ValuesType< typeof fontPairings > >; | ||
| export interface FontPair { | ||
| headings: Font; | ||
| base: Font; | ||
| } |
There was a problem hiding this comment.
Let known fonts appear in either position.
There was a problem hiding this comment.
Maybe these should be moved here? Then Design will have the correct fonts types, not array < string >. It's 100% up to you though.
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~82 bytes removed 📉 [gzipped]) Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
simison
added
the
[Status] Needs Review
| export type Font = ValuesType< ValuesType< typeof fontPairings > >; | ||
| export interface FontPair { | ||
| headings: Font; | ||
| base: Font; | ||
| } |
There was a problem hiding this comment.
Maybe these should be moved here? Then Design will have the correct fonts types, not array < string >. It's 100% up to you though.
| // 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 ] ); |
There was a problem hiding this comment.
I think if Design was typed properly, the as .. won't be needed.
| selectedFonts?.headings === selectedDesignDefaultFonts?.[ 0 ] && | ||
| selectedFonts?.base === selectedDesignDefaultFonts?.[ 1 ], | ||
| } ) } | ||
| onClick={ () => setFonts( ( selectedDesignDefaultFonts as [ Font, Font ] ) ?? undefined ) } |
Better type safety Remove type cases
|
I was planning to do some type cleanup after this, but it's better to get it in here rather than making a mess and cleaning it up later. Thanks for the nudge @alshakero 😉 We couldn't infer types well from the JSON: microsoft/TypeScript#32063 Type everything! Things should be very coherent now. Fonts are |
| 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' ], |
client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx
Outdated
Show resolved
Hide resolved
client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx
Show resolved
Hide resolved
sirreal
added
[Status] Ready to Merge
and removed
[Status] Needs Review
Changes proposed in this Pull Request
Testing instructions
/gutenboardingstyle view