Implementing a Webfonts API

lib/compat/wordpress-5.9/class-wp-theme-json-resolver-gutenberg.php

@@ -144,7 +144,11 @@ public static function get_theme_data( $deprecated = array() ) {
 		if ( null === self::$theme ) {
 			$theme_json_data = self::read_json_file( self::get_file_path_from_theme( 'theme.json' ) );
 			$theme_json_data = self::translate( $theme_json_data, wp_get_theme()->get( 'TextDomain' ) );
-			self::$theme     = new WP_Theme_JSON_Gutenberg( $theme_json_data );
+
+			// Add webfonts data.
+			$theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $theme_json_data );
+
+			self::$theme = new WP_Theme_JSON_Gutenberg( $theme_json_data );
 
 			if ( wp_get_theme()->parent() ) {
 				// Get parent theme.json.

lib/global-styles.php

@@ -288,6 +288,133 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
 	return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) );
 }
 
+/**
+ * Register webfonts defined in theme.json.
+ */
+function gutenberg_register_webfonts_from_theme_json() {
+	// Get settings from theme.json.
+	$theme_settings = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_settings();
+
+	// Bail out early if there are no settings for webfonts.
+	if ( empty( $theme_settings['typography'] ) || empty( $theme_settings['typography']['fontFamilies'] ) ) {
+		return;
+	}
+
+	$webfonts = array();
+
+	// Look for fontFamilies.
+	foreach ( $theme_settings['typography']['fontFamilies'] as $font_families ) {
+		foreach ( $font_families as $font_family ) {
+
+			// Skip if fontFace is not defined.
+			if ( empty( $font_family['fontFace'] ) ) {
+				continue;
+			}
+
+			$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               = _wp_to_kebab_case( $property );
+					$font_face[ $kebab_case ] = $value;
+					if ( $kebab_case !== $property ) {
+						unset( $font_face[ $property ] );
+					}
+				}
+
+				$webfonts[] = $font_face;
+			}
+		}
+	}
+	wp_register_webfonts( $webfonts );
+}
+
+/**
+ * Add missing fonts data to the global styles.
+ *
+ * @param array $data The global styles.
+ *
+ * @return array The global styles with missing fonts data.
+ */
+function gutenberg_add_registered_webfonts_to_theme_json( $data ) {
+	$font_families_registered = wp_webfonts()->webfonts()->get_all_registered();
+	$font_families_from_theme = array();
+	if ( ! empty( $data['settings'] ) && ! empty( $data['settings']['typography'] ) && ! empty( $data['settings']['typography']['fontFamilies'] ) ) {
+		$font_families_from_theme = $data['settings']['typography']['fontFamilies'];
+	}
+
+	/**
+	 * Helper to get an array of the font-families.
+	 *
+	 * @param array $families_data The font-families data.
+	 *
+	 * @return array The font-families array.
+	 */
+	$get_families = function( $families_data ) {
+		$families = array();
+		foreach ( $families_data as $family ) {
+			if ( isset( $family['font-family'] ) ) {
+				$families[] = $family['font-family'];
+			} elseif ( isset( $family['fontFamily'] ) ) {
+				$families[] = $family['fontFamily'];
+			}
+		}
+
+		// Micro-optimization: Use array_flip( array_flip( $array ) )
+		// instead of array_unique( $array ) because it's faster.
+		// The result is the same.
+		return array_flip( array_flip( $families ) );
+	};
+
+	// Diff the arrays to find the missing fonts.
+	$to_add = array_diff(
+		$get_families( $font_families_registered ),
+		$get_families( $font_families_from_theme )
+	);
+
+	// Bail out early if there are no missing fonts.
+	if ( empty( $to_add ) ) {
+		return $data;
+	}
+
+	// Make sure the path to settings.typography.fontFamilies.theme exists
+	// before adding missing fonts.
+	if ( empty( $data['settings'] ) ) {
+		$data['settings'] = array();
+	}
+	if ( empty( $data['settings']['typography'] ) ) {
+		$data['settings']['typography'] = array();
+	}
+	if ( empty( $data['settings']['typography']['fontFamilies'] ) ) {
+		$data['settings']['typography']['fontFamilies'] = array();
+	}
+
+	// Add missing fonts.
+	foreach ( $to_add as $family ) {
+		$data['settings']['typography']['fontFamilies'][] = array(
+			'fontFamily' => false !== strpos( $family, ' ' ) ? "'{$family}'" : $family,
+			'name'       => $family,
+			'slug'       => sanitize_title( $family ),
+		);
+	}
+
+	return $data;
+}
+
 // The else clause can be removed when plugin support requires WordPress 5.8.0+.
 if ( function_exists( 'get_block_editor_settings' ) ) {
 	add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
@@ -297,6 +424,7 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
 
 add_action( 'init', 'gutenberg_experimental_global_styles_register_user_cpt' );
 add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
+add_action( 'wp_loaded', 'gutenberg_register_webfonts_from_theme_json' );
 
 // kses actions&filters.
 add_action( 'init', 'gutenberg_global_styles_kses_init' );

lib/load.php

@@ -146,3 +146,31 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/spacing.php';
 require __DIR__ . '/block-supports/dimensions.php';
 require __DIR__ . '/block-supports/duotone.php';
+
+// Webfonts API.
+if ( ! function_exists( 'wp_webfonts' ) ) {
+
+	/** WordPress Webfonts Classes & Functions */
+	require_once __DIR__ . '/webfonts-api/class-wp-webfonts-schema-validator.php';
+	require_once __DIR__ . '/webfonts-api/class-wp-webfonts-registry.php';
+	require_once __DIR__ . '/webfonts-api/class-wp-webfonts-provider-registry.php';
+	require_once __DIR__ . '/webfonts-api/class-wp-webfonts-controller.php';
+	require_once __DIR__ . '/webfonts.php';
+
+	/**
+	 * Add webfonts mime types.
+	 */
+	add_filter(
+		'mime_types',
+		function( $mime_types ) {
+			// Webfonts formats.
+			$mime_types['woff2'] = 'font/woff2';
+			$mime_types['woff']  = 'font/woff';
+			$mime_types['ttf']   = 'font/ttf';
+			$mime_types['eot']   = 'application/vnd.ms-fontobject';
+			$mime_types['otf']   = 'application/x-font-opentype';
+
+			return $mime_types;
+		}
+	);
+}