Font Library: fix JS errors when activating or deactivating system fo…

…nts (#59935) Co-authored-by: creativecoder <[email protected]> Co-authored-by: madhusudhand <[email protected]> Co-authored-by: mikachan <[email protected]>
WordPress · Mar 18, 2024 · af185d9 · af185d9
1 parent 6c9f730
commit af185d9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 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
@@ -425,15 +425,15 @@ function FontLibraryProvider( { children } ) {
 
 		const isFaceActivated = isFontActivated(
 			font.slug,
-			face.fontStyle,
-			face.fontWeight,
+			face?.fontStyle,
+			face?.fontWeight,
 			font.source
 		);
 
 		if ( isFaceActivated ) {
 			loadFontFaceInBrowser(
 				face,
-				getDisplaySrcFromFontFace( face.src ),
+				getDisplaySrcFromFontFace( face?.src ),
 				'all'
 			);
 		} else {

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -134,9 +134,9 @@ export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {
 	const unloadFontFace = ( fonts ) => {
 		fonts.forEach( ( f ) => {
 			if (
-				f.family === formatFontFaceName( fontFace.fontFamily ) &&
-				f.weight === fontFace.fontWeight &&
-				f.style === fontFace.fontStyle
+				f.family === formatFontFaceName( fontFace?.fontFamily ) &&
+				f.weight === fontFace?.fontWeight &&
+				f.style === fontFace?.fontStyle
 			) {
 				fonts.delete( f );
 			}

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js
@@ -87,6 +87,10 @@ export function formatFontFamily( input ) {
  * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
  */
 export function formatFontFaceName( input ) {
+	if ( ! input ) {
+		return '';
+	}
+
 	let output = input.trim();
 	if ( output.includes( ',' ) ) {
 		output = output