Gutenboarding: make font list aware of design specific font pairing

Automattic / wp-calypso

The JavaScript and API powered WordPress.com

https://developer.wordpress.com

GNU General Public License v2.0

12.42k stars 1.99k forks source link

Gutenboarding: make font list aware of design specific font pairing #40560

Closed simison closed 4 years ago

simison commented 4 years ago

In Gutenboarding, when a customer lands to font-picker, they always have the same font pairing selected and applied to the preview.

Font picker should reflect what is the default font pairing the selected design. Right now only backend preview mechanism is aware of that info.

In the big preview, we don't need to depend on backend to render the correct font since we can set it in clientside.

We do need the font-support in the backend for the thumbnail/screenshot preview tho.

sirreal commented 4 years ago

I brought up a similar point that you can't pick a theme's defaults: pbAok1-sr-p2#comment-1027

Adding a Default button seems like a simple fix for this.

dubielzyk commented 4 years ago

Agreed. We could have the top button be the default and that's whatever the theme has chosen 👍

simison commented 4 years ago

[..] and that's whatever the theme has chosen

@dubielzyk I didn't understand this part, can you elaborate?

dubielzyk commented 4 years ago

Apologies. The font options/buttons will be like this: [ Theme font 1 / Theme font 2 ] [ Cabin / Raleway ] [ Chivo / Open Sans ] [ Playfair / Fira Sans ] [ Arvo / Montserrat ] [ Space Mono / Roboto ]

sirreal commented 4 years ago

First pass of this in https://github.com/Automattic/wp-calypso/issues/40591 which adds the theme default button as Theme default.

We can work on font detection and name tweaks in follow-ups.

simison commented 4 years ago

@sirreal @dubielzyk why couldn't we pull the correct font pairing from json file and pre-select that in the font list?

The experience remains confusing to me. 😁 "Theme" word is used for the first time in the flow.

In the grid, I have design with "arvo+montserrat":

In the big preview, I don't get it with Arvo/Montserrat. Instead, I get some font that's not on the list of pairings:

If I choose "Arvo/Montserrat", only Arvo gets applied and the other stays at whatever it was:

dubielzyk commented 4 years ago

We should 100% pull the theme fonts for the default and remove duplicates if we already have the font pairing in our list.

My understanding from above was that @sirreal was gonna work on this in a follow-up.

We definitely aren't planning on having it called Theme font 1 / Theme font 2 😃

sirreal commented 4 years ago

@sirreal @dubielzyk why couldn't we pull the correct font pairing from json file and pre-select that in the font list?

Good plan, didn't know that was in there 🙂