Web Fonts Tester plugin: uses Jetpack's Google Fonts composer package.

README.md

Web Fonts API tester plugin using Jetpack's Google Fonts composer package

This is a tester plugin for the Web Fonts API. It uses the Jetpack Google Fonts Provider composer package.

This package uses the original webfonts array structure, which is now deprecated.

How to install

1. In your local dev environment, create a new folder in wp-content/plugins/ called webfonts.
2. In a command line tool (such as Terminal), type: composer install.
3. Then activate the plugin in your test site's admin area.

How to test

1. Open the Site Editor
2. Open the Global Styles UI
3. Open Typography
4. Open Text
5. Select a Google Font
   • Expected behavior: The text should change to that font.
6. Then go to Heaings
7. Select a Google Font
   • Expected behavior: The headings should change to that font.
8. Save the global styles.
9. Go to the front-end. Then visually check that the text and headings look like for those fonts.
10. Check the error log to verify deprecation notices are present.

What should the fonts visually look like?

This plugin has the following fonts. You can visually see how the font should look by clicking to go to Google Fonts website.

• Arvo: Visually see it
• Lato: Visually see it
• Merriweather: Visually see it
• Playfair Display: Visually see it
• Roboto: Visually see it

composer.json

{
  "name": "test/webfonts-jetpack",
  "license": "GPL-2.0-or-later",
  "description": "Testing Jetpack Google Fonts with Web Fonts API",
  "require": {
	"automattic/jetpack-google-fonts-provider": "dev-trunk"
  }
}

webfonts.php

<?php
/**
 * Plugin Name: Web API Plugin Tester
 * Plugin URI: https://github.com/test/test
 * Description: Tests a plugin interacting with the API. Uses Jetpack's Google Fonts Provider package.
 * Requires at least: 5.9
 * Requires PHP: 5.6
 * Version: 1.0.0
 * Author: Gutenberg Team
 */

require_once __DIR__ . '/vendor/autoload.php';

/**
 * Checks if this plugin should register web fonts definition using the
 * deprecated (original) array structure.
 *
 * To enable, add `&webfonts_deprecated=1` to the site's URL and refresh the page.
 *
 * @return bool
 */
function _use_deprecated_wdebfonts_structure() {
	return ( isset( $_REQUEST['webfonts_deprecated'] ) && $_REQUEST['webfonts_deprecated'] );
}

add_action(
	'after_setup_theme',
	function() {
		if ( ! function_exists( 'wp_register_webfont_provider' ) ) {
			return;
		}


		$use_deprecated = _use_deprecated_wdebfonts_structure();
		wp_register_webfont_provider( 'jetpack-google-fonts', '\Automattic\Jetpack\Fonts\Google_Fonts_Provider' );

		$fonts_to_register = array(
			'Arvo',
			'Lato',
			'Merriweather',
			'Playfair Display',
			'Roboto',
		);

		$webfonts = array();

		foreach ( $fonts_to_register as $font_family ) {
			if ( $use_deprecated ) {
				// Original API > deprecated webfonts structure.
				$webfonts[] = array(
					'font-family'  => $font_family,
					'font-weight'  => '100 900',
					'font-style'   => 'normal',
					'font-display' => 'fallback',
					'provider'     => 'jetpack-google-fonts',
				);
				$webfonts[] = array(
					'font-family'  => $font_family,
					'font-weight'  => '100 900',
					'font-style'   => 'italic',
					'font-display' => 'fallback',
					'provider'     => 'jetpack-google-fonts',
				);

			} else {
				// New API.
				$webfonts[ $font_family ] = array(
					array(
						'font-family'  => $font_family,
						'font-weight'  => '100 900',
						'font-style'   => 'normal',
						'font-display' => 'fallback',
						'provider'     => 'jetpack-google-fonts',
					),
					array(
						'font-family'  => $font_family,
						'font-weight'  => '100 900',
						'font-style'   => 'italic',
						'font-display' => 'fallback',
						'provider'     => 'jetpack-google-fonts',
					),
				);
			}
		}

		wp_register_webfonts( $webfonts );
	}
);

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', 22 );

if ( ! function_exists( 'gutenberg_get_global_styles' ) ) {
	/**
	 * Polyfill: Jetpack's package uses the Gutenberg function instead of
	 * the WordPress Core function. The function was removed from Gutenberg
	 * when `lib/compat/wordpress-6.0/` was removed.
	 *
	 * Function to get the styles resulting of merging core, theme, and user data.
	 *
	 * @param array $path    Path to the specific style to retrieve. Optional.
	 *                       If empty, will return all styles.
	 * @param array $context {
	 *     Metadata to know where to retrieve the $path from. Optional.
	 *
	 *     @type string $block_name Which block to retrieve the styles from.
	 *                              If empty, it'll return the styles for the global context.
	 *     @type string $origin     Which origin to take data from.
	 *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
	 *                              If empty or unknown, 'all' is used.
	 * }
	 *
	 * @return array The styles to retrieve.
	 */
	function gutenberg_get_global_styles( $path = array(), $context = array() ) {
		return wp_get_global_styles( $path, $context );
	}
}