Separate style element from get_css()

Moves the <style> element from the provider's get_css() method to restore only returning the `@font-face` CSS. Adds a WP_Webfonts_Provider::get_style_element() method, providing a default `<style>` element markup, while giving each provider the ability to customize via overloading.
WordPress · Dec 1, 2022 · dec6a3e · dec6a3e
1 parent e3f4d4e
commit dec6a3e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 42 deletions.
diff --git a/lib/experimental/class-wp-webfonts-provider-local.php b/lib/experimental/class-wp-webfonts-provider-local.php
@@ -35,18 +35,6 @@ class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
 	 */
 	protected $id = 'local';
 
-	/**
-	 * Holds a string which contains the type attribute for style tag.
-	 *
-	 * If the active theme does not declare HTML5 support for 'style',
-	 * then it initializes as `type='text/css'`.
-	 *
-	 * @since 6.1.0
-	 *
-	 * @var string
-	 */
-	private $type_attr = '';
-
 	/**
 	 * Constructor.
 	 *
@@ -58,7 +46,7 @@ function_exists( 'is_admin' ) && ! is_admin()
 			&&
 			function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5', 'style' )
 		) {
-			$this->type_attr = " type='text/css'";
+			$this->style_tag_atts = " type='text/css'";
 		}
 	}
 
@@ -123,12 +111,6 @@ public function get_css() {
 			$css .= '@font-face{' . $this->build_font_face_css( $webfont ) . '}';
 		}
 
-		$css = sprintf(
-			"<style id='wp-webfonts-local'%s>\n%s\n</style>\n",
-			$this->type_attr,
-			$css
-		);
-
 		return $css;
 	}
 

diff --git a/lib/experimental/class-wp-webfonts-provider.php b/lib/experimental/class-wp-webfonts-provider.php
@@ -34,6 +34,15 @@
  */
 abstract class WP_Webfonts_Provider {
 
+	/**
+	 * The provider's unique ID.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string
+	 */
+	protected $id = '';
+
 	/**
 	 * Webfonts to be processed.
 	 *
@@ -43,6 +52,15 @@ abstract class WP_Webfonts_Provider {
 	 */
 	protected $webfonts = array();
 
+	/**
+	 * Font-face style tag's attribute(s).
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string
+	 */
+	protected $style_tag_atts = '';
+
 	/**
 	 * Sets this provider's webfonts property.
 	 *
@@ -57,6 +75,18 @@ public function set_webfonts( array $webfonts ) {
 		$this->webfonts = $webfonts;
 	}
 
+	/**
+	 * Prints the generated styles.
+	 *
+	 * @since X.X.X
+	 */
+	public function print_styles() {
+		printf(
+			$this->get_style_element(),
+			$this->get_css()
+		);
+	}
+
 	/**
 	 * Gets the `@font-face` CSS for the provider's webfonts.
 	 *
@@ -71,11 +101,13 @@ public function set_webfonts( array $webfonts ) {
 	abstract public function get_css();
 
 	/**
-	 * Prints the generated styles.
+	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
 	 *
 	 * @since X.X.X
+	 *
+	 * @return string The style element.
 	 */
-	public function print_styles() {
-		echo $this->get_css();
+	protected function get_style_element() {
+		return "<style id='wp-webfonts-{$this->id}'{$this->style_tag_atts}>\n%s\n</style>\n";
 	}
 }
diff --git a/phpunit/fixtures/mock-provider.php b/phpunit/fixtures/mock-provider.php
@@ -8,15 +8,20 @@ class Mock_Provider extends WP_Webfonts_Provider {
 	 */
 	protected $id = 'mock';
 
-	/**
-	 * CSS to print.
-	 *
-	 * @var string
-	 */
-	public $css = '<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n';
-
 	public function get_css() {
 		$handles = array_keys( $this->webfonts );
+		return implode( '; ', $handles );
 		return sprintf( $this->css, implode( '; ', $handles ) );
 	}
+
+	/**
+	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string The style element.
+	 */
+	protected function get_style_element() {
+		return '<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n';
+	}
 }
diff --git a/phpunit/webfonts/wpWebfontsProviderLocal-test.php b/phpunit/webfonts/wpWebfontsProviderLocal-test.php
@@ -63,7 +63,7 @@ public function test_set_webfonts() {
 	/**
 	 * @covers WP_Webfonts_Provider_Local::get_css
 	 *
-	 * @dataProvider data_get_css
+	 * @dataProvider data_get_css_print_styles
 	 *
 	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
 	 * @param string $expected Expected CSS.
@@ -72,15 +72,32 @@ public function test_get_css( array $webfonts, $expected ) {
 		$property = $this->get_webfonts_property();
 		$property->setValue( $this->provider, $webfonts );
 
-		$this->assertSame( $expected, $this->provider->get_css() );
+		$this->assertSame( $expected['font-face-css'], $this->provider->get_css() );
+	}
+
+	/**
+	 * @covers WP_Webfonts_Provider_Local::print_styles
+	 *
+	 * @dataProvider data_get_css_print_styles
+	 *
+	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
+	 * @param string $expected Expected CSS.
+	 */
+	public function test_print_styles( array $webfonts, $expected ) {
+		$property = $this->get_webfonts_property();
+		$property->setValue( $this->provider, $webfonts );
+
+		$expected_output = sprintf( $expected['style-element'], $expected['font-face-css'] );
+		$this->expectOutputString( $expected_output );
+		$this->provider->print_styles();
 	}
 
 	/**
 	 * Data provider.
 	 *
 	 * @return array
 	 */
-	public function data_get_css() {
+	public function data_get_css_print_styles() {
 		return array(
 			'truetype format' => array(
 				'webfonts' => array(
@@ -92,13 +109,13 @@ public function data_get_css() {
 						'src'         => 'http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf',
 					),
 				),
-				'expected' => <<<CSS
-<style id='wp-webfonts-local' type='text/css'>
+				'expected' => array(
+					'style-element' => "<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					'font-face-css' => <<<CSS
 @font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;src:local("Open Sans"), url('http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');}
-</style>
-
 CSS
-			,
+					,
+				),
 			),
 			'woff2 format'    => array(
 				'webfonts' => array(
@@ -119,13 +136,14 @@ public function data_get_css() {
 						'src'          => 'http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
 					),
 				),
-				'expected' => <<<CSS
-<style id='wp-webfonts-local' type='text/css'>
+				'expected' => array(
+					'style-element' => "<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					'font-face-css' => <<<CSS
 @font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-stretch:normal;src:local("Source Serif Pro"), url('http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:200 900;font-stretch:normal;src:local("Source Serif Pro"), url('http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');}
-</style>
-
 CSS
-			,
+
+					,
+				),
 			),
 		);
 	}