Implement blockbase custom fonts with the core webfonts API

blockbase/functions.php

@@ -68,13 +68,6 @@ add_action( 'after_setup_theme', 'blockbase_support', 9 );
  * Enqueue scripts and styles.
  */
 function blockbase_editor_styles() {
-	// Enqueue editor styles.
-	add_editor_style(
-		array(
-			blockbase_fonts_url( true ),
-		)
-	);
-
 	// Add the child theme CSS if it exists.
 	if ( file_exists( get_stylesheet_directory() . '/assets/theme.css' ) ) {
 		add_editor_style(
@@ -89,8 +82,6 @@ add_action( 'admin_init', 'blockbase_editor_styles' );
  * Enqueue scripts and styles.
  */
 function blockbase_scripts() {
-	// Enqueue Google fonts
-	wp_enqueue_style( 'blockbase-fonts', blockbase_fonts_url( false ), array(), null );
 	wp_enqueue_style( 'blockbase-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' ) );
 
 	// Add the child theme CSS if it exists.
@@ -146,98 +137,96 @@ if ( file_exists( get_stylesheet_directory() . '/inc/block-patterns.php' ) ) {
 
 
 // ----------	Custom Fonts ---------- //
+const BLOCKBASE_GOOGLE_FONTS_LIST = array(
+	'Arvo',
+	'Bodoni Moda',
+	'Cabin',
+	'Chivo',
+	'Courier Prime',
+	'DM Sans',
+	'Domine',
+	'EB Garamond',
+	'Fira Sans',
+	'IBM Plex Sans',
+	'IBM Plex Mono',
+	'Inter',
+	'Josefin Sans',
+	'Jost',
+	'Libre Baskerville',
+	'Libre Franklin',
+	'Literata',
+	'Lora',
+	'Merriweather',
+	'Montserrat',
+	'Newsreader',
+	'Nunito',
+	'Open Sans',
+	'Overpass',
+	'Playfair Display',
+	'Poppins',
+	'Raleway',
+	'Red Hat Display',
+	'Roboto',
+	'Roboto Slab',
+	'Rubik',
+	'Source Sans Pro',
+	'Source Serif Pro',
+	'Space Mono',
+	'Texturina',
+	'Work Sans',
+);
 
 /**
- * Font families used in block settings.
- *
- * @var array
- */
-$blockbase_block_font_families = array();
-
-/**
- * Generate url used to load font-face css from Google.
- *
- * @return string
- */
-function blockbase_fonts_url( $load_all_font_options ) {
-	global $blockbase_block_font_families;
-
-	$font_families = [];
-	$font_settings = blockbase_get_font_settings();
-	
-	if ( $load_all_font_options ) {
-		foreach( $font_settings as $font_slug ) {
-			$font_families[] = $font_slug ['google'];
-		}
-	} else {
-		// Only load fonts that appear in the site's frontend
-		$global_styles_fonts = \Automattic\Jetpack\Fonts\Introspectors\Global_Styles::collect_fonts_from_global_styles();
-		$fonts_to_load = array_merge( $blockbase_block_font_families, $global_styles_fonts );
-		$fonts_to_load = array_unique( $fonts_to_load );
-
-		foreach( $fonts_to_load as $font_slug ) {
-			if ( isset( $font_settings[ $font_slug ]['google'] ) ) {
-				$font_families[] = $font_settings[ $font_slug ]['google'];
-			}
-		}
-	}
-
-	if ( empty( $font_families ) ) {
-		return '';
-	}
-
-	// Make a single request for the theme or user fonts.
-	return esc_url_raw( 'https://fonts.googleapis.com/css2?' . implode( '&', array_unique( $font_families ) ) . '&display=swap' );
-}
-
-/**
- * Get an array of the fonts from theme.json, with font slug as the key.
+ * Register a curated selection of Google Fonts.
  *
- * @return array
+ * @return void
  */
-function blockbase_get_font_settings() {
-	$font_settings = wp_get_global_settings( array( 'typography', 'fontFamilies' ) );
-	$remapped_font_settings = array();
+function blockbase_register_google_fonts() {
+	// Use jetpack's implementation of custom google fonts if it is already active
+	if ( method_exists( 'Jetpack', 'is_module_active' ) && Jetpack::is_module_active( 'google-fonts' ) ) {
+		return;
+	} 
 
-	foreach( $font_settings['theme'] as $font ) {
-		$remapped_font_settings[ $font['slug'] ] = $font;
+	if ( ! function_exists( 'wp_register_webfont_provider' ) || ! function_exists( 'wp_register_webfonts' ) ) {
+		return;
 	}
 
-	return $remapped_font_settings;
-}
-
-/**
- * Gather fonts set in block settings.
- *
- * @filter pre_render_block
- *
- * @param string|null $content The pre-rendered content. Default null.
- * @param array       $parsed_block The block being rendered.
- * @return string|null
- */
-function blockbase_enqueue_block_fonts( $content, $parsed_block ) {
-	global $blockbase_block_font_families;
-
-	if ( ! is_admin() && isset( $parsed_block['attrs']['fontFamily'] ) ) {
-		$block_font_family  = $parsed_block['attrs']['fontFamily'];
-		$blockbase_block_font_families[] = $block_font_family;
+	wp_register_webfont_provider( 'blockbase-google-fonts', '\Automattic\Jetpack\Fonts\Google_Fonts_Provider' );
+
+	/**
+	 * Curated list of Google Fonts.
+	 *
+	 * @module google-fonts
+	 *
+	 * @since 10.8
+	 *
+	 * @param array $fonts_to_register Array of Google Font names to register.
+	 */
+	$fonts_to_register = apply_filters( 'blockbase_google_fonts_list', BLOCKBASE_GOOGLE_FONTS_LIST );
+
+	foreach ( $fonts_to_register as $font_family ) {
+		wp_register_webfonts(
+			array(
+				array(
+					'font-family'  => $font_family,
+					'font-weight'  => '100 900',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+					'provider'     => 'blockbase-google-fonts',
+				),
+				array(
+					'font-family'  => $font_family,
+					'font-weight'  => '100 900',
+					'font-style'   => 'italic',
+					'font-display' => 'fallback',
+					'provider'     => 'blockbase-google-fonts',
+				),
+			)
+		);
 	}
 
-	return $content;
-}
-add_filter( 'pre_render_block', 'blockbase_enqueue_block_fonts', 20, 2 );
-
-/**
- * Disable the Jetpack Google Fonts module, since Blockbase provids it's own font loading.
- *
- * Prevents duplicate fonts in font family settings.
- *
- * @return void
- */
-function blockbase_disable_jetpack_google_fonts() {
-	if ( method_exists( 'Jetpack', 'is_module_active' ) && Jetpack::is_module_active( 'google-fonts' ) ) {
-		Jetpack::deactivate_module( 'google-fonts' );
-	}
+	add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 );
+	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' );
 }
-add_action( 'init', 'blockbase_disable_jetpack_google_fonts', 0 );
-remove_action( 'init', 'wpcomsh_activate_google_fonts_module', 0 );
+add_action( 'after_setup_theme', 'blockbase_register_google_fonts' );

blockbase/theme.json

@@ -371,192 +371,6 @@
 					"fontSlug": "system-font",
 					"slug": "heading-font",
 					"name": "Headings (System Font)"
-				},
-				{
-					"fontFamily": "\"Arvo\", serif",
-					"slug": "arvo",
-					"name": "Arvo",
-					"google": "family=Arvo:ital,wght@0,400;0,700;1,400;1,700"
-				},
-				{
-					"fontFamily": "\"Bodoni Moda\", serif",
-					"slug": "bodoni-moda",
-					"name": "Bodoni Moda",
-					"google": "family=Bodoni+Moda:ital,wght@0,400..900;1,400..900"
-				},
-				{
-					"fontFamily": "\"Cabin\", sans-serif",
-					"slug": "cabin",
-					"name": "Cabin",
-					"google": "family=Cabin:ital,wght@0,400..700;1,400..700"
-				},
-				{
-					"fontFamily": "\"Chivo\", sans-serif",
-					"slug": "chivo",
-					"name": "Chivo",
-					"google": "family=Chivo:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900"
-				},
-				{
-					"fontFamily": "\"Courier Prime\", serif",
-					"slug": "courier-prime",
-					"name": "Courier Prime",
-					"google": "family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700"
-				},
-				{
-					"fontFamily": "\"DM Sans\", sans-serif",
-					"slug": "dm-sans",
-					"name": "DM Sans",
-					"google": "family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700\""
-				},
-				{
-					"fontFamily": "\"Domine\", serif",
-					"slug": "domine",
-					"name": "Domine",
-					"google": "family=Domine:wght@400..700"
-				},
-				{
-					"fontFamily": "\"EB Garamond\", serif",
-					"slug": "eb-garamond",
-					"name": "EB Garamond",
-					"google": "family=EB+Garamond:ital,wght@0,400..800;1,400..800"
-				},
-				{
-					"fontFamily": "\"Fira Sans\", sans-serif",
-					"slug": "fira-sans",
-					"name": "Fira Sans",
-					"google": "family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
-				},
-				{
-					"fontFamily": "\"IBM Plex Mono\", monospace",
-					"slug": "ibm-plex-mono",
-					"name": "IBM Plex Mono",
-					"google": "family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700"
-				},
-				{
-					"fontFamily": "\"Inter\", sans-serif",
-					"slug": "inter",
-					"name": "Inter",
-					"google": "family=Inter:wght@100..900"
-				},
-				{
-					"fontFamily": "\"Josefin Sans\", sans-serif",
-					"slug": "josefin-sans",
-					"name": "Josefin Sans",
-					"google": "family=Josefin+Sans:ital,wght@0,100..700;1,100..700"
-				},
-				{
-					"fontFamily": "\"Libre Baskerville\", serif",
-					"slug": "libre-baskerville",
-					"name": "Libre Baskerville",
-					"google": "family=Libre+Baskerville:ital,wght@0,400;0,700;1,400"
-				},
-				{
-					"fontFamily": "\"Libre Franklin\", sans-serif",
-					"slug": "libre-franklin",
-					"name": "Libre Franklin",
-					"google": "family=Libre+Franklin:ital,wght@0,100..900;1,100..900"
-				},
-				{
-					"fontFamily": "\"Lora\", serif",
-					"slug": "lora",
-					"name": "Lora",
-					"google": "family=Lora:ital,wght@0,400..700;1,400..700"
-				},
-				{
-					"fontFamily": "\"Merriweather\", serif",
-					"slug": "merriweather",
-					"name": "Merriweather",
-					"google": "family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900"
-				},
-				{
-					"fontFamily": "\"Montserrat\", sans-serif",
-					"slug": "montserrat",
-					"name": "Montserrat",
-					"google": "family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
-				},
-				{
-					"fontFamily": "\"Nunito\", sans-serif",
-					"slug": "nunito",
-					"name": "Nunito",
-					"google": "family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900"
-				},
-				{
-					"fontFamily": "\"Open Sans\", sans-serif",
-					"slug": "open-sans",
-					"name": "Open Sans",
-					"google": "family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800"
-				},
-				{
-					"fontFamily": "\"Overpass\", sans-serif",
-					"slug": "overpass",
-					"name": "Overpass",
-					"google": "family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
-				},
-				{
-					"fontFamily": "\"Playfair Display\", serif",
-					"slug": "playfair-display",
-					"name": "Playfair Display",
-					"google": "family=Playfair+Display:ital,wght@0,400..900;1,400..900"
-				},
-				{
-					"fontFamily": "\"Poppins\", sans-serif",
-					"slug": "poppins",
-					"name": "Poppins",
-					"google": "family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
-				},
-				{
-					"fontFamily": "\"Raleway\", sans-serif",
-					"slug": "raleway",
-					"name": "Raleway",
-					"google": "family=Raleway:ital,wght@0,100..900;1,100..900"
-				},
-				{
-					"fontFamily": "\"Red Hat Display\", sans-serif",
-					"slug": "red-hat-display",
-					"name": "Red Hat Display",
-					"google": "family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
-				},
-				{
-					"fontFamily": "\"Roboto\", sans-serif",
-					"slug": "roboto",
-					"name": "Roboto",
-					"google": "family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900"
-				},
-				{
-					"fontFamily": "\"Roboto Slab\", sans-serif",
-					"slug": "roboto-slab",
-					"name": "Roboto Slab",
-					"google": "family=Roboto+Slab:wght@100..900"
-				},
-				{
-					"fontFamily": "\"Rubik\", sans-serif",
-					"slug": "rubik",
-					"name": "Rubik",
-					"google": "family=Rubik:ital,wght@0,300..900;1,300..900"
-				},
-				{
-					"fontFamily": "\"Source Sans Pro\", sans-serif",
-					"slug": "source-sans-pro",
-					"name": "Source Sans Pro",
-					"google": "family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900"
-				},
-				{
-					"fontFamily": "\"Source Serif Pro\", serif",
-					"slug": "source-serif-pro",
-					"name": "Source Serif Pro",
-					"google": "family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900"
-				},
-				{
-					"fontFamily": "\"Space Mono\", sans-serif",
-					"slug": "space-mono",
-					"name": "Space Mono",
-					"google": "family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700"
-				},
-				{
-					"fontFamily": "\"Work Sans\", sans-serif",
-					"slug": "work-sans",
-					"name": "Work Sans",
-					"google": "family=Work+Sans:ital,wght@0,100..900;1,100..900"
 				}
 			],
 			"fontSizes": [