← All changes
|
modules/google-fonts/current/class-jetpack-google-font-face.php
+140
-50
13.7.2
→
16.3-beta
View file →
| @@ -5,11 +5,11 @@ | ||
| 5 | 5 | * @package automattic/jetpack |
| 6 | 6 | */ |
| 7 | 7 | |
| 8 | 8 | /** |
| 9 | - * Jetpack Google Font Face disables Font Face hooks in Core that prints **ALL** font faces. | |
| 10 | - * Instead, it collects fonts that are used in global styles or block-level settings and | |
| 11 | - * print those fonts in use. | |
| 9 | + * Prints used legacy catalogue faces while native font printers handle theme and user fonts. | |
| 10 | + * | |
| 11 | + * @phan-constructor-used-for-side-effects | |
| 12 | 12 | */ |
| 13 | 13 | class Jetpack_Google_Font_Face { |
| 14 | 14 | /** |
| 15 | 15 | * The fonts that are used in global styles or block-level settings. |
| @@ -21,23 +21,27 @@ | ||
| 21 | 21 | /** |
| 22 | 22 | * The constructor. |
| 23 | 23 | */ |
| 24 | 24 | public function __construct() { |
| 25 | - // Turns off hooks to print fonts | |
| 25 | + // Retire the legacy printer while keeping native font-face printing. | |
| 26 | 26 | add_action( 'wp_loaded', array( $this, 'wp_loaded' ) ); |
| 27 | 27 | add_action( 'current_screen', array( $this, 'current_screen' ), 10 ); |
| 28 | 28 | |
| 29 | 29 | // Collect and print fonts in use |
| 30 | - add_action( 'wp_head', array( $this, 'print_font_faces' ), 50 ); | |
| 30 | + if ( wp_is_block_theme() ) { | |
| 31 | + add_action( 'wp_head', array( $this, 'print_font_faces' ), 50 ); | |
| 32 | + } else { | |
| 33 | + // In classic themes wp_head runs before the blocks are processed to collect the block fonts. | |
| 34 | + add_action( 'wp_footer', array( $this, 'print_font_faces' ), 50 ); | |
| 35 | + } | |
| 31 | 36 | add_filter( 'pre_render_block', array( $this, 'collect_block_fonts' ), 10, 2 ); |
| 32 | 37 | } |
| 33 | 38 | |
| 34 | 39 | /** |
| 35 | - * Turn off hooks to print fonts on frontend | |
| 40 | + * Turn off the legacy webfonts printer on the frontend. | |
| 36 | 41 | */ |
| 37 | 42 | public function wp_loaded() { |
| 38 | 43 | remove_action( 'wp_head', 'wp_print_fonts', 50 ); |
| 39 | - remove_action( 'wp_head', 'wp_print_font_faces', 50 ); | |
| 40 | 44 | } |
| 41 | 45 | |
| 42 | 46 | /** |
| 43 | 47 | * Turn off hooks to print fonts on wp-admin, except for GB editor pages. |
| @@ -53,26 +57,100 @@ | ||
| 53 | 57 | /** |
| 54 | 58 | * Print fonts that are used in global styles or block-level settings. |
| 55 | 59 | */ |
| 56 | 60 | public function print_font_faces() { |
| 57 | - $fonts = WP_Font_Face_Resolver::get_fonts_from_theme_json(); | |
| 58 | - $font_slug_aliases = $this->get_font_slug_aliases(); | |
| 59 | - $fonts_to_print = array(); | |
| 61 | + if ( jetpack_google_fonts_load_font_faces() ) { | |
| 62 | + return; | |
| 63 | + } | |
| 60 | 64 | |
| 61 | 65 | $this->collect_global_styles_fonts(); |
| 62 | - $fonts_in_use = array_values( array_unique( $this->fonts_in_use, SORT_STRING ) ); | |
| 63 | - $fonts_in_use = array_map( | |
| 64 | - function ( $font_slug ) use ( $font_slug_aliases ) { | |
| 65 | - return $font_slug_aliases[ $font_slug ] ?? $font_slug; | |
| 66 | - }, | |
| 67 | - $this->fonts_in_use | |
| 66 | + $fonts_in_use = array_fill_keys( $this->fonts_in_use, true ); | |
| 67 | + if ( empty( $fonts_in_use ) ) { | |
| 68 | + return; | |
| 69 | + } | |
| 70 | + | |
| 71 | + $settings = function_exists( 'gutenberg_get_global_settings' ) | |
| 72 | + ? gutenberg_get_global_settings() | |
| 73 | + : wp_get_global_settings(); | |
| 74 | + $native_slugs = array(); | |
| 75 | + $native_faces = array(); | |
| 76 | + foreach ( $settings['typography']['fontFamilies'] ?? array() as $origin => $families ) { | |
| 77 | + foreach ( $families as $family ) { | |
| 78 | + if ( 'default' === $origin && empty( $family['fontFace'] ) ) { | |
| 79 | + continue; | |
| 80 | + } | |
| 81 | + if ( empty( $family['fontFamily'] ) ) { | |
| 82 | + continue; | |
| 83 | + } | |
| 84 | + $key = $this->format_font( self::get_font_family_name( $family ) ); | |
| 85 | + if ( ! empty( $family['slug'] ) ) { | |
| 86 | + $native_slugs[ $this->format_font( $family['slug'] ) ] = $key; | |
| 87 | + } | |
| 88 | + if ( ! empty( $family['fontFace'] ) ) { | |
| 89 | + foreach ( $family['fontFace'] as $face ) { | |
| 90 | + $native_faces[ $key ][] = $face; | |
| 91 | + } | |
| 92 | + } | |
| 93 | + } | |
| 94 | + } | |
| 95 | + | |
| 96 | + // Presets without their own faces can still refer to a legacy catalogue family. | |
| 97 | + $fonts_in_use = array_fill_keys( | |
| 98 | + array_map( | |
| 99 | + static function ( $font ) use ( $native_slugs ) { | |
| 100 | + return $native_slugs[ $font ] ?? $font; | |
| 101 | + }, | |
| 102 | + array_keys( $fonts_in_use ) | |
| 103 | + ), | |
| 104 | + true | |
| 68 | 105 | ); |
| 69 | 106 | |
| 70 | - foreach ( $fonts as $font_faces ) { | |
| 71 | - $font_family = $font_faces[0]['font-family'] ?? ''; | |
| 72 | - if ( in_array( $this->format_font( $font_family ), $fonts_in_use, true ) ) { | |
| 73 | - $fonts_to_print[] = $font_faces; | |
| 107 | + $data = jetpack_get_google_fonts_data(); | |
| 108 | + if ( empty( $data['fontFamilies'] ) ) { | |
| 109 | + return; | |
| 110 | + } | |
| 111 | + $available_fonts = jetpack_get_available_google_fonts_map( $data ); | |
| 112 | + $fonts_to_print = array(); | |
| 113 | + foreach ( $data['fontFamilies'] as $family ) { | |
| 114 | + if ( empty( $available_fonts[ $family['name'] ] ) || empty( $family['fontFace'] ) ) { | |
| 115 | + continue; | |
| 74 | 116 | } |
| 117 | + | |
| 118 | + $name = self::get_font_family_name( $family ); | |
| 119 | + $key = $this->format_font( $name ); | |
| 120 | + $slug = $this->format_font( $family['slug'] ); | |
| 121 | + // A preset that reuses this slug for another family replaces it. | |
| 122 | + if ( isset( $native_slugs[ $slug ] ) && $native_slugs[ $slug ] !== $key ) { | |
| 123 | + continue; | |
| 124 | + } | |
| 125 | + if ( ! isset( $fonts_in_use[ $slug ] ) && ! isset( $fonts_in_use[ $key ] ) ) { | |
| 126 | + continue; | |
| 127 | + } | |
| 128 | + | |
| 129 | + $catalogue_faces = $family['fontFace']; | |
| 130 | + if ( isset( $native_faces[ $key ] ) ) { | |
| 131 | + // Native files win; the catalogue only fills styles and weights they lack. | |
| 132 | + $catalogue_faces = array_filter( | |
| 133 | + $catalogue_faces, | |
| 134 | + static function ( $face ) use ( $native_faces, $key ) { | |
| 135 | + return ! self::is_face_provided( $face, $native_faces[ $key ] ); | |
| 136 | + } | |
| 137 | + ); | |
| 138 | + if ( empty( $catalogue_faces ) ) { | |
| 139 | + continue; | |
| 140 | + } | |
| 141 | + } | |
| 142 | + | |
| 143 | + $faces = array(); | |
| 144 | + foreach ( $catalogue_faces as $face ) { | |
| 145 | + $face['font-family'] = $name; | |
| 146 | + $converted = array(); | |
| 147 | + foreach ( $face as $property => $value ) { | |
| 148 | + $converted[ _wp_to_kebab_case( $property ) ] = $value; | |
| 149 | + } | |
| 150 | + $faces[] = $converted; | |
| 151 | + } | |
| 152 | + $fonts_to_print[] = $faces; | |
| 75 | 153 | } |
| 76 | 154 | |
| 77 | 155 | if ( ! empty( $fonts_to_print ) ) { |
| 78 | 156 | wp_print_font_faces( $fonts_to_print ); |
| @@ -79,12 +157,49 @@ | ||
| 79 | 157 | } |
| 80 | 158 | } |
| 81 | 159 | |
| 82 | 160 | /** |
| 161 | + * Whether a native face already covers a catalogue face's style and weight. | |
| 162 | + * | |
| 163 | + * @param array $face Catalogue face. | |
| 164 | + * @param array[] $native_faces Native faces for the same family. | |
| 165 | + * @return bool | |
| 166 | + */ | |
| 167 | + private static function is_face_provided( $face, $native_faces ) { | |
| 168 | + $style = $face['fontStyle'] ?? 'normal'; | |
| 169 | + list( $min, $max ) = self::get_weight_range( $face['fontWeight'] ?? '400' ); | |
| 170 | + foreach ( $native_faces as $native ) { | |
| 171 | + if ( ( $native['fontStyle'] ?? 'normal' ) !== $style ) { | |
| 172 | + continue; | |
| 173 | + } | |
| 174 | + list( $native_min, $native_max ) = self::get_weight_range( $native['fontWeight'] ?? '400' ); | |
| 175 | + // Overlap, not containment: a later catalogue rule would win at a shared weight. | |
| 176 | + if ( $native_min <= $max && $min <= $native_max ) { | |
| 177 | + return true; | |
| 178 | + } | |
| 179 | + } | |
| 180 | + return false; | |
| 181 | + } | |
| 182 | + | |
| 183 | + /** | |
| 184 | + * Parses a font-weight descriptor such as "400", "bold" or "100 900". | |
| 185 | + * | |
| 186 | + * @param string|int $weight Font weight. | |
| 187 | + * @return int[] Minimum and maximum weight. | |
| 188 | + */ | |
| 189 | + private static function get_weight_range( $weight ) { | |
| 190 | + $weight = str_replace( array( 'normal', 'bold' ), array( '400', '700' ), (string) $weight ); | |
| 191 | + $parts = preg_split( '/\s+/', trim( $weight ) ); | |
| 192 | + return array( (int) $parts[0], (int) ( $parts[1] ?? $parts[0] ) ); | |
| 193 | + } | |
| 194 | + | |
| 195 | + /** | |
| 83 | 196 | * Collect fonts used for global styles settings. |
| 84 | 197 | */ |
| 85 | 198 | public function collect_global_styles_fonts() { |
| 86 | - $global_styles = wp_get_global_styles(); | |
| 199 | + $global_styles = function_exists( 'gutenberg_get_global_styles' ) | |
| 200 | + ? gutenberg_get_global_styles() | |
| 201 | + : wp_get_global_styles(); | |
| 87 | 202 | |
| 88 | 203 | $global_styles_font_slug = $this->get_font_slug_from_setting( $global_styles ); |
| 89 | 204 | if ( $global_styles_font_slug ) { |
| 90 | 205 | $this->add_font( $global_styles_font_slug ); |
| @@ -151,32 +266,8 @@ | ||
| 151 | 266 | return _wp_to_kebab_case( strtolower( $font_slug ) ); |
| 152 | 267 | } |
| 153 | 268 | |
| 154 | 269 | /** |
| 155 | - * Get the font slug aliases that maps the font slug to the font family if they are different. | |
| 156 | - * | |
| 157 | - * The font definition may define an alias slug name, so we have to add the map from the slug name to the font family. | |
| 158 | - * See https://github.com/WordPress/twentytwentyfour/blob/df92472089ede6fae5924c124a93c843b84e8cbd/theme.json#L215. | |
| 159 | - */ | |
| 160 | - public function get_font_slug_aliases() { | |
| 161 | - $font_slug_aliases = array(); | |
| 162 | - | |
| 163 | - $theme_json = WP_Theme_JSON_Resolver::get_theme_data(); | |
| 164 | - $raw_data = $theme_json->get_data(); | |
| 165 | - if ( ! empty( $raw_data['settings']['typography']['fontFamilies'] ) ) { | |
| 166 | - foreach ( $raw_data['settings']['typography']['fontFamilies'] as $font ) { | |
| 167 | - $font_family_name = $this->format_font( $this->get_font_family_name( $font ) ); | |
| 168 | - $font_slug = $font['slug'] ?? ''; | |
| 169 | - if ( $font_slug && $font_slug !== $font_family_name && ! array_key_exists( $font_slug, $font_slug_aliases ) ) { | |
| 170 | - $font_slug_aliases[ $font_slug ] = $font_family_name; | |
| 171 | - } | |
| 172 | - } | |
| 173 | - } | |
| 174 | - | |
| 175 | - return $font_slug_aliases; | |
| 176 | - } | |
| 177 | - | |
| 178 | - /** | |
| 179 | 270 | * Get the font family name from a font. |
| 180 | 271 | * |
| 181 | 272 | * @param array $font The font definition object. |
| 182 | 273 | */ |
| @@ -209,11 +300,10 @@ | ||
| 209 | 300 | if ( ! is_string( $font_family ) ) { |
| 210 | 301 | return null; |
| 211 | 302 | } |
| 212 | 303 | |
| 213 | - // Full string: var(--wp--preset--font-family--slug). | |
| 214 | - // We do not care about the origin of the font, only its slug. | |
| 215 | - preg_match( '/font-family--(?P<slug>.+)\)$/', $font_family, $matches ); | |
| 304 | + // A preset reference can include a var() fallback and a trailing font stack. | |
| 305 | + preg_match( '/^\s*var\(\s*--wp--preset--font-family--(?P<slug>[^\s,()]+)\s*[,)]/', $font_family, $matches ); | |
| 216 | 306 | |
| 217 | 307 | if ( isset( $matches['slug'] ) ) { |
| 218 | 308 | return $matches['slug']; |
| 219 | 309 | } |
| @@ -219,15 +309,15 @@ | ||
| 219 | 309 | } |
| 220 | 310 | |
| 221 | 311 | // Full string: var:preset|font-family|slug |
| 222 | 312 | // We do not care about the origin of the font, only its slug. |
| 223 | - preg_match( '/font-family\|(?P<slug>.+)$/', $font_family, $matches ); | |
| 313 | + preg_match( '/^\s*var:preset\|font-family\|(?P<slug>[^\s,]+)/', $font_family, $matches ); | |
| 224 | 314 | |
| 225 | 315 | if ( isset( $matches['slug'] ) ) { |
| 226 | 316 | return $matches['slug']; |
| 227 | 317 | } |
| 228 | 318 | |
| 229 | - return $font_family; | |
| 319 | + return self::get_font_family_name( $setting['typography'] ); | |
| 230 | 320 | } |
| 231 | 321 | |
| 232 | 322 | /** |
| 233 | 323 | * Check if the current screen is the block editor. |