Font Library: fix to activate and display the right activation state …

…of system fonts (fonts with no font faces) (#58093) * fix to activate and display the right activation state of system fonts (fonts with no font faces) * if the font family has an empty array of fontfaces it should be unactivated as a family
WordPress · Jan 23, 2024 · b98c028 · b98c028
1 parent 2743793
commit b98c028
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 29 deletions.
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
@@ -171,11 +171,12 @@ function FontLibraryProvider( { children } ) {
 
 	const getAvailableFontsOutline = ( availableFontFamilies ) => {
 		const outline = availableFontFamilies.reduce( ( acc, font ) => {
-			const availableFontFaces = Array.isArray( font?.fontFace )
-				? font?.fontFace.map(
-						( face ) => `${ face.fontStyle + face.fontWeight }`
-				  )
-				: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
+			const availableFontFaces =
+				font?.fontFace && font.fontFace?.length > 0
+					? font?.fontFace.map(
+							( face ) => `${ face.fontStyle + face.fontWeight }`
+					  )
+					: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
 
 			acc[ font.slug ] = availableFontFaces;
 			return acc;
@@ -224,26 +225,35 @@ function FontLibraryProvider( { children } ) {
 
 			// Collect font faces that have already been installed (to be activated later)
 			const alreadyInstalledFontFaces =
-				installedFontFamily.fontFace.filter( ( fontFaceToInstall ) =>
-					checkFontFaceInstalled(
-						fontFaceToInstall,
-						fontFamilyToInstall.fontFace
-					)
-				);
+				installedFontFamily.fontFace && fontFamilyToInstall.fontFace
+					? installedFontFamily.fontFace.filter(
+							( fontFaceToInstall ) =>
+								checkFontFaceInstalled(
+									fontFaceToInstall,
+									fontFamilyToInstall.fontFace
+								)
+					  )
+					: [];
 
 			// Filter out Font Faces that have already been installed (so that they are not re-installed)
-			fontFamilyToInstall.fontFace = fontFamilyToInstall.fontFace.filter(
-				( fontFaceToInstall ) =>
-					! checkFontFaceInstalled(
-						fontFaceToInstall,
-						installedFontFamily.fontFace
-					)
-			);
+			if (
+				installedFontFamily.fontFace &&
+				fontFamilyToInstall.fontFace
+			) {
+				fontFamilyToInstall.fontFace =
+					fontFamilyToInstall.fontFace.filter(
+						( fontFaceToInstall ) =>
+							! checkFontFaceInstalled(
+								fontFaceToInstall,
+								installedFontFamily.fontFace
+							)
+					);
+			}
 
 			// Install the fonts (upload the font files to the server and create the post in the database).
 			let sucessfullyInstalledFontFaces = [];
 			let unsucessfullyInstalledFontFaces = [];
-			if ( fontFamilyToInstall.fontFace.length > 0 ) {
+			if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
 				const response = await batchInstallFontFaces(
 					installedFontFamily.id,
 					makeFontFacesFormData( fontFamilyToInstall )
@@ -261,6 +271,7 @@ function FontLibraryProvider( { children } ) {
 
 			// If there were no successes and nothing already installed then we don't need to activate anything and can bounce now.
 			if (
+				fontFamilyToInstall?.fontFace?.length > 0 &&
 				sucessfullyInstalledFontFaces.length === 0 &&
 				alreadyInstalledFontFaces.length === 0
 			) {

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
@@ -13,7 +13,8 @@ import { FontLibraryContext } from './context';
 function LibraryFontCard( { font, ...props } ) {
 	const { getFontFacesActivated } = useContext( FontLibraryContext );
 
-	const variantsInstalled = font.fontFace?.length || 1;
+	const variantsInstalled =
+		font?.fontFace?.length > 0 ? font.fontFace.length : 1;
 	const variantsActive = getFontFacesActivated(
 		font.slug,
 		font.source

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -20,17 +20,18 @@ function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
 		useContext( FontLibraryContext );
 
-	const isIstalled = font?.fontFace
-		? isFontActivated(
-				font.slug,
-				face.fontStyle,
-				face.fontWeight,
-				font.source
-		  )
-		: isFontActivated( font.slug, null, null, font.source );
+	const isIstalled =
+		font?.fontFace?.length > 0
+			? isFontActivated(
+					font.slug,
+					face.fontStyle,
+					face.fontWeight,
+					font.source
+			  )
+			: isFontActivated( font.slug, null, null, font.source );
 
 	const handleToggleActivation = () => {
-		if ( font?.fontFace ) {
+		if ( font?.fontFace?.length > 0 ) {
 			toggleActivateFont( font, face );
 			return;
 		}