Changeset 57657

Timestamp:

02/20/2024 07:09:43 AM (3 years 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'],
                 );