Gutenboarding: Set design default fonts #40680

sirreal · 2020-04-01T21:33:36Z

Changes proposed in this Pull Request

Fix base font being set incorrectly (headings font was set to headings and base)
Use design default fonts

	Before	After
Defaults
Selected font

Testing instructions

Default and selected fonts are fixed on /gutenboarding style view

matticbot · 2020-04-01T21:33:37Z

Test live: https://calypso.live/?branch=gutenboarding/fix-default-fonts-in-preview

sirreal · 2020-04-01T21:41:45Z

client/landing/gutenboarding/constants.ts

+export type Font = ValuesType< ValuesType< typeof fontPairings > >;
+export interface FontPair {
+	headings: Font;
+	base: Font;
+}


Let known fonts appear in either position.

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

matticbot · 2020-04-01T21:47:36Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~82 bytes removed 📉 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       -116 B  (-0.0%)      -82 B  (-0.0%)

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.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

alshakero

Tested in Chrome. Reviewed the code. All good.

alshakero · 2020-04-02T08:23:41Z

client/landing/gutenboarding/constants.ts

+export type Font = ValuesType< ValuesType< typeof fontPairings > >;
+export interface FontPair {
+	headings: Font;
+	base: Font;
+}


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

alshakero · 2020-04-02T08:24:28Z

client/landing/gutenboarding/onboarding-block/design-selector/index.tsx

-											// 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 ] );


I think if Design was typed properly, the as .. won't be needed.

alshakero · 2020-04-02T08:24:44Z

client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx

+						selectedFonts?.headings === selectedDesignDefaultFonts?.[ 0 ] &&
+						selectedFonts?.base === selectedDesignDefaultFonts?.[ 1 ],
+				} ) }
+				onClick={ () => setFonts( ( selectedDesignDefaultFonts as [ Font, Font ] ) ?? undefined ) }


Same as above

Better type safety Remove type cases

sirreal · 2020-04-02T09:25:29Z

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!
Remove type assertions!
✨ ✨ ✨ ✨ ✨

Things should be very coherent now. Fonts are {heading: Font, base: Font} 💥

alshakero · 2020-04-02T09:33:27Z

client/landing/gutenboarding/available-designs.ts

+				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' ],


❤️ ❤️ ❤️ ❤️

alshakero

LEGEND!

client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx

sirreal added 2 commits April 1, 2020 23:28

Set base to base

0c02a50

Set default fonts on design selection

b632934

sirreal requested a review from a team as a code owner April 1, 2020 21:33

sirreal added [Goal] New Onboarding previously called Gutenboarding Design labels Apr 1, 2020

sirreal self-assigned this Apr 1, 2020

sirreal requested a review from a team April 1, 2020 21:41

sirreal commented Apr 1, 2020

View reviewed changes

simison added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 2, 2020

alshakero approved these changes Apr 2, 2020

View reviewed changes

Type available-designs

759ef15

Better type safety Remove type cases

alshakero reviewed Apr 2, 2020

View reviewed changes

alshakero approved these changes Apr 2, 2020

View reviewed changes

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 The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 2, 2020

This was referenced Apr 2, 2020

Gutenboarding: Consolidate templates metadata #40587

Closed

Gutenboarding: use static, tall screenshots #40632

Merged

Use isShallowEqual when possible

29ecfb4

sirreal merged commit bdd2dd3 into master Apr 2, 2020

sirreal deleted the gutenboarding/fix-default-fonts-in-preview branch April 2, 2020 11:14

matticbot removed the [Status] Ready to Merge label Apr 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenboarding: Set design default fonts #40680

Gutenboarding: Set design default fonts #40680

sirreal commented Apr 1, 2020 •

edited

Loading

matticbot commented Apr 1, 2020

sirreal Apr 1, 2020

alshakero Apr 2, 2020 •

edited

Loading

matticbot commented Apr 1, 2020 •

edited

Loading

alshakero left a comment

alshakero Apr 2, 2020 •

edited

Loading

alshakero Apr 2, 2020

alshakero Apr 2, 2020

sirreal commented Apr 2, 2020 •

edited

Loading

alshakero Apr 2, 2020

alshakero left a comment

Gutenboarding: Set design default fonts #40680

Gutenboarding: Set design default fonts #40680

Conversation

sirreal commented Apr 1, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Apr 1, 2020

sirreal Apr 1, 2020

Choose a reason for hiding this comment

alshakero Apr 2, 2020 • edited Loading

Choose a reason for hiding this comment

matticbot commented Apr 1, 2020 • edited Loading

alshakero left a comment

Choose a reason for hiding this comment

alshakero Apr 2, 2020 • edited Loading

Choose a reason for hiding this comment

alshakero Apr 2, 2020

Choose a reason for hiding this comment

alshakero Apr 2, 2020

Choose a reason for hiding this comment

sirreal commented Apr 2, 2020 • edited Loading

alshakero Apr 2, 2020

Choose a reason for hiding this comment

alshakero left a comment

Choose a reason for hiding this comment

sirreal commented Apr 1, 2020 •

edited

Loading

alshakero Apr 2, 2020 •

edited

Loading

matticbot commented Apr 1, 2020 •

edited

Loading

alshakero Apr 2, 2020 •

edited

Loading

sirreal commented Apr 2, 2020 •

edited

Loading