Changeset 57657

Timestamp:

02/20/2024 07:09:43 AM (10 months ago)

Author:

youknowriad

Message:

Editor: Format and sanitize font family names according the CSS spec.

This fixes two bugs in the font library.

• Fonts using special characters were not being rendered properly in the frontend.
• Allows the ability to use generic() in font family names.

Props mmaattiiaass, nithins53, kafleg, vivekawsm, swissspidy, audrasjb.
Fixes #60537.

Location:

trunk

Files:

• src/wp-includes/fonts/class-wp-font-collection.php (modified) (1 diff)
• src/wp-includes/fonts/class-wp-font-utils.php (modified) (2 diffs)
• tests/phpunit/tests/fonts/font-library/wpFontCollection/getData.php (modified) (1 diff)
• tests/phpunit/tests/fonts/font-library/wpFontUtils/sanitizeFontFamily.php (modified) (2 diffs)
• tests/phpunit/tests/fonts/font-library/wpRestFontFamiliesController.php (modified) (2 diffs)

trunk/src/wp-includes/fonts/class-wp-font-collection.php

@@ -220 +220 @@
                     'font_family_settings' => array(
                         'name'       => 'sanitize_text_field',
-                        'slug'       => 'sanitize_title',
-                        'fontFamily' => 'sanitize_text_field',
+                        'slug'       => static function ( $value ) {
+                            return _wp_to_kebab_case( sanitize_title( $value ) );
+                        },
+                        'fontFamily' => 'WP_Font_Utils::sanitize_font_family',
                         'preview'    => 'sanitize_url',
                         'fontFace'   => array(

trunk/src/wp-includes/fonts/class-wp-font-utils.php

@@ -20 +20 @@
 class WP_Font_Utils {
     /**
+     * Adds surrounding quotes to font family names that contain special characters.
+     *
+     * It follows the recommendations from the CSS Fonts Module Level 4.
+     * @link https://www.w3.org/TR/css-fonts-4/#font-family-prop
+     *
+     * @since 6.5.0
+     *
+     * @param string $item A font family name.
+     * @return string The font family name with surrounding quotes, if necessary.
+     */
+    private static function maybe_add_quotes( $item ) {
+        // 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 ) ) {
+            $item = trim( $item, "\"'" );
+            return '"' . $item . '"';
+        }
+        return $item;
+    }
+
+    /**
      * Sanitizes and formats font family names.
      *
-     * - Applies `sanitize_text_field`
-     * - Adds surrounding quotes to names that contain spaces and are not already quoted
+     * - 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
      *
      * @since 6.5.0
@@ -38 +63 @@
         }
 
-        $font_family           = sanitize_text_field( $font_family );
-        $font_families         = explode( ',', $font_family );
-        $wrapped_font_families = array_map(
-            function ( $family ) {
-                $trimmed = trim( $family );
-                if ( ! empty( $trimmed ) && str_contains( $trimmed, ' ' ) && ! str_contains( $trimmed, "'" ) && ! str_contains( $trimmed, '"' ) ) {
-                        return '"' . $trimmed . '"';
+        $output          = sanitize_text_field( $font_family );
+        $formatted_items = array();
+        if ( str_contains( $output, ',' ) ) {
+            $items = explode( ',', $output );
+            foreach ( $items as $item ) {
+                $formatted_item = self::maybe_add_quotes( $item );
+                if ( ! empty( $formatted_item ) ) {
+                    $formatted_items[] = $formatted_item;
                 }
-                return $trimmed;
-            },
-            $font_families
-        );
-
-        if ( count( $wrapped_font_families ) === 1 ) {
-            $font_family = $wrapped_font_families[0];
-        } else {
-            $font_family = implode( ', ', $wrapped_font_families );
-        }
-
-        return $font_family;
+            }
+            return implode( ', ', $formatted_items );
+        }
+        return self::maybe_add_quotes( $output );
     }
 

trunk/tests/phpunit/tests/fonts/font-library/wpFontCollection/getData.php

@@ -160 +160 @@
                         array(
                             'font_family_settings' => array(
-                                'fontFamily' => 'Open Sans, sans-serif',
+                                'fontFamily' => '"Open Sans", sans-serif',
                                 'slug'       => 'open-sans',
                                 'name'       => 'Open Sans',

trunk/tests/phpunit/tests/fonts/font-library/wpFontUtils/sanitizeFontFamily.php

@@ -36 +36 @@
         return array(
             'data_families_with_spaces_and_numbers' => array(
-                'font_family' => 'Rock 3D , Open Sans,serif',
-                'expected'    => '"Rock 3D", "Open Sans", serif',
+                'font_family' => 'Arial, Rock 3D , Open Sans,serif',
+                'expected'    => 'Arial, "Rock 3D", "Open Sans", serif',
             ),
             'data_single_font_family'               => array(
                 'font_family' => 'Rock 3D',
                 'expected'    => '"Rock 3D"',
-            ),
-            'data_no_spaces'                        => array(
-                'font_family' => 'Rock3D',
-                'expected'    => 'Rock3D',
             ),
             'data_many_spaces_and_existing_quotes'  => array(
@@ -59 +55 @@
                 'expected'    => '"Rock 3D"',
             ),
+            'data_font_family_with_generic_names'   => array(
+                'font_family' => 'generic(kai), generic(font[name]), generic(fangsong), Rock 3D',
+                'expected'    => 'generic(kai), "generic(font[name])", generic(fangsong), "Rock 3D"',
+            ),
         );
     }

trunk/tests/phpunit/tests/fonts/font-library/wpRestFontFamiliesController.php

@@ -682 +682 @@
         $settings = array(
             'name'       => 'Open Sans',
-            'fontFamily' => '"Open Sans, "Noto Sans", sans-serif',
+            'fontFamily' => 'Open Sans, "Noto Sans", sans-serif',
             'preview'    => 'https://s.w.org/images/fonts/16.9/previews/open-sans/open-sans-400-normal.svg',
         );
@@ -701 +701 @@
             'name'       => $settings['name'],
             'slug'       => 'open-sans-2',
-            'fontFamily' => $settings['fontFamily'],
+            'fontFamily' => '"Open Sans", "Noto Sans", sans-serif',
             'preview'    => $settings['preview'],
         );