Simplify the preconnect-URLs implementation

WordPress · hellofromtonya · Aug 6, 2021 · Oct 6, 2021 · Oct 11, 2021 · Oct 11, 2021
commit 0883e97fe429b0551c6009540855f0db324fec98
diff --git a/src/wp-includes/webfonts-api/class-wp-webfonts-controller.php b/src/wp-includes/webfonts-api/class-wp-webfonts-controller.php
@@ -124,23 +124,12 @@ private function generate_styles() {
 				continue;
 			}
 
-			add_action( 'wp_head', array( $this, 'render_links' ) );
-
 			$provider->set_webfonts( $registered_webfonts );
 			$styles .= $provider->get_css();
 		}
 		return $styles;
 	}
 
-	/**
-	 * Renders the HTML `<link>` for each provider into `<head>` for enqueued webfonts.
-	 *
-	 * @since 5.9.0
-	 */
-	public function render_links() {
-		echo $this->providers->get_links();
-	}
-
 	/**
 	 * Get the webfonts registry.
 	 *

diff --git a/src/wp-includes/webfonts-api/class-wp-webfonts-provider-registry.php b/src/wp-includes/webfonts-api/class-wp-webfonts-provider-registry.php
@@ -17,7 +17,6 @@
  *  - registers each provider with the API by:
  *       1. creating an instance (object);
  *       2. storing it in-memory (by its unique provider ID) for use with the API;
- *  - handles generating the linked resources `<link>` for all providers.
  *
  * @since 5.9.0
  */
@@ -106,106 +105,4 @@ public function register( $classname ) {
 
 		return true;
 	}
-
-	/**
-	 * Gets the HTML `<link>` for each provider.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @return string HTML links for each provider.
-	 */
-	public function get_links() {
-		/*
-		 * Store each `<link>` by its provider ID. Why?
-		 * To ensure only one link is created per provider.
-		 */
-		static $links = array();
-
-		foreach ( $this->get_all_registered() as $provider_id => $provider ) {
-			// Skip if the provider already added the link.
-			if ( isset( $links[ $provider_id ] ) ) {
-				continue;
-			}
-
-			$links[ $provider_id ] = $this->generate_links( $provider );
-		}
-
-		// Combine `<link>` elements and return them as a string.
-		return implode( '', $links );
-	}
-
-	/**
-	 * Generate the `<link> element(s) for the given provider.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param WP_Webfonts_Provider $provider Instance of the provider.
-	 * @return string The `<link>` element(s).
-	 */
-	private function generate_links( WP_Webfonts_Provider $provider ) {
-		$link_attributes = $provider->get_link_attributes();
-
-		/*
-		 * Bail out if there are no attributes for this provider
-		 * (i.e. no `<link>` is needed).
-		 */
-		if ( ! is_array( $link_attributes ) || empty( $link_attributes ) ) {
-			return '';
-		}
-
-		/*
-		 * This provider needs multiple `<link>` elements.
-		 * Loop through each array and pass its attributes
-		 * to create each of its `<link>` elements.
-		 */
-		if ( is_array( current( $link_attributes ) ) ) {
-			$links = '';
-			foreach ( $link_attributes as $attributes ) {
-				$links .= $this->create_link_element( $attributes );
-			}
-
-			return $links;
-		}
-
-		/*
-		 * This provider needs one `<link>` element.
-		 * Pass its attributes to create its `<link>` element.
-		 */
-		return $this->create_link_element( $link_attributes );
-	}
-
-	/**
-	 * Creates the `<link>` element and populates with the given attributes.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param string[] $attributes An array of attributes => values.
-	 * @return string The `<link>` element.
-	 */
-	private function create_link_element( array $attributes ) {
-		$link = '';
-
-		foreach ( $attributes as $attribute => $value ) {
-			// Checks if attribute is a nonempty string. If no, skip it.
-			if ( ! is_string( $attribute ) || '' === $attribute ) {
-				continue;
-			}
-
-			if ( 'href' === $attribute ) {
-				$link .= ' href="' . esc_url( $value ) . '"';
-			} elseif ( is_bool( $value ) ) {
-				$link .= $value
-					? ' ' . esc_attr( $attribute )
-					: '';
-			} else {
-				$link .= ' ' . esc_attr( $attribute ) . '="' . esc_attr( $value ) . '"';
-			}
-		}
-
-		if ( '' === $link ) {
-			return '';
-		}
-
-		return '<link rel="preconnect"' . $link . '>' . "\n";
-	}
 }
diff --git a/src/wp-includes/webfonts-api/class-wp-webfonts-registry.php b/src/wp-includes/webfonts-api/class-wp-webfonts-registry.php
@@ -17,7 +17,6 @@
  *  - registers each provider with the API by:
  *       1. creating an instance (object);
  *       2. storing it in-memory (by its unique provider ID) for use with the API;
- *  - handles generating the linked resources `<link>` for all providers.
  *
  * @since 5.9.0
  */

diff --git a/src/wp-includes/webfonts-api/providers/class-wp-webfonts-google-provider.php b/src/wp-includes/webfonts-api/providers/class-wp-webfonts-google-provider.php
@@ -24,34 +24,23 @@ class WP_Webfonts_Google_Provider extends WP_Webfonts_Provider {
 	protected $id = 'google';
 
 	/**
-	 * The `<link>` element's attributes for each linked resource.
+	 * The provider's root URL.
 	 *
 	 * @since 5.9.0
-	 *
-	 * @var array[] {
-	 *     An array of linked resources.
-	 *
-	 * @type array() {
-	 *          An array of attributes for this linked resource.
-	 *
-	 * @type string $attribute => @type string $attribute_value
-	 *     }
-	 * }
+	 * @var string
 	 */
-	protected $link_attributes = array(
-		array(
-			'href'        => 'https://fonts.gstatic.com',
-			'crossorigin' => true,
-		),
-	);
+	protected $root_url = 'https://fonts.googleapis.com/css2';
 
 	/**
-	 * The provider's root URL.
+	 * The object's constructor.
 	 *
 	 * @since 5.9.0
-	 * @var string
 	 */
-	protected $root_url = 'https://fonts.googleapis.com/css2';
+	public function __construct() {
+
+		// Add preconnect links.
+		add_filter( 'wp_resource_hints', array( $this, 'add_preconnect_urls' ), 10, 2 );
+	}
 
 	/**
 	 * Get the CSS for a collection of fonts.
@@ -160,4 +149,38 @@ private function organize_webfonts() {
 
 		return $font_display_groups;
 	}
+
+	/**
+	 * Adds preconnect URLs for webfonts providers.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array  $urls {
+	 *     Array of resources and their attributes, or URLs to print for resource hints.
+	 *
+	 *     @type array|string ...$0 {
+	 *         Array of resource attributes, or a URL string.
+	 *
+	 *         @type string $href        URL to include in resource hints. Required.
+	 *         @type string $as          How the browser should treat the resource
+	 *                                   (`script`, `style`, `image`, `document`, etc).
+	 *         @type string $crossorigin Indicates the CORS policy of the specified resource.
+	 *         @type float  $pr          Expected probability that the resource hint will be used.
+	 *         @type string $type        Type of the resource (`text/html`, `text/css`, etc).
+	 *     }
+	 * }
+	 * @param string $relation_type The relation type the URLs are printed for,
+	 *                              e.g. 'preconnect' or 'prerender'.
+	 */
+	public function add_preconnect_urls( $urls, $relation_type ) {
+		if ( 'preconnect' !== $relation_type ) {
+			return $urls;
+		}
+
+		$urls[] = array(
+			'href'        => 'https://fonts.gstatic.com',
+			'crossorigin' => 'anonymous',
+		);
+		return $urls;
+	}
 }
diff --git a/src/wp-includes/webfonts-api/providers/class-wp-webfonts-provider.php b/src/wp-includes/webfonts-api/providers/class-wp-webfonts-provider.php
@@ -25,23 +25,6 @@ abstract class WP_Webfonts_Provider {
 	 */
 	protected $id;
 
-	/**
-	 * The `<link>` element's attributes for each linked resource.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @var array[] {
-	 *     An array of linked resources.
-	 *
-	 *     @type array() {
-	 *          An array of attributes for this linked resource.
-	 *
-	 *          @type string $attribute => @type string $attribute_value
-	 *     }
-	 * }
-	 */
-	protected $link_attributes = array();
-
 	/**
 	 * The provider's root URL.
 	 *
@@ -82,17 +65,6 @@ public function get_root_url() {
 		return $this->root_url;
 	}
 
-	/**
-	 * Get the `<link>` attributes.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @return array[]
-	 */
-	public function get_link_attributes() {
-		return $this->link_attributes;
-	}
-
 	/**
 	 * Sets the webfonts.
 	 *

diff --git a/tests/phpunit/tests/webfonts-api/wpWebfontsProviderRegistry.php b/tests/phpunit/tests/webfonts-api/wpWebfontsProviderRegistry.php
@@ -80,52 +80,4 @@ public function test_register_with_core_providers() {
 		$expected = array( 'google', 'local', 'my-custom-provider' );
 		$this->assertSame( $expected, array_keys( $providers ) );
 	}
-
-	/**
-	 * @covers WP_Webfonts_Provider_Registry::get_links
-	 *
-	 * @dataProvider data_get_links
-	 *
-	 * @param bool   $register_custom When true, registers the custom provider.
-	 * @param string $expected        Expected HTML.
-	 */
-	public function test_get_links( $register_custom, $expected ) {
-		$registry = new WP_Webfonts_Provider_Registry();
-		// Register the core providers.
-		$registry->init();
-		// Register a custom provider.
-		if ( $register_custom ) {
-			$registry->register( My_Custom_Webfonts_Provider_Mock::class );
-		}
-
-		$actual = $registry->get_links();
-		$this->assertSame( $expected, $actual );
-	}
-
-	/**
-	 * Data Provider.
-	 *
-	 * return @array
-	 */
-	public function data_get_links() {
-		return array(
-			'core providers'          => array(
-				'register_custom' => false,
-				'expected'        => <<<LINKS
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-LINKS
-				,
-			),
-			'core + custom providers' => array(
-				'register_custom' => true,
-				'expected'        => <<<LINKS
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="preconnect" href="https://fonts.my-custom-api.com" crossorigin>
-
-LINKS
-				,
-			),
-		);
-	}
 }