From 975838582e8bea3669121b965ae3e7ecfc88884b Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Wed, 14 Feb 2024 14:02:00 -0300
Subject: [PATCH] add exception for firefox in the font face name formatting

---
 .../utils/preview-styles.js                   | 27 +++++++++++--------
 .../utils/test/preview-styles.spec.js         | 13 +++++++++
 2 files changed, 29 insertions(+), 11 deletions(-)

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
index 2bd80c86493fb6..a66ddd6360b6b3 100644
--- 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
@@ -84,22 +84,27 @@ export function formatFontFamily( input ) {
  * Example:
  * formatFontFaceName("Open Sans") => "Open Sans"
  * formatFontFaceName("'Open Sans', sans-serif") => "Open Sans"
- * formatFontFaceName("'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
+ * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
  */
 export function formatFontFaceName( input ) {
-	const output = input.trim();
+	let output = input.trim();
 	if ( output.includes( ',' ) ) {
-		return (
-			output
-				.split( ',' )
-				.find( ( item ) => item.trim() !== '' )
-				.trim()
-				// removes leading and trailing quotes.
-				.replace( /^["']|["']$/g, '' )
-		);
+		output = output
+			.split( ',' )
+			// finds the first item that is not an empty string.
+			.find( ( item ) => item.trim() !== '' )
+			.trim()
+			// removes leading and trailing quotes.
+			.replace( /^["']|["']$/g, '' );
 	}
 	// removes leading and trailing quotes.
-	return output.replace( /^["']|["']$/g, '' );
+	output = output.replace( /^["']|["']$/g, '' );
+
+	// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.
+	if ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {
+		output = `"${ output }"`;
+	}
+	return output;
 }
 
 export function getFamilyPreviewStyle( family ) {
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
index fd38d740ab34b4..4fa18e00f2a8dd 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
@@ -190,4 +190,17 @@ describe( 'formatFontFaceName', () => {
 			'Font+Name 24'
 		);
 	} );
+
+	it( 'should ouput the font face name with quotes on Firefox', () => {
+		const mockUserAgent =
+			'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0';
+
+		// Mock the userAgent for this test
+		Object.defineProperty( window.navigator, 'userAgent', {
+			value: mockUserAgent,
+			configurable: true,
+		} );
+
+		expect( formatFontFaceName( 'Open Sans' ) ).toBe( '"Open Sans"' );
+	} );
 } );