Add font provider for when it can be used

blockbase/functions.php

@@ -32,7 +32,7 @@ if ( ! function_exists( 'blockbase_support' ) ) :
 		register_nav_menus(
 			array(
 				'primary' => __( 'Primary Navigation', 'blockbase' ),
-				'social' => __( 'Social Navigation', 'blockbase' )
+				'social'  => __( 'Social Navigation', 'blockbase' ),
 			)
 		);
 
@@ -82,7 +82,7 @@ function blockbase_scripts() {
 
 	// Add the child theme CSS if it exists.
 	if ( file_exists( get_stylesheet_directory() . '/assets/theme.css' ) ) {
-		wp_enqueue_style( 'blockbase-child-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array('blockbase-ponyfill'), wp_get_theme()->get( 'Version' ) );
+		wp_enqueue_style( 'blockbase-child-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array( 'blockbase-ponyfill' ), wp_get_theme()->get( 'Version' ) );
 	}
 }
 add_action( 'wp_enqueue_scripts', 'blockbase_scripts' );
@@ -96,14 +96,13 @@ if ( class_exists( 'WP_Theme_JSON_Resolver_Gutenberg' ) ) {
 	require get_template_directory() . '/inc/social-navigation.php';
 }
 
-// Font Management
-require get_template_directory() . '/inc/fonts/custom-fonts.php';
-
+// Font Migration
+require get_template_directory() . '/inc/fonts/custom-font-migration.php';
 // Font settings deprecation message
 require get_template_directory() . '/inc/customizer/wp-customize-fonts.php';
+// Font Management
+require get_template_directory() . '/inc/fonts/custom-fonts.php';
 
-// Font Migration
-require get_template_directory() . '/inc/fonts/custom-font-migration.php';
 
 // Force menus to reload
 add_action(
@@ -112,7 +111,7 @@ add_action(
 		wp_enqueue_script(
 			'wp-customize-nav-menu-refresh',
 			get_template_directory_uri() . '/inc/customizer/wp-customize-nav-menu-refresh.js',
-			[ 'customize-nav-menus' ],
+			array( 'customize-nav-menus' ),
 			wp_get_theme()->get( 'Version' ),
 			true
 		);

blockbase/inc/fonts/blockbase-fonts-provider.php

@@ -0,0 +1,101 @@
+<?php
+
+/**
+ * Blockbase Font Provider
+ */
+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 );
+	}
+
+	/**
+	 * Gets the `@font-face` CSS styles for Blockbase Fonts.
+	 *
+	 * @return string The `@font-face` CSS.
+	 */
+	public function get_css() {
+		$css = '';
+
+		foreach ( $this->webfonts as $webfont ) {
+			$css .= $this->get_style_css( $webfont['font-family'] );
+		}
+
+		return $css;
+	}
+
+}
+
+function provider_enqueue_global_styles_fonts() {
+	if ( is_admin() || ! function_exists( 'wp_enqueue_webfont' ) ) {
+		return;
+	}
+
+	$global_styles_fonts = collect_fonts_from_global_styles();
+
+	foreach ( $global_styles_fonts as $font ) {
+		$font_is_registered = is_font_family_registered( $font );
+
+		if ( $font_is_registered ) {
+			wp_enqueue_webfont( $font );
+		}
+	}
+}
+
+function provider_enqueue_block_fonts( $content, $parsed_block ) {
+	if ( ! is_admin() && isset( $parsed_block['attrs']['fontFamily'] ) ) {
+
+		$font               = $parsed_block['attrs']['fontFamily'];
+		$font_is_registered = is_font_family_registered( $font );
+
+		if ( $font_is_registered ) {
+			wp_enqueue_webfont( $font );
+		}
+	}
+
+	return $content;
+}
+
+/**
+ * Check if a font family is registered (verifying that it can be enqueued).
+ *
+ * This function will not be needed if/when WP_Webfonts provides this functionality.
+ *
+ * @link https://github.com/WordPress/gutenberg/pull/39988
+ * @link https://github.com/WordPress/gutenberg/blob/e94fffae0684aa5a6dc370ce3eba262cb77071d9/lib/experimental/class-wp-webfonts.php#L217
+ *
+ * @param string $font_family_name Name of font family.
+ * @return boolean|void Whether the font family is registered, or void if WP_Webfonts is not available.
+ */
+function is_font_family_registered( $font_family_name ) {
+	if ( ! function_exists( 'wp_webfonts' ) || ! method_exists( 'WP_Webfonts', 'get_font_slug' ) ) {
+		return;
+	}
+
+	$wp_webfonts = wp_webfonts();
+
+	$slug = \WP_Webfonts::get_font_slug( $font_family_name );
+
+	return isset( $wp_webfonts->get_registered_webfonts()[ $slug ] );
+}
+
+function register_blockbase_fonts_provider() {
+
+	if ( ! function_exists( 'wp_register_webfont_provider' ) ) {
+		return;
+	}
+
+	$result = wp_register_webfont_provider( 'blockbase-fonts', 'Blockbase_Fonts_Provider' );
+
+	add_filter( 'pre_render_block', 'provider_enqueue_block_fonts', 10, 2 );
+	add_action( 'init', 'provider_enqueue_global_styles_fonts' );
+}
+add_action( 'after_setup_theme', 'register_blockbase_fonts_provider' );

blockbase/inc/fonts/custom-font-migration.php

@@ -10,8 +10,6 @@ function migrate_blockbase_custom_fonts() {
 
 	$font_settings = wp_get_global_settings( array( 'typography', 'fontFamilies' ) );
 
-	die( var_dump( $font_settings ) );
-
 	// Extract font slugs from legacy data structure.
 	// Look first for fonts customized via Customizer, then for fonts configured in the child theme.json "the old way"
 	if ( isset( $font_settings['custom'] ) && is_array( $font_settings['custom'] ) ) {
@@ -30,8 +28,6 @@ function migrate_blockbase_custom_fonts() {
 		}
 	}
 
-	die( ':' . $body_font_slug . ':' . $heading_font_slug );
-
 	if ( ! $body_font_slug && ! $heading_font_slug ) {
 		//nothing to convert
 		return;

blockbase/inc/fonts/custom-fonts.php

@@ -2,12 +2,12 @@
 
 /**
  * Get the CSS containing font_face values for a given slug
- * 
+ *
  * @return string String of CSS
  */
 function get_style_css( $slug ) {
 	$font_face_file = get_template_directory() . '/assets/fonts/' . $slug . '/font-face.css';
-	if( ! file_exists( $font_face_file ) ) {
+	if ( ! file_exists( $font_face_file ) ) {
 		return '';
 	}
 	$contents = file_get_contents( $font_face_file );
@@ -54,7 +54,7 @@ function collect_fonts_from_global_styles() {
 		$found_webfonts[] = $font_slug;
 	}
 
-	return array_unique($found_webfonts);
+	return array_unique( $found_webfonts );
 }
 
 /**
@@ -92,16 +92,16 @@ function extract_font_slug_from_setting( $setting ) {
 
 /**
  * Build a list of all font slugs provided by theme from theme.json
- * 
+ *
  * @return array Collection of all font slugs defined in the theme.json file
  */
 function collect_fonts_from_blockbase() {
-	$font_family_slugs = Array();
-	$global_styles = wp_get_global_styles();
-	$data = WP_Theme_JSON_Resolver::get_merged_data()->get_raw_data();
-	$font_families = $data['settings']['typography']['fontFamilies']['theme'];
+	$font_family_slugs = array();
+	$global_styles     = wp_get_global_styles();
+	$data              = WP_Theme_JSON_Resolver::get_merged_data()->get_raw_data();
+	$font_families     = $data['settings']['typography']['fontFamilies']['theme'];
 
-	foreach( $font_families as $font_family ) {
+	foreach ( $font_families as $font_family ) {
 		$font_family_slugs[] = $font_family['slug'];
 	}
 
@@ -124,7 +124,7 @@ function enqueue_global_styles_fonts() {
 	}
 
 	foreach ( $fonts as $font ) {
-		$font_css .= get_style_css($font);
+		$font_css .= get_style_css( $font );
 	}
 
 	// Bail out if there are no styles to enqueue.
@@ -145,16 +145,20 @@ function enqueue_global_styles_fonts() {
  * Enqueue all of the fonts provided by Blockbase for FSE use
  */
 function enqueue_fse_font_styles( $fonts ) {
-	$fonts = collect_fonts_from_blockbase();
+	$fonts    = collect_fonts_from_blockbase();
 	$font_css = '';
 
 	foreach ( $fonts as $font ) {
-		$font_css .= get_style_css($font);
+		$font_css .= get_style_css( $font );
 	}
 
 	wp_enqueue_style( 'wp-block-library' );
 	wp_add_inline_style( 'wp-block-library', $font_css );
 }
 
-add_action( 'init', 'enqueue_global_styles_fonts' );
-add_action( 'admin_init', 'enqueue_fse_font_styles' );
+if ( ! class_exists( '\WP_Webfonts_Provider' ) ) {
+	add_action( 'init', 'enqueue_global_styles_fonts' );
+	add_action( 'admin_init', 'enqueue_fse_font_styles' );
+} else {
+	require get_template_directory() . '/inc/fonts/blockbase-fonts-provider.php';
+}

blockbase/theme.json

@@ -368,157 +368,188 @@
 				{
 					"fontFamily": "Arvo, serif",
 					"slug": "arvo",
-					"name": "Arvo"
+					"name": "Arvo",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Bodoni Moda', serif",
 					"slug": "bodoni-moda",
-					"name": "Bodoni Moda"
+					"name": "Bodoni Moda",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Cabin, sans-serif",
 					"slug": "cabin",
-					"name": "Cabin"
+					"name": "Cabin",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Chivo, sans-serif",
 					"slug": "chivo",
-					"name": "Chivo"
+					"name": "Chivo",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Courier Prime', serif",
 					"slug": "courier-prime",
-					"name": "Courier Prime"
+					"name": "Courier Prime",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'DM Sans', sans-serif",
 					"slug": "dm-sans",
-					"name": "DM Sans"
+					"name": "DM Sans",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Domine, serif",
 					"slug": "domine",
-					"name": "Domine"
+					"name": "Domine",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'EB Garamond', serif",
 					"slug": "eb-garamond",
-					"name": "EB Garamond"
+					"name": "EB Garamond",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Fira Sans', sans-serif",
 					"slug": "fira-sans",
-					"name": "Fira Sans"
+					"name": "Fira Sans",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'IBM Plex Mono', monospace",
 					"slug": "ibm-plex-mono",
-					"name": "IBM Plex Mono"
+					"name": "IBM Plex Mono",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Inter, sans-serif",
 					"slug": "inter",
-					"name": "Inter"
+					"name": "Inter",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Josefin Sans', sans-serif",
 					"slug": "josefin-sans",
-					"name": "Josefin Sans"
+					"name": "Josefin Sans",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Libre Baskerville', serif",
 					"slug": "libre-baskerville",
-					"name": "Libre Baskerville"
+					"name": "Libre Baskerville",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Libre Franklin', sans-serif",
 					"slug": "libre-franklin",
-					"name": "Libre Franklin"
+					"name": "Libre Franklin",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Lora, serif",
 					"slug": "lora",
-					"name": "Lora"
+					"name": "Lora",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Merriweather, serif",
 					"slug": "merriweather",
-					"name": "Merriweather"
+					"name": "Merriweather",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Montserrat, sans-serif",
 					"slug": "montserrat",
-					"name": "Montserrat"
+					"name": "Montserrat",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Nunito, sans-serif",
 					"slug": "nunito",
-					"name": "Nunito"
+					"name": "Nunito",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Open Sans', sans-serif",
 					"slug": "open-sans",
-					"name": "Open Sans"
+					"name": "Open Sans",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Overpass, sans-serif",
 					"slug": "overpass",
-					"name": "Overpass"
+					"name": "Overpass",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Playfair Display', serif",
 					"slug": "playfair-display",
-					"name": "Playfair Display"
+					"name": "Playfair Display",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Poppins, sans-serif",
 					"slug": "poppins",
-					"name": "Poppins"
+					"name": "Poppins",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Raleway, sans-serif",
 					"slug": "raleway",
-					"name": "Raleway"
+					"name": "Raleway",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Red Hat Display', sans-serif",
 					"slug": "red-hat-display",
-					"name": "Red Hat Display"
+					"name": "Red Hat Display",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Roboto, sans-serif",
 					"slug": "roboto",
-					"name": "Roboto"
+					"name": "Roboto",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Roboto Slab', sans-serif",
 					"slug": "roboto-slab",
-					"name": "Roboto Slab"
+					"name": "Roboto Slab",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "Rubik, sans-serif",
 					"slug": "rubik",
-					"name": "Rubik"
+					"name": "Rubik",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Source Sans Pro', sans-serif",
 					"slug": "source-sans-pro",
-					"name": "Source Sans Pro"
+					"name": "Source Sans Pro",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Source Serif Pro', sans-serif",
 					"slug": "source-serif-pro",
-					"name": "Source Serif Pro"
+					"name": "Source Serif Pro",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Space Mono', sans-serif",
 					"slug": "space-mono",
-					"name": "Space Mono"
+					"name": "Space Mono",
+					"provider": "blockbase-fonts"
 				},
 				{
 					"fontFamily": "'Work Sans', sans-serif",
 					"slug": "work-sans",
-					"name": "Work Sans"
+					"name": "Work Sans",
+					"provider": "blockbase-fonts"
 				}
 			],
 			"fontSizes": [