wp-media · Miraeld · Nov 19, 2024 · Nov 14, 2024 · Nov 14, 2024 · Nov 14, 2024
diff --git a/inc/Engine/Common/AbstractFileSystem.php b/inc/Engine/Common/AbstractFileSystem.php
@@ -44,7 +44,11 @@ protected function write_file( string $file_path, string $content ): bool {
 	 *
 	 * @return string
 	 */
-	protected function get_file_content( string $file ): string {
+	public function get_file_content( string $file ): string {
+		if ( ! $this->filesystem->exists( $file ) ) {
+			return '';
+		}
+
 		return $this->filesystem->get_contents( $file );
 	}
 

diff --git a/inc/Engine/Media/Fonts/Frontend/Controller.php b/inc/Engine/Media/Fonts/Frontend/Controller.php
@@ -32,6 +32,13 @@ class Controller {
 	 */
 	private $base_url;
 
+	/**
+	 * Base path.
+	 *
+	 * @var string
+	 */
+	private $base_path;
+
 	/**
 	 * Error flag.
 	 *
@@ -47,6 +54,7 @@ class Controller {
 	 */
 	public function __construct( Context $context, Filesystem $filesystem ) {
 		$this->context    = $context;
+		$this->base_path  = rocket_get_constant( 'WP_ROCKET_CACHE_ROOT_PATH', '' ) . 'fonts/' . get_current_blog_id() . '/';
 		$this->base_url   = rocket_get_constant( 'WP_ROCKET_CACHE_ROOT_URL', '' ) . 'fonts/' . get_current_blog_id() . '/';
 		$this->filesystem = $filesystem;
 	}
@@ -125,10 +133,26 @@ private function get_optimized_markup(
 		string $font_provider
 	): string {
 		$font_provider_path = sprintf( '%s/', $font_provider );
+		$gf_parameters      = wp_parse_url( $original_url, PHP_URL_QUERY );
 
-		$url = $this->base_url . $font_provider_path . $this->filesystem->hash_to_path( $hash ) . '.css';
+		/**
+		 * Filters to enable the inline css output.
+		 *
+		 * @since 3.18
+		 *
+		 * @param bool $enable Tells if we are enabling or not the inline css output.
+		 */
+		if ( wpm_apply_filters_typed( 'boolean', 'rocket_host_fonts_locally_inline_css', false ) ) {
+			$local_css_path = $this->base_path . $font_provider_path . $this->filesystem->hash_to_path( $hash ) . '.css';
 
-		$gf_parameters = wp_parse_url( $original_url, PHP_URL_QUERY );
+			$inline_css = $this->get_font_inline_css( $local_css_path, $gf_parameters );
+
+			if ( ! empty( $inline_css ) ) {
+				return $inline_css;
+			}
+		}
+
+		$url = $this->base_url . $font_provider_path . $this->filesystem->hash_to_path( $hash ) . '.css';
 
 		return sprintf(
 			'<link rel="stylesheet" href="%1$s" data-wpr-hosted-gf-parameters="%2$s"/>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
@@ -180,4 +204,26 @@ public function disable_google_fonts_preload( $disable ): bool {
 
 		return true;
 	}
+
+	/**
+	 * Gets the font inline css.
+	 *
+	 * @param string $local_css_path CSS file path.
+	 * @param string $gf_parameters Google Fonts parameters.
+	 *
+	 * @return string
+	 */
+	private function get_font_inline_css( string $local_css_path, string $gf_parameters ): string {
+		$content = $this->filesystem->get_file_content( $local_css_path );
+
+		if ( empty( $content ) ) {
+			return '';
+		}
+
+		return sprintf(
+			'<style data-wpr-hosted-gf-parameters="%1$s">%2$s</style>',
+			$gf_parameters,
+			$content
+		);
+	}
 }
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v1.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v1.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Template Name: Google Font V1 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V1 Template</title>
+	<link rel="stylesheet" href="http://example.org/wp-content/cache/fonts/1/google-font/e/b/c/173c0fc97eef86a6e51ada56c5a9a.css" data-wpr-hosted-gf-parameters="family=Roboto"/>
+	<link rel="stylesheet" href="http://example.org/wp-content/cache/fonts/1/google-font/5/9/5/cb6ccb56826a802ed411cef875f0e.css" data-wpr-hosted-gf-parameters="family=Open+Sans"/>
+	<style>
+		.roboto-font {
+			font-family: 'Roboto', sans-serif;
+		}
+		.open-sans-font {
+			font-family: 'Open Sans', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="roboto-font">Hello World</h1>
+			<p class="open-sans-font">Welcome to the world</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v1_style_tag.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v1_style_tag.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Template Name: Google Font V1 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V1 Template</title>
+	<style data-wpr-hosted-gf-parameters="family=Roboto">body { font-family: "Roboto"; }</style>
+	<style data-wpr-hosted-gf-parameters="family=Open+Sans">body { font-family: "Open-San"; }</style>
+	<style>
+		.roboto-font {
+			font-family: 'Roboto', sans-serif;
+		}
+		.open-sans-font {
+			font-family: 'Open Sans', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="roboto-font">Hello World</h1>
+			<p class="open-sans-font">Welcome to the world</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v1_v2.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v1_v2.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * Template Name: Google Font V1 and V2 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V1 and V2 Template</title>
+	<link rel="stylesheet" href="http://example.org/wp-content/cache/fonts/1/google-font/6/2/4/f2c2b9858423d0688793189f6e6cb.css" data-wpr-hosted-gf-parameters="family=Roboto|Open+Sans"/> <!-- V1 Fonts -->
+	<link rel="stylesheet" href="http://example.org/wp-content/cache/fonts/1/google-font/8/d/4/e42f26da0305c49cd3264956d8329.css" data-wpr-hosted-gf-parameters="family=Lato:wght@400;700&family=Montserrat:wght@400;700&display=swap"/> <!-- V2 Fonts -->
+	<style>
+		.v1-font-roboto {
+			font-family: 'Roboto', sans-serif;
+		}
+		.v1-font-open-sans {
+			font-family: 'Open Sans', sans-serif;
+		}
+		.v2-font-lato {
+			font-family: 'Lato', sans-serif;
+		}
+		.v2-font-montserrat {
+			font-family: 'Montserrat', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="v1-font-roboto">Hello World</h1>
+			<p class="v1-font-open-sans">Welcome to the world</p>
+			<h2 class="v2-font-lato">This is a subtitle</h2>
+			<p class="v2-font-montserrat">Enjoy your stay</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v2.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/expected_v2.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Template Name: Google Font V2 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V2 Template</title>
+	<link rel="stylesheet" href="http://example.org/wp-content/cache/fonts/1/google-font/a/b/2/8ffb4f83584e9add1be594dd90dfd.css" data-wpr-hosted-gf-parameters="family=Roboto:wght@400;700&display=swap"/>
+	<link rel="stylesheet" href="http://example.org/wp-content/cache/fonts/1/google-font/b/4/d/9ffca0114d3acb6ab0b068feaf933.css" data-wpr-hosted-gf-parameters="family=Lato:wght@400;700&display=swap"/>
+	<style>
+		.roboto-font {
+			font-family: 'Roboto', sans-serif;
+		}
+		.lato-font {
+			font-family: 'Lato', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="roboto-font">Hello World</h1>
+			<p class="lato-font">Welcome to the world</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/input_v1.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/input_v1.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Template Name: Google Font V1 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V1 Template</title>
+	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+	<style>
+		.roboto-font {
+			font-family: 'Roboto', sans-serif;
+		}
+		.open-sans-font {
+			font-family: 'Open Sans', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="roboto-font">Hello World</h1>
+			<p class="open-sans-font">Welcome to the world</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/input_v1_v2.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/input_v1_v2.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * Template Name: Google Font V1 and V2 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V1 and V2 Template</title>
+	<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans" rel="stylesheet"> <!-- V1 Fonts -->
+	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <!-- V2 Fonts -->
+	<style>
+		.v1-font-roboto {
+			font-family: 'Roboto', sans-serif;
+		}
+		.v1-font-open-sans {
+			font-family: 'Open Sans', sans-serif;
+		}
+		.v2-font-lato {
+			font-family: 'Lato', sans-serif;
+		}
+		.v2-font-montserrat {
+			font-family: 'Montserrat', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="v1-font-roboto">Hello World</h1>
+			<p class="v1-font-open-sans">Welcome to the world</p>
+			<h2 class="v2-font-lato">This is a subtitle</h2>
+			<p class="v2-font-montserrat">Enjoy your stay</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>
diff --git a/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/input_v2.php b/tests/Fixtures/inc/Engine/Media/Fonts/Frontend/Subscriber/HTML/input_v2.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Template Name: Google Font V2 Template
+ */ ?>
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Google Font V2 Template</title>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+	<style>
+		.roboto-font {
+			font-family: 'Roboto', sans-serif;
+		}
+		.lato-font {
+			font-family: 'Lato', sans-serif;
+		}
+	</style>
+</head>
+<body>
+<div class="wrap">
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
+			<h1 class="roboto-font">Hello World</h1>
+			<p class="lato-font">Welcome to the world</p>
+		</main><!-- #main -->
+	</div><!-- #primary -->
+</div><!-- .wrap -->
+</body>
+</html>