Custom Fonts: notify user about deleted fonts in story

[miina]

Feature Description

It's possible for custom fonts (and even Google Fonts!) to be deleted.

When the user opens a story that uses a font that no longer exists, we want to notify the user about it.

Here's what this notification should be like:

Figma: View current design

Screenshot:

General flow:

1. When opening a story in the editor, we go through all text elements in a story and their fonts
2. For each font, we try to retrieve information about it from the server. If the server doesn't return the font information, we know it has been deleted.
3. For each missing font, display a single modal to let the user know about it, offering further instructions.
4. That means in the unlikely event of there being multiple missing fonts, there will be multiple modals, one after the other
5. The modal displays the single <FontPicker> dropdown; the same component we use in the design panel.

CTAs

• "Open anyway" will close the modal & replace the missing font for all affected elements with Roboto (either from TEXT_ELEMENT_DEFAULT_FONT or fetched via API)
• "Replace font" will close the modal & replace the missing font for all affected elements with the selected font from the picker

When replacing an element's missing font, the font weight should be preserved. If the replacement font is not available in the same weight, we pick the closest possible match

Implementation notes:

• FontPicker needs to be refactored so that handleFontPickerChange and fontFamily are passed via props instead (so there is no dependency on selectedElements and pushUpdate
• We might want to add font to ELEMENT_PROPS_TO_IGNORE, so that clicking on "Open anyway" does not cause a history entry
• The rough flow is similar to how <StatusCheck> works
• Can add JS & e2e tests for this
• Can add storybook story for this dialog as well

Alternatives Considered

Additional Context

• While we’re at it, if there are saved templates that use a missing font, should we also notify the user in this case?
• If a font still exists but has updated metrics, we could simply update the metrics for all affected elements silently. (requires updating ELEMENT_PROPS_TO_IGNORE accordingly)

[miina]

For each font, we try to retrieve information about it from the server. If the server doesn't return the font information, we know it has been deleted.

Aren't the fonts already loaded "in bulk" beforehand so that we have the information already? Or at least the custom fonts + the default 100 fonts, we'd probably only need a separate request for fonts that are not among the initially loaded fonts?

For each missing font, display a single modal to let the user know about it, offering further instructions.

Somehow it would make sense to me to see right away all the fonts that are missing and perhaps allow dealing with all together as well. Might be a bit confusing to see multiple popups opening up after each other. But I guess that's an unlikely case anyway and UX is confirmed already. Maybe the title should be in singular as well then (Missing Font).

[swissspidy]

Aren't the fonts already loaded "in bulk" beforehand so that we have the information already? Or at least the custom fonts + the default 100 fonts, we'd probably only need a separate request for fonts that are not among the initially loaded fonts?

No fonts are loaded initially when opening the editor. The curated fonts list is only first loaded when the font picker is rendered for the first time. This was improved recently, see #10643

I imagine this part to be pretty straightforward anyway:

1. Grab a list of all text elements and their font names, remove duplicates
2. Call getFonts({ include: 'FontA,FontB,FontC' })
3. Receive a response like [ (FontA data...), (FontC data...) ]
4. Compare response list with input list and see that FontB is missing
5. Display dialog for FontB

Somehow it would make sense to me to see right away all the fonts that are missing and perhaps allow dealing with all together as well.

This was also my first impression, but it would make the modal potentially quite long, plus it's an unlikely scenario.

Amy and I agreed that we can revisit this if user feedback indicates otherwise.

Maybe the title should be in singular as well then (Missing Font).

👍

[timarney]

Getting some pieces setup for this ...

Is the font dropdown "z-index" a known issue? If yes can you point me to a workaround.

[swissspidy]

@timarney The font picker uses the Datalist component from the design system. The Datalist component has a zIndex prop for overriding the popup's default z-index (which I think is 2).

[felipebochehin87]

Tested against https://stories-qa-wordpress-amp.pantheonsite.io/wp-admin/, using PR #10808.

1. Added custom font
2. Enabled flags on Experiments screen
3. Created a story and added a text with the custom font
4. Saved story
5. Removed the custom font
6. Reopened the story - dialog displayed - When clicking on Back to Dashboard OR hitting ESC on the keyboard, I was redirected to the dashboard; when clicked on Open Anyway, story opened displaying text using Roboto font; when selecting a new font and clicking on replace font, story was displayed using the selected font

https://user-images.githubusercontent.com/96055551/158597504-87b14edc-92c8-44d7-a827-eae66428b10b.mp4