Google Fonts: update the method used to preconnect Fonts source domai…

…n. (#23322) * Google Fonts: update method used to preconnect Fonts source domain Follow-up to #23045 Let's favor using a Core implementation with a Core filter instead of manually adding to the head. * Use filter instead of action * Only add resource hint if the site supports the Webfonts API See #23306 * Update readme with latest method name. * Introduce new class that doesn't depend on WP_Webfonts_Provider WP_Webfonts_Provider may not always be available, so we cannot call a method from a child class of `WP_Webfonts_Provider` from a WP filter. Let's introduce a new class instead, that doesn't depend on anything, and do the class check inside there. That should simplify things a bit for the folks having to implement that filtering. Co-authored-by: Brandon Kraft <[email protected]>
Automattic · Mar 14, 2022 · 212b4d7 · 212b4d7
1 parent 6d62ee3
commit 212b4d7
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 50 deletions.
diff --git a/projects/packages/google-fonts-provider/README.md b/projects/packages/google-fonts-provider/README.md
@@ -41,11 +41,10 @@ wp_register_webfont(
 
 ### Add preconnect link
 
-Adding a preconnect link to the `<head>` of the page will help make sure the font files load as soon as possible, and reduce the layout shift when they are displayed. See [this list of webfont best practices](https://web.dev/font-best-practices/#preconnect-to-critical-third-party-origins) for more details.
+Adding a preconnect link to the `<head>` of the page will help make sure the font files load as soon as possible, and reduce the layout shift when they are displayed. See [this list of webfont best practices](https://web.dev/font-best-practices/#preconnect-to-critical-third-party-origins) for more details. To do so, we can rely on WordPress' `wp_resource_hints` filter like so:
 
 ```php
-// Run on an early priority to print out the preconnect link tag near the start of the page source.
-add_action( 'wp_head', '\Automattic\Jetpack\Fonts\Google_Fonts_Provider::preconnect_font_source', 0 );
+add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 );
 ```
 
 ### Additional info

diff --git a/projects/packages/google-fonts-provider/changelog/update-google-fonts-preconnect b/projects/packages/google-fonts-provider/changelog/update-google-fonts-preconnect
@@ -0,0 +1,4 @@
+Significance: minor
+Type: deprecated
+
+Google Fonts: update the method used to preconnect Fonts source domain.
diff --git a/projects/packages/google-fonts-provider/composer.json b/projects/packages/google-fonts-provider/composer.json
@@ -43,7 +43,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-google-fonts-provider/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-master": "0.1.x-dev"
+			"dev-master": "0.2.x-dev"
 		},
 		"textdomain": "jetpack-google-fonts-provider"
 	}

diff --git a/projects/packages/google-fonts-provider/package.json b/projects/packages/google-fonts-provider/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-google-fonts-provider",
-	"version": "0.1.1-alpha",
+	"version": "0.2.0-alpha",
 	"description": "WordPress Webfonts provider for Google Fonts",
 	"homepage": "https://jetpack.com",
 	"bugs": {

diff --git a/projects/packages/google-fonts-provider/src/class-google-fonts-provider.php b/projects/packages/google-fonts-provider/src/class-google-fonts-provider.php
@@ -2,7 +2,7 @@
 /**
  * WordPress webfonts provider for Google Fonts
  *
- * @package automattic/google-fonts-provider
+ * @package automattic/jetpack-google-fonts-provider
  * @since 0.1.0
  */
 
@@ -36,9 +36,13 @@ class Google_Fonts_Provider extends \WP_Webfonts_Provider {
 	 *
 	 * Hook this function into `wp_head` to enable the preconnect link.
 	 *
+	 * @deprecated 0.2.0 Use Automattic\Jetpack\Fonts\Utils::font_source_resource_hint() instead.
+	 *
 	 * @return void
 	 */
 	public static function preconnect_font_source() {
+		_deprecated_function( __METHOD__, '0.2.0', 'Automattic\\Jetpack\\Fonts\\Utils::font_source_resource_hint' );
+
 		$fonts_url = \set_url_scheme( 'https://fonts.gstatic.com' ); ?>
 <link rel="preconnect" href="<?php echo esc_url( $fonts_url ); ?>" crossorigin>
 		<?php

diff --git a/projects/packages/google-fonts-provider/src/class-utils.php b/projects/packages/google-fonts-provider/src/class-utils.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Google Fonts package Utils class file.
+ *
+ * @package automattic/jetpack-google-fonts-provider
+ */
+
+namespace Automattic\Jetpack\Fonts;
+
+/**
+ * Provides utility methods for the Google Fonts Provider package.
+ */
+class Utils {
+	/**
+	 * Adds a preconnect link for improving performance when downloading Google Font files.
+	 * Only do so if the site supports the Webfonts API.
+	 *
+	 * @param array  $urls          Array of resources and their attributes, or URLs to print for resource hints.
+	 * @param string $relation_type The relation type the URLs are printed for, e.g. 'preconnect' or 'prerender'.
+	 */
+	public static function font_source_resource_hint( $urls, $relation_type ) {
+		if (
+			'preconnect' === $relation_type
+			&& class_exists( 'WP_Webfonts_Provider' )
+		) {
+			$urls[] = array(
+				'href' => 'https://fonts.gstatic.com',
+				'crossorigin',
+			);
+		}
+
+		return $urls;
+	}
+}
diff --git a/projects/plugins/jetpack/changelog/update-google-fonts-preconnect b/projects/plugins/jetpack/changelog/update-google-fonts-preconnect
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Google Fonts: update the method used to preconnect Fonts source domain.
diff --git a/projects/plugins/jetpack/composer.json b/projects/plugins/jetpack/composer.json
@@ -25,7 +25,7 @@
 		"automattic/jetpack-constants": "1.6.x-dev",
 		"automattic/jetpack-device-detection": "1.4.x-dev",
 		"automattic/jetpack-error": "1.3.x-dev",
-		"automattic/jetpack-google-fonts-provider": "0.1.x-dev",
+		"automattic/jetpack-google-fonts-provider": "0.2.x-dev",
 		"automattic/jetpack-heartbeat": "1.4.x-dev",
 		"automattic/jetpack-identity-crisis": "0.8.x-dev",
 		"automattic/jetpack-jitm": "2.2.x-dev",

diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock
diff --git a/projects/plugins/jetpack/modules/google-fonts.php b/projects/plugins/jetpack/modules/google-fonts.php
@@ -96,5 +96,4 @@ function jetpack_add_google_fonts_provider() {
 }
 add_action( 'after_setup_theme', 'jetpack_add_google_fonts_provider' );
 
-// Run on an early priority to print out the preconnect link tag near the start of the page source.
-add_action( 'wp_head', '\Automattic\Jetpack\Fonts\Google_Fonts_Provider::preconnect_font_source', 0 );
+add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 );