Typography presets in global styles: unexpected behavior

[matiasbenedetto]

Description

The typography presets recently added by #56622 seem to behave unexpectedly.

• 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: Fix list of base theme fonts when a theme variation is applied.  #59959

• Once selected, a preset can not be unselected.
  Pontentially fixed by: Global Styles: Presets: Show the default empty variation as well as the other presets #59717

• Font faces defined in variations aren't loaded in the browser until the variation switch is saved and the page is refreshed.
  Issue: Font faces defined in variations aren't loaded in the browser until the variation switch is saved and the page is refreshed #59965

• Custom-installed font families are unactivated when switching to a style variation.
  Potentially fixed by: Avoid override certain paths on theme variation switch #59921

Step-by-step reproduction instructions

1. Activate a theme using style variations.
2. Navigate to the global styles panel
3. 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:

2024-03-04.18-12-10.mp4

Once set, a preset can not be unset:

2024-03-07.12-36-51.mp4

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]

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]

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]

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]

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]

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.

2024-03-07.12-36-51.mp4

[scruffian]

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]

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.

2024-03-07.15-09-42.mp4

[scruffian]

Thanks @matiasbenedetto! I have a fix for this here: #59717

[matiasbenedetto]

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

[chyvak1831]

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".