replace font provider with logic

blockbase/functions.php

@@ -102,9 +102,11 @@ if ( class_exists( 'WP_Theme_JSON_Resolver_Gutenberg' ) ) {
 	require get_template_directory() . '/inc/customizer/wp-customize-colors.php';
 	require get_template_directory() . '/inc/customizer/wp-customize-color-palettes.php';
 	require get_template_directory() . '/inc/social-navigation.php';
-	require get_template_directory() . '/inc/fonts/custom-fonts.php';
 }
 
+// Font Management
+require get_template_directory() . '/inc/fonts/custom-fonts.php';
+
 // Font settings migration and deprecation message. Fonts now set in Global Styles.
 require get_template_directory() . '/inc/customizer/wp-customize-fonts.php';
 

blockbase/inc/fonts/custom-fonts.php

@@ -1,124 +1,128 @@
 <?php
 
-if ( ! class_exists( '\WP_Webfonts_Provider' ) ) {
-	return;
+function get_style_css( $slug ) {
+	$font_face_file = get_template_directory() . '/assets/fonts/' . $slug . '/font-face.css';
+	if( ! file_exists( $font_face_file ) ) {
+		return '';
+	}
+	$contents = file_get_contents( $font_face_file );
+	return str_replace( 'src: url(./', 'src: url(' . get_template_directory_uri() . '/assets/fonts/' . $slug . '/', $contents );
 }
 
 /**
- * Blockbase Font Provider
+ * Collect fonts set in Global Styles settings.
+ *
+ * @return array Font faces from Global Styles settings.
  */
-class Blockbase_Fonts_Provider extends \WP_Webfonts_Provider {
-
-	/**
-	 * Font provider ID.
-	 *
-	 * @var string
-	 */
-	protected $id = 'blockbase-fonts';
-
-	protected function get_style_css( $family ) {
-		$contents = file_get_contents( get_template_directory() . '/assets/fonts/' . $family . '/font-face.css' );
-		return str_replace( 'src: url(./', 'src: url(' . get_template_directory_uri() . '/assets/fonts/' . $family . '/', $contents );
+function collect_fonts_from_global_styles() {
+
+	$global_styles = wp_get_global_styles();
+
+	$found_webfonts = array();
+
+	// Look for fonts in block presets...
+	if ( isset( $global_styles['blocks'] ) ) {
+		foreach ( $global_styles['blocks'] as $setting ) {
+			$font_slug = extract_font_slug_from_setting( $setting );
+
+			if ( $font_slug ) {
+				$found_webfonts[] = $font_slug;
+			}
+		}
 	}
 
-	/**
-	 * Gets the `@font-face` CSS styles for Blockbase Fonts.
-	 *
-	 * @return string The `@font-face` CSS.
-	 */
-	public function get_css() {
-		$css  = '';
+	// Look for fonts in HTML element presets...
+	if ( isset( $global_styles['elements'] ) ) {
+		foreach ( $global_styles['elements'] as $setting ) {
+			$font_slug = extract_font_slug_from_setting( $setting );
 
-		foreach ( $this->webfonts as $webfont ) {
-			$css .= $this->get_style_css( $webfont['font-family'] );
+			if ( $font_slug ) {
+				$found_webfonts[] = $font_slug;
+			}
 		}
+	}
 
-		return $css;
+	// Check if a global typography setting was defined.
+	$font_slug = extract_font_slug_from_setting( $global_styles );
+
+	if ( $font_slug ) {
+		$found_webfonts[] = $font_slug;
 	}
 
+	return $found_webfonts;
 }
 
-// ---------- Custom Fonts ---------- //
-const BLOCKBASE_FONTS_LIST = array(
-	'arvo' => array( 'font_family' => 'Arvo'),
-	'cabin' => array( 'font_family' => 'Cabin'),
-);
-
 /**
- * Register a curated selection of Fonts.
+ * Extract the font family slug from a settings array.
  *
- * @return void
+ * @param array $setting The settings object.
+ *
+ * @return string|null
  */
-function blockbase_register_fonts() {
-
-	if ( ! function_exists( 'wp_register_webfont_provider' ) || ! function_exists( 'wp_register_webfonts' ) ) {
-		return;
+function extract_font_slug_from_setting( $setting ) {
+	if ( ! isset( $setting['typography']['fontFamily'] ) ) {
+		return null;
 	}
 
-	$result = wp_register_webfont_provider( 'blockbase-fonts', 'Blockbase_Fonts_Provider' );
-
-	/**
-	 * Curated list of Fonts.
-	 */
-	$fonts_to_register = apply_filters( 'blockbase_fonts_list', BLOCKBASE_FONTS_LIST );
-
-	foreach ( $fonts_to_register as $font_settings ) {
-		$font_family = $font_settings['font_family'];
-
-		wp_register_webfonts(
-			array(
-				array(
-					'font-family'  => $font_family,
-					'font-weight'  => '100 900',
-					'font-style'   => 'normal',
-					'font-display' => 'swap',
-					'provider'     => 'blockbase-fonts',
-				),
-				array(
-					'font-family'  => $font_family,
-					'font-weight'  => '100 900',
-					'font-style'   => 'italic',
-					'font-display' => 'swap',
-					'provider'     => 'blockbase-fonts',
-				),
-			)
-		);
+	$font_family = $setting['typography']['fontFamily'];
+
+	// Full string: var(--wp--preset--font-family--slug).
+	// We do not care about the origin of the font, only its slug.
+	preg_match( '/font-family--(?P<slug>.+)\)$/', $font_family, $matches );
+
+	if ( isset( $matches['slug'] ) ) {
+		return $matches['slug'];
 	}
 
-	//TODO: Could/should this be moved out to here?
-	add_filter( 'pre_render_block', '\Automattic\Jetpack\Fonts\Introspectors\Blocks::enqueue_block_fonts', 10, 2 );
-	add_action( 'init', '\Automattic\Jetpack\Fonts\Introspectors\Global_Styles::enqueue_global_styles_fonts' );
+	// Full string: var:preset|font-family|slug
+	// We do not care about the origin of the font, only its slug.
+	preg_match( '/font-family\|(?P<slug>.+)$/', $font_family, $matches );
+
+	if ( isset( $matches['slug'] ) ) {
+		return $matches['slug'];
+	}
 
+	return $font_family;
 }
-add_action( 'after_setup_theme', 'blockbase_register_fonts' );
 
 /**
- * Automatically enqueues default blockbase theme fonts
- * TODO: Shouldn't these font resources be handled in Introspectors\Global_Styles::enqueue_global_styles_fonts? 
+ * Provide fonts used in global styles settings.
  *
  * @return void
  */
-function blockbase_enqueue_default_fonts() {
-	if ( ! function_exists( 'wp_enqueue_webfont' ) ) {
-		return;
+function enqueue_global_styles_fonts() {
+
+	if ( is_admin() ) {
+		$fonts = collect_fonts_from_blockbase();
+	} else {
+		$fonts = collect_fonts_from_global_styles();
 	}
+	enqueue_font_styles( $fonts );
+}
+
+function enqueue_font_styles( $fonts ) {
+	$font_css = '';
 
-	$font_settings = wp_get_global_settings( array( 'typography', 'fontFamilies' ), 'base' );
+	foreach ( $fonts as $font ) {
+		$font_css .= get_style_css($font);
+	}
 
-	if ( ! isset( $font_settings['theme'] ) ) {
+	// Bail out if there are no styles to enqueue.
+	if ( '' === $font_css ) {
 		return;
 	}
 
-	foreach( $font_settings['theme'] as $font_setting ) {
-		if ( ! isset( $font_setting['fontSlug'] ) ) {
-			continue;
-		}
+	// Enqueue the stylesheet.
+	wp_register_style( 'blockbase_font_faces', '' );
+	wp_enqueue_style( 'blockbase_font_faces' );
 
-		$font_slug = $font_setting['fontSlug'];
+	// Add the styles to the stylesheet.
+	wp_add_inline_style( 'blockbase_font_faces', $font_css );
+}
 
-		if ( $font_slug && isset( BLOCKBASE_FONTS_LIST[$font_slug] ) ) {
-			$font_family = BLOCKBASE_FONTS_LIST[$font_slug]['font_family'];
-			wp_enqueue_webfont( $font_family );
-		}
-	}
-}
+function collect_fonts_from_blockbase() {
+	return ['arvo', 'cabin'];
+}
+
+add_action( 'init', 'enqueue_global_styles_fonts' );
+add_action( 'admin_init', 'enqueue_editor_global_styles_fonts' );

blockbase/theme.json

@@ -362,15 +362,18 @@
 			"fontFamilies": [
 				{
 					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-					"fontSlug": "system-font",
 					"slug": "body-font",
 					"name": "Body (System Font)"
 				},
 				{
-					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-					"fontSlug": "system-font",
-					"slug": "heading-font",
-					"name": "Headings (System Font)"
+					"fontFamily": "Arvo",
+					"slug": "arvo",
+					"name": "Arvo"
+				},
+				{
+					"fontFamily": "Cabin",
+					"slug": "cabin",
+					"name": "Cabin"
 				}
 			],
 			"fontSizes": [
@@ -543,7 +546,6 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading-font)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--custom--font-sizes--huge)"