Custom Fonts: notify user about deleted fonts in story

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)

[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

[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).