Changeset 59260

Timestamp:

10/20/2024 11:23:11 PM (8 weeks ago)

Author:

peterwilsoncc

Message:

Editor: Load all style variation fonts within the editors.

Loads the font family files from style variations defined within a theme for user in the site and post editors. This is to ensure the fonts are shown while editing without the need for a reload after switching styles.

Props ironprogrammer, mmaattiiaass.
Fixes #62231.

Location:

trunk

Files:

• src/wp-admin/includes/admin-filters.php (modified) (1 diff)
• src/wp-includes/block-editor.php (modified) (1 diff)
• src/wp-includes/fonts.php (modified) (1 diff)
• src/wp-includes/fonts/class-wp-font-face-resolver.php (modified) (1 diff)
• tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php (modified) (1 diff)
• tests/phpunit/tests/fonts/font-face/wpFontFaceResolver/getFontsFromStyleVariations.php (added)
• tests/phpunit/tests/fonts/font-face/wpPrintFontFacesFromStyleVariations.php (added)

trunk/src/wp-admin/includes/admin-filters.php

@@ -173 +173 @@
 // Font management.
 add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
+add_action( 'admin_print_styles', 'wp_print_font_faces_from_style_variations', 50 );

trunk/src/wp-includes/block-editor.php

@@ -367 +367 @@
     wp_print_styles();
     wp_print_font_faces();
+    wp_print_font_faces_from_style_variations();
     $styles = ob_get_clean();
 

trunk/src/wp-includes/fonts.php

@@ -56 +56 @@
 
 /**
+ * Generates and prints font-face styles defined the the theme style variations.
+ *
+ * @since 6.7.0
+ *
+ */
+function wp_print_font_faces_from_style_variations() {
+    $fonts = WP_Font_Face_Resolver::get_fonts_from_style_variations();
+
+    if ( empty( $fonts ) ) {
+        return;
+    }
+
+    wp_print_font_faces( $fonts );
+}
+
+/**
  * Registers a new font collection in the font library.
  *

trunk/src/wp-includes/fonts/class-wp-font-face-resolver.php

@@ -38 +38 @@
 
     /**
+     * Gets fonts defined in style variations.
+     *
+     * @since 6.7.0
+     *
+     * @return array Returns an array of font-families.
+     */
+    public static function get_fonts_from_style_variations() {
+        $variations = WP_Theme_JSON_Resolver::get_style_variations();
+        $fonts      = array();
+
+        if ( empty( $variations ) ) {
+            return $fonts;
+        }
+
+        foreach ( $variations as $variation ) {
+            if ( ! empty( $variation['settings']['typography']['fontFamilies']['theme'] ) ) {
+                $fonts = array_merge( $fonts, $variation['settings']['typography']['fontFamilies']['theme'] );
+            }
+        }
+
+        $settings = array(
+            'typography' => array(
+                'fontFamilies' => array(
+                    'theme' => $fonts,
+                ),
+            ),
+        );
+
+        return static::parse_settings( $settings );
+    }
+
+    /**
      * Parse theme.json settings to extract font definitions with variations grouped by font-family.
      *

trunk/tests/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php

@@ -404 +404 @@
         return $data;
     }
+
+    public static function get_custom_style_variations( $key = '' ) {
+        static $data = null;
+
+        $path                   = get_stylesheet_directory() . '/assets/fonts/';
+        $uri                    = get_stylesheet_directory_uri() . '/assets/fonts/';
+        $expected_font_families = array(
+            array(
+                array(
+                    'src'          => array(
+                        "{$path}dm-sans/DMSans-Regular.woff2",
+                    ),
+                    'font-family'  => 'DM Sans',
+                    'font-stretch' => 'normal',
+                    'font-style'   => 'normal',
+                    'font-weight'  => '400',
+                ),
+                array(
+                    'src'          => array(
+                        "{$path}dm-sans/DMSans-Bold.woff2",
+                    ),
+                    'font-family'  => 'DM Sans',
+                    'font-stretch' => 'normal',
+                    'font-style'   => 'normal',
+                    'font-weight'  => '700',
+                ),
+            ),
+            array(
+                array(
+                    'src'          => array(
+                        "{$path}open-sans/OpenSans-VariableFont_wdth,wght.ttf",
+                    ),
+                    'font-family'  => 'Open Sans',
+                    'font-stretch' => 'normal',
+                    'font-style'   => 'normal',
+                    'font-weight'  => '400',
+                ),
+                array(
+                    'src'          => array(
+                        "{$path}open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf",
+                    ),
+                    'font-family'  => 'Open Sans',
+                    'font-stretch' => 'normal',
+                    'font-style'   => 'italic',
+                    'font-weight'  => '400',
+                ),
+            ),
+            array(
+                array(
+                    'src'          => array(
+                        "{$path}dm-sans/DMSans-Medium.woff2",
+                    ),
+                    'font-family'  => 'DM Sans',
+                    'font-stretch' => 'normal',
+                    'font-style'   => 'normal',
+                    'font-weight'  => '500',
+                ),
+                array(
+                    'src'          => array(
+                        "{$path}dm-sans/DMSans-Medium-Italic.woff2",
+                    ),
+                    'font-family'  => 'DM Sans',
+                    'font-stretch' => 'normal',
+                    'font-style'   => 'italic',
+                    'font-weight'  => '500',
+                ),
+            ),
+        );
+
+        $expected_styles = <<<CSS
+@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:fallback;src:url('{$uri}dm-sans/DMSans-Regular.woff2') format('woff2');font-stretch:normal;}
+@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:fallback;src:url('{$uri}dm-sans/DMSans-Bold.woff2') format('woff2');font-stretch:normal;}
+@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:fallback;src:url('{$uri}open-sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');font-stretch:normal;}
+@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:fallback;src:url('{$uri}open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');font-stretch:normal;}
+@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:fallback;src:url('{$uri}dm-sans/DMSans-Medium.woff2') format('woff2');font-stretch:normal;}
+@font-face{font-family:"DM Sans";font-style:italic;font-weight:500;font-display:fallback;src:url('{$uri}dm-sans/DMSans-Medium-Italic.woff2') format('woff2');font-stretch:normal;}
+CSS;
+
+        if ( null === $data ) {
+            $data = array(
+                'expected'        => $expected_font_families,
+                'expected_styles' => $expected_styles,
+            );
+        }
+
+        if ( isset( $data[ $key ] ) ) {
+            return $data[ $key ];
+        }
+
+        return $data;
+    }
 }