Update theme.json implementation

Now uses settings['typography']['fontFamilies'][]['fontFace']
WordPress · Nov 11, 2021 · 0093e68 · 0093e68
1 parent 0ec669a
commit 0093e68
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -120,7 +120,6 @@ class WP_Theme_JSON_Gutenberg {
 			'lineHeight'     => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
-			'webfonts'       => null,
 		),
 	);
 

diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -292,30 +292,52 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
  * Register webfonts defined in theme.json.
  */
 function gutenberg_register_webfonts_from_theme_json() {
-	if ( ! function_exists( 'wp_register_webfonts' ) ) {
-		return;
-	}
 	$theme_settings = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_settings();
-	if ( ! empty( $theme_settings['typography'] ) && ! empty( $theme_settings['typography']['webfonts'] ) ) {
+	if (
+		! empty( $theme_settings['typography'] ) &&
+		! empty( $theme_settings['typography']['fontFamilies'] )
+	) {
+		$webfonts = array();
 
-		// Check if webfonts have a "src" param, and if they do account for the use of "file:./".
-		foreach ( $theme_settings['typography']['webfonts'] as $key => $webfont ) {
-			if ( empty( $webfont['src'] ) ) {
-				continue;
-			}
-			$webfont['src'] = (array) $webfont['src'];
+		// Look for fontFamilies.
+		foreach ( $theme_settings['typography']['fontFamilies'] as $context => $font_families ) {
+			foreach ( $font_families as $key => $font_family ) {
 
-			foreach ( $webfont['src'] as $src_key => $url ) {
-				// Tweak the URL to be relative to the theme root.
-				if ( 0 !== strpos( $url, 'file:./' ) ) {
+				// Skip if fontFace is not defined.
+				if ( empty( $font_family['fontFace'] ) ) {
 					continue;
 				}
-				$webfont['src'][ $src_key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
-			}
 
-			$theme_settings['typography']['webfonts'][ $key ] = $webfont;
+				$font_family['fontFace'] = (array) $font_family['fontFace'];
+
+				foreach ( $font_family['fontFace'] as $font_face ) {
+					// Check if webfonts have a "src" param, and if they do account for the use of "file:./".
+					if ( ! empty( $font_face['src'] ) ) {
+						$font_face['src'] = (array) $font_face['src'];
+
+						foreach ( $font_face['src'] as $src_key => $url ) {
+							// Tweak the URL to be relative to the theme root.
+							if ( 0 !== strpos( $url, 'file:./' ) ) {
+								continue;
+							}
+							$font_face['src'][ $src_key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
+						}
+					}
+
+					// Convert keys to kebab-case.
+					foreach ( $font_face as $property => $value ) {
+						$kebab_case               = gutenberg_experimental_to_kebab_case( $property );
+						$font_face[ $kebab_case ] = $value;
+						if ( $kebab_case !== $property ) {
+							unset( $font_face[ $property ] );
+						}
+					}
+
+					$webfonts[] = $font_face;
+				}
+			}
 		}
-		wp_register_webfonts( $theme_settings['typography']['webfonts'] );
+		wp_register_webfonts( $webfonts );
 	}
 }