Font Library and Global Style revisions: inconsistencies around deleted font assets.

[matiasbenedetto]

What?

There are potential inconsistencies between Font Library and Global Styles revisions.

These inconsistencies will arise if a user follows these steps:

• Install + activate a font family
• Uninstall that font family
• Activate a previous global styles revision where the font family was activated.

In this case, the font family will be activated (restored in global styles), but it won't render appropriately because the font asset was deleted when uninstalled.

Questions:

1. How can this be avoided?
2. Do you think fixing this potential problem is a requirement to release the Font Library in WordPress 6.4?

[jasmussen]

Good issue, though I would broaden the horizons a bit; what if you install from the Pattern Directory a pattern that uses a font that is missing?

I would love for us to show a notice, a special dismissible snackbar that would open up the font library on the Google Fonts page of the missing font, to let you install it again. Or, if that's not possible, just open up the font library with the name of the font missing, with an option to search Google Fonts for it. Here's a quick and dirty draft:

[richtabor]

@jasmussen What do you think of this?

• We don't use "Dismiss" elsewhere on snackbars.
• Made an alternate icon to represent missing fonts, instead of using the typography icon. It almost looks like the Aa is part of the label.

[jasmussen]

Nice! I like it, simpler, clearer.

The only thing is, we might want higher prominence of this one, either color or a more explicit warning icon or something, as it can be a pretty important thing. And of course to sketch out the modal that occcurs when you press "Review".

There's also the question of whether this is a has-to-be-dismissed snackbar or something else. This isn't a notice I would want to disappear after n seconds, it should require your interaction, don't you think?

[annezazu]

Is this still planned to be addressed for 6.4? I'm not seeing any progress on it and we're trying to triage for beta 2 :) I know Fonts is a blessed task so I assume we might see some movement here eventually but would rather remove if it's not slated. I see it's part of stage 3 and my understanding is just stage 1 & 2 are for 6.4.

[jffng]

@richtabor @jasmussen thanks for the snackbar mockups.

In the font library modal, how should we display the information about missing fonts / variants? There may be multiple font families missing variants, and multiple variants missing per font family, that need to be either uploaded or installed via a provider.

It would be helpful to show how both the library tab and individual font family tabs will appear in these states.

[jasmussen]

how should we display the information about missing fonts / variants

Related to that, but possibly a good starting point, could we show in the following dropdown from the Typography panel, only the weights that are installed for a particular font? This seems the main pain-point to solve:

I'm assuming you're referring to this inconsistency:

Here's a quick sketch, let me know your thoughts:

[jffng]

Related to that, but possibly a good starting point, could we show in the following dropdown from the Typography panel, only the weights that are installed for a particular font?

Yes, that one is captured here: https://github.com/WordPress/gutenberg/issues/49090. I agree it makes sense to fix that because we should not show weights to the user that aren't available.

I'm assuming you're referring to this inconsistency:

I think the inconsistency in those screenshots is a separate issue. After I install Epilogue, I see the following:

How did you get the style names (Bold, Extra Bold, etc) to show up instead of the numbered weight?

Here's a quick sketch, let me know your thoughts:

Thank you for the sketches. Some thoughts:

• I think giving the missing fonts a dedicated view, as you've done in the 2nd sketch from left) is a good idea.
• What happens if you click on a font family with missing styles from the list of all installed fonts? Are you shown all of the styles including the missing ones, or just the installed ones?
• In the missing font styles view (3rd sketch), should the user also be given the option to delete the missing style(s)? Also, should it be re-iterated somewhere that these are missing styles?
• To achieve the "Install" functionality directly from the missing font styles view, we need a way to identify whether the missing fonts are supplied by an existing collection. I think this should be possible, but wanted to note it anyhow. cc @matiasbenedetto @creativecoder @pbking

[jasmussen]

How did you get the style names (Bold, Extra Bold, etc) to show up instead of the numbered weight?

I'm assuming this is font meta-data, I haven't done anything myself here.

What happens if you click on a font family with missing styles from the list of all installed fonts? Are you shown all of the styles including the missing ones, or just the installed ones?

My instinct here was to show just the missing ones. I do see the confusion, perhaps this is simpler:

Shows "10/14 styles" instead of explicitly noting "Missing fonts". You might very intentionally be omitting weights to simplify the page. Is there nuance here I'm missing?

In the missing font styles view (3rd sketch), should the user also be given the option to delete the missing style(s)? Also, should it be re-iterated somewhere that these are missing styles?

Oh, can you elaborate on this?

I may be conflating some concerns with this view:

This is the case where you insert a pattern from the directory which uses a font you don't yet have installed. IMO that's the most important use case to solve. But let me know what beats I missed! Thanks.

[jffng]

This is the case where you insert a pattern from the directory which uses a font you don't yet have installed. IMO that's the most important use case to solve.

👍 I understand, I should clarify this is a different use case than the original issue from a technical POV, but some of the UI for addressing both issues will overlap.

Shows "10/14 styles" instead of explicitly noting "Missing fonts". You might very intentionally be omitting weights to simplify the page. Is there nuance here I'm missing?

In this version, how does the user differentiate between and take action (upload or install) on a font style that is missing, versus a font that that is intentionally omitted / not activated?

can you elaborate on this?

It seems we're talking about two different cases when a font is "missing":

1. a font is activated in global styles, but it's not installed
2. a font is referenced somewhere in a block / pattern / template, but it's not installed

To solve 1, my suggestion was allowing the user to delete the missing font style from their global styles.

[jasmussen]

Good notes, thank you for clarifying. I'll revisit these mockups to more clearly delineate when a font has weights missing, intentionally or not (the font weight dropdown still seems the first issue to omit missing weights from as a fix here), or when a font is simply missing (used in a pattern but not installed, or as you note, active in global styles but not installed).

To solve 1, my suggestion was allowing the user to delete the missing font style from their global styles.

To help my mockup work can you elaborate on this bit, specifically, how can you get in this situation? Could it be when you switch to a theme that has theme.json definitions for some font files that just aren't installed?

If that's the case I guess we can't entirely avoid that from happening, though it seems like bad practice just like it would be to ship a theme that points to in image but fails to bundle that image in the theme files.

Edit, I just realized that of course you might have a font definition pointing to a missing font somewhere in theme.json. Still a bad practice for a theme you switch to, so slightly similar to the above thoughts, but I think this is what you meant.

Would it be feasible to have a button in global styles that is similar to this snackbar, and takes you to the same modal destination?

If yes, then I'll take another stab at a mockup for this particular modal.

[jasmussen]

How's this?

• Click snackbar or notice to open the Missing Fonts tab
• Missing Fonts tab has rows of the missing fonts, with options to install from the installed font sources if they are found there, or links to upload otherwise.

[pbking]

Is there a difference between how we deal with the two types of unavailable fonts that @jffng described?

In one use case a font that is installed is broken (the referenced file is unavailable) and should be fixed somehow (either by deleting or uploading it). This has nothing to do with content, just configuration. I think this workflow is appropriate for that need.

In another use case content references a font that isn't installed. That seems more akin to a "suggested plugin" and I would imagine in that case the font isn't "broken" but "suggested". Technically speaking, knowing that a configuration is "broken" seems easy enough, but to know that a particular font in the content is missing seems like a much different challenge (unless you're editing that block/content).

[jasmussen]

For anything that references a font that isn't installed, the "Missing fonts" flow to me makes sense.

In the case of "missing font weights", I don't think of that as a problem — if you install a font family with 14 weights, it's going to be a bit of a download for every user, at least until we can be smart about it and only enqueue the fonts used. But even then, it's useful to be prudent about how many weights you add. That's why I think the solution there is to only ever show the weights, here, that are actually available to you:

[jffng]

How's this?

This flow is looking good! I just have a question about this frame:

What state is this showing? If it's showing what happens after I've installed the missing font, I wonder if the font style should be activated automatically. This would match the current behavior — font styles are automatically activated upon install.

[jasmussen]

The idea there is that the font weight that's being used somewhere in the theme or pattern you just inserted, has been identified as available through your font sources (Google Fonts presumably), so we just take you to the font there and let you pick the missing weight.

I think we can be flexible on that particular screen too, depending on what you unearth in implementation. If it feels more intuitive to show the missing weight already pre-selected, that could be good. If it is more intuitive to show only the missing weight, pre-selected, and with the "Missing Fonts" tab active, that could work too. What do you think?

[jffng]

If it is more intuitive to show only the missing weight, pre-selected, and with the "Missing Fonts" tab active, that could work too.

👍 Thanks for clarifying, I think there's enough here to get moving on the UI for this flow.

[jasmussen]

Sounds good. Just to tie a bow on it, here's a potential sketch for how one of those avenues could look:

But as noted, we can flex a bit on the details here, what feels right.

[jffng]

I un-assigned myself from this, as I'm starting an extended leave on Monday and did not get to implement it (currently it is blocked by related development work). It's on the team's tasks to pick up when the font library refactor is complete.

[colorful-tones]

Based on the recent Editor Triage session, I'm removing this from the WordPress 6.5 Editor Task board. Hopefully, someone will still pick it up for 6.5, but it is not critical. Thanks!