Font Library: adds the ability to use generic() in font family names. (#59103)

* adds the ability to use generic in font families as the examples from CSS level 4 spec.

Example: generic(kai)

* update comment

Author: matiasbenedetto

lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php

@@ -28,30 +28,26 @@ class WP_Font_Utils {
 		 * @link https://www.w3.org/TR/css-fonts-4/#font-family-prop
 		 *
 		 * @since 6.5.0
-		 * @access private
-		 *
-		 * @see sanitize_font_family()
 		 *
 		 * @param string $item A font family name.
-		 * @return string The font family name with surrounding quotes if necessary.
+		 * @return string The font family name with surrounding quotes, if necessary.
 		 */
 		private static function maybe_add_quotes( $item ) {
-			// Match any non alphabetic characters (a-zA-Z), dashes -, or parenthesis ().
-			$regex = '/[^a-zA-Z\-()]+/';
+			// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+			$regex = '/^(?!generic\([a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/';
 			$item  = trim( $item );
 			if ( preg_match( $regex, $item ) ) {
-				// Removes leading and trailing quotes.
-				$item = preg_replace( '/^["\']|["\']$/', '', $item );
-				return "\"$item\"";
+				$item = trim( $item, "\"'" );
+				return '"' . $item . '"';
 			}
 			return $item;
 		}
 
 		/**
 		 * Sanitizes and formats font family names.
 		 *
-		 * - Applies `sanitize_text_field`
-		 * - Adds surrounding quotes to names that special
+		 * - Applies `sanitize_text_field`.
+		 * - Adds surrounding quotes to names containing any characters that are not alphabetic or dashes.
 		 *
 		 * It follows the recommendations from the CSS Fonts Module Level 4.
 		 * @link https://www.w3.org/TR/css-fonts-4/#font-family-prop
@@ -69,7 +65,7 @@ public static function sanitize_font_family( $font_family ) {
 				return '';
 			}
 
-			$output          = trim( sanitize_text_field( $font_family ) );
+			$output          = sanitize_text_field( $font_family );
 			$formatted_items = array();
 			if ( str_contains( $output, ',' ) ) {
 				$items = explode( ',', $output );

packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -42,13 +42,13 @@ function extractFontWeights( fontFaces ) {
  *
  * Example:
  * formatFontFamily( "Open Sans, Font+Name, sans-serif" ) => '"Open Sans", "Font+Name", sans-serif'
- * formatFontFamily( "'Open Sans', sans-serif" ) => '"Open Sans", sans-serif'
+ * formatFontFamily( "'Open Sans', generic(kai), sans-serif" ) => '"Open Sans", sans-serif'
  * formatFontFamily( "DotGothic16, Slabo 27px, serif" ) => '"DotGothic16","Slabo 27px",serif'
  * formatFontFamily( "Mine's, Moe's Typography" ) => `"mine's","Moe's Typography"`
  */
 export function formatFontFamily( input ) {
-	// Matchs any non alphabetic characters (a-zA-Z), dashes - , or parenthesis ()
-	const regex = /[^a-zA-Z\-()]+/;
+	// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+	const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
 	const output = input.trim();
 
 	const formatItem = ( item ) => {

packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js

@@ -172,6 +172,16 @@ describe( 'formatFontFamily', () => {
 			'"Abril Fatface", Times, serif'
 		);
 	} );
+
+	it( 'should not add quotes to generic names', () => {
+		expect(
+			formatFontFamily(
+				'Paren(thesis)Font, generic(kai), generic(fasongsong), generic( abc ), Helvetica Neue'
+			)
+		).toBe(
+			'"Paren(thesis)Font", generic(kai), generic(fasongsong), generic( abc ), "Helvetica Neue"'
+		);
+	} );
 } );
 
 describe( 'formatFontFaceName', () => {