Font Library: post install flow makes it look like font wasn't installed

[annezazu]

Using 6.5 beta 1, I noticed that I could install a font variant but, after installing, it's not clear that it has been even allowing me to continually go through the install process:

https://github.com/WordPress/gutenberg/assets/26996883/e0b6cbe1-f9a7-4874-ac6b-b505d52f2665

I'd expect some indication that these have been installed! cc @matiasbenedetto

[matiasbenedetto]

Hi :wave:

I'd expect some indication that these have been installed!

There's a green snackbar saying specifically that ("Fonts were installed successfully") I know you probably saw it, so this issue indicates that's not enough. I would like to have @jasmussen input about this part of the user experience.

[jasmussen]

The suggested flow in the main issue (#45271) is this:

• Go to the "Install fonts" tab
• Click a font you want
• Select the weights you want
• Click "Activate"

Note that as part of clicking activate, the modal closes, and you're taken to the list of fonts in the Global Styles sidebar.

Where did we end up with that particular flow? I recall a related conversation that's hard to dig up now where perhaps an alternative was suggested, that upon sucessfully installing from the Install Fonts tab, you'd be redirected the the newly installed font page, the one that shows boxes checked for the variants you have installed. Never would you stay on the "Install fonts" tab.

[annezazu]

Yes! I did see the notice but visually it's strange to still see the option and to be able to go through the entire flow to install again. I don't think this is a show stopper problem but I don't think it's a great and clear experience either.

[colorful-tones]

Just dropping here to note that I too noticed this and it seemed odd. Just did not have time to report 😓

It is probably beyond the scope of 6.5, but feel like if a font is already installed then it should have an indication (disabled appearance maybe?). I'm sure this would require a good deal of checks though and we could not account for every aspect of a user installing via Google vs installing via local upload, etc.

Here is a possible temporary UI workaround/patch for this scenario:

[t-hamano]

I would like to introduce Adobe Fonts UI as a completely new idea. This UI has the following features.

• On the font list page, There are "Add Family" buttons to install all variants or "Remove" buttons to uninstall all variants.
• There are no checkboxes or a separate install button on the font details page.
• The buttons to the right of each variant allow you to install or remove that variant.
• A modal dialog is displayed when removing a font.
• A snack bar appears when fonts are installed or removed.

However, I think this UI is not the only correct answer, and may be considered as one approach.

https://github.com/WordPress/gutenberg/assets/54422211/4e72436f-25c2-4a4c-91d4-754f70238c92

[colorful-tones]

I’ve been wanting to explore and knew that there had to exist some of these fonts UX/UI considerations and flows. Thanks for sharing that @t-hamano

However, I think there is a LOT to unpack and it is a huge pivot to get to that experience. I think it should be explored but I also know that a lot of folks are eager to get the Font Library launched and iterate after. So, keep highlighting that Adobe Fonts video and we’ll need to break it down into smaller actionable pieces.

The Adobe Fonts flow feels to align more with #57904

[colorful-tones]

Hi folks, We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.