From bfb552c0d9d8c233bd47ccd758382918f2916a7d Mon Sep 17 00:00:00 2001
From: Jeff Ong <jonger4@gmail.com>
Date: Tue, 12 Dec 2023 13:55:09 -0500
Subject: [PATCH] Identify missing font faces.

---
 .../font-library-modal/context.js             | 42 +++++++++++++++++++
 .../font-library-modal/installed-fonts.js     | 22 +++++++++-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
index 58b8621adcf0c..d6b6b155356f5 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -188,6 +188,47 @@ function FontLibraryProvider( { children } ) {
 		);
 	};
 
+	function getActivatedNotInstalledFonts() {
+		return customFonts
+			.map( ( customFont ) => {
+				// Ensure fontFaces is an array in customFont
+				const customFontFaces = Array.isArray( customFont.fontFace )
+					? customFont.fontFace
+					: [];
+
+				// Find the corresponding font in baseCustomFonts
+				const baseFont = baseCustomFonts.find(
+					( base ) => base.slug === customFont.slug
+				);
+
+				// Ensure fontFaces is an array in baseFont, if baseFont exists
+				const baseFontFaces =
+					baseFont && Array.isArray( baseFont.fontFace )
+						? baseFont.fontFace
+						: [];
+
+				// Filter out the font faces that are not installed
+				const fontFacesNotInstalled = customFontFaces.filter(
+					( customFace ) => {
+						// If the font isn't found in baseCustomFonts, all its faces are considered not installed
+						if ( ! baseFont ) return true;
+
+						// Check if the font face is not present in the installed font's faces
+						return ! baseFontFaces.some(
+							( baseFace ) => baseFace === customFace
+						);
+					}
+				);
+
+				// Return the font object with only the non-installed font faces, while copying over all other properties
+				return {
+					...customFont,
+					fontFaces: fontFacesNotInstalled,
+				};
+			} )
+			.filter( ( font ) => font.fontFaces && font.fontFaces.length > 0 ); // Filter out fonts that have no non-installed faces
+	}
+
 	const getFontFacesActivated = ( slug, source ) => {
 		return getActivatedFontsOutline( source )[ slug ] || [];
 	};
@@ -372,6 +413,7 @@ function FontLibraryProvider( { children } ) {
 				isInstalling,
 				collections,
 				getFontCollection,
+				getActivatedNotInstalledFonts,
 			} }
 		>
 			{ children }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 2a8d1e591e084..be7322ae2e521 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -35,6 +35,7 @@ function InstalledFonts() {
 		refreshLibrary,
 		uninstallFont,
 		isResolvingLibrary,
+		getActivatedNotInstalledFonts,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 
@@ -76,6 +77,8 @@ function InstalledFonts() {
 	const shouldDisplayDeleteButton =
 		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
 
+	const activatedNotInstalledFonts = getActivatedNotInstalledFonts();
+
 	useEffect( () => {
 		refreshLibrary();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -129,10 +132,27 @@ function InstalledFonts() {
 			{ ! libraryFontSelected && (
 				<>
 					{ isResolvingLibrary && <Spinner /> }
+					{ activatedNotInstalledFonts.length > 0 && (
+						<>
+							<Spacer margin={ 2 } />
+							<FontsGrid title="Fonts missing variants">
+								{ activatedNotInstalledFonts.map( ( font ) => (
+									<LibraryFontCard
+										font={ font }
+										key={ font.slug }
+										onClick={ () => {
+											handleSelectFont( font );
+										} }
+									/>
+								) ) }
+							</FontsGrid>
+							<Spacer margin={ 8 } />
+						</>
+					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
 							<Spacer margin={ 2 } />
-							<FontsGrid>
+							<FontsGrid title="Custom Fonts">
 								{ baseCustomFonts.map( ( font ) => (
 									<LibraryFontCard
 										font={ font }