Typography presets in global styles: unexpected behavior

matiasbenedetto commented 6 months ago

Description

The typography presets recently added by https://github.com/WordPress/gutenberg/pull/56622 seem to behave unexpectedly.

[x] When you click on a font, you get a list of available font faces for another font in the modal. In the video when user clicks on, let's say, "Instrument Sans" depending of the preset selected previously the modal open showing "Inter", "Cardo" or other font face list. It feels buggy and we should certainly improve that. Potentially fixed by: https://github.com/WordPress/gutenberg/pull/59959
[x] Once selected, a preset can not be unselected. Pontentially fixed by: https://github.com/WordPress/gutenberg/pull/59717
[ ] Font faces defined in variations aren't loaded in the browser until the variation switch is saved and the page is refreshed. Issue: https://github.com/WordPress/gutenberg/issues/59965
[ ] Custom-installed font families are unactivated when switching to a style variation. Potentially fixed by: https://github.com/WordPress/gutenberg/pull/59921

Step-by-step reproduction instructions

Activate a theme using style variations.
Navigate to the global styles panel
Use the typography presets recently added.

Screenshots, screen recording, code snippet

Changing the name of fonts and opening the modal with a different font name:

https://github.com/WordPress/gutenberg/assets/1310626/056d9810-f166-473f-89fe-b4cac5027779

Once set, a preset can not be unset:

https://github.com/WordPress/gutenberg/assets/1310626/b90c8998-e2ce-4e11-bd8c-ace4fc8381ff

Environment info

WordPress 6.4.3
Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

richtabor commented 6 months ago

I think the screencast posted in this issue is descriptive.

I'm not understanding what's the issue? When you select a variation's typeset, your fonts are changed.

ramonjd commented 6 months ago

Thanks for creating the issue.

Following on from Rich's comment, it would be good to qualify "unexpected", "buggy and unpredictable" to help potential design/dev efforts.

What are the expectations, and how could the feature be changed to match expectations?

matiasbenedetto commented 6 months ago

I'm not understanding what's the issue?

What are the expectations, and how could the feature be changed to match expectations?

Thanks for reading. Adding more precisions to the issue:

Changing the names of the fonts in that list seemed unexpected to me. I could be wrong, but I'd expect that list of fonts act as a list of the active fonts available for the user. The presets, from my point of view, should not change the list of fonts available for the user but should act as a way to select or apply a certain combination of fonts to elements/blocks/content. The font presets buttons are acting both ways: changing the list of fonts that's available to the user and applying those fonts to the elements, that behavior can be confusing.

Apart from that, when you click on a font, you get a list of available font faces for another font in the modal. In the video when user clicks on, let's say, "Instrument Sans" depending of the preset selected previously the modal open showing "Inter", "Cardo" or other font face list. It feels buggy and we should certainly improve that.

richtabor commented 6 months ago

Changing the names of the fonts in that list seemed unexpected to me. I could be wrong, but I'd expect that list of fonts act as a list of the active fonts available for the user. The presets, from my point of view, should not change the list of fonts available for the user but should act as a way to select or apply a certain combination of fonts to elements/blocks/content.

I'd expect that the presets do change the fonts that are active on a site. If I pick a preset that does not use Instrument Sans, it shouldn't be added to my site. But if I manually add a font to a site, it should stay. The same applies to custom colors added to a site.

This is the same flow as if I changed my site's theme style variation.

matiasbenedetto commented 6 months ago

Another issue I found is that after setting a preset, it can't be unset. I would expect that if I clicked the preset again, it would be unset. In the screencast, I click several times on the preset, but it is not unset.

https://github.com/WordPress/gutenberg/assets/1310626/4e9f968c-cd18-4507-b67e-e420cdc9847e

scruffian commented 6 months ago

Another issue I found is that after setting a preset, it can't be unset. I would expect that if I clicked the preset again, it would be unset. In the screencast, I click several times on the preset, but it is not unset.

This is the same experience as selecting a style variation

matiasbenedetto commented 6 months ago

Another issue I found is that after setting a preset, it can't be unset. I would expect that if I clicked the preset again, it would be unset. In the screencast, I click several times on the preset, but it is not unset.

This is the same experience as selecting a style variation

That's not quite true because, in the style variations, users can at least return to the 'default' variant. That isn't possible using the font presets.

https://github.com/WordPress/gutenberg/assets/1310626/672d340d-5fd9-4ce6-ae38-21d7f00212ee

scruffian commented 6 months ago

Thanks @matiasbenedetto! I have a fix for this here: https://github.com/WordPress/gutenberg/pull/59717

matiasbenedetto commented 6 months ago

Re-opening because just one of the parts of this issue was completed.

chyvak1831 commented 1 month ago

Another unexpected behaviour of fonts: 2024 theme contain default fonts Cardo and Inter. It's impossible to delete them. I even created new empty theme (style.css and index.html files only) - but these fonts still displays as theme, despite the fact my empty theme has no such fonts. It seems that fonts stored to database but for some reason displays as "theme".

WordPress / gutenberg