Closes #7063: Google font - Frontend part #7091

Miraeld · 2024-11-06T05:01:20Z

Description

This PR introduces a feature that allows users to use locally stored Google Fonts on the front end instead of the online ones. The code rewrites the Google Fonts paths to the local ones, maintaining the original structure as a data-wpr-hosted-gf-parameters argument. It handles Google Fonts V1 and V2 separately, saving and generating two separate CSS files if both versions are present in the source simultaneously. The feature adds its markup just after the OCI feature preloads and prints data correctly when used on multisite.

Type of change

New feature (non-breaking change which adds functionality).

Detailed scenario

Prerequisites

Enable Host Local font in the settings within the Media tab.

We need a page with the following html:

<?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>

As this PR is about the front-end we are not saving locally the fonts yet. So we will have to create the local file manually located in: /wp-content/cache/fonts/1/e/b/c/173c0fc97eef86a6e51ada56c5a9a.css & /wp-content/cache/fonts/1/5/9/5/cb6ccb56826a802ed411cef875f0e.css of your wordpress.
Load the page while clearing cache (if you opened it before), and you should see the following output in your HTML:

	<link rel="stylesheet" href="/wp-content/cache/fonts/1/e/b/c/173c0fc97eef86a6e51ada56c5a9a.css" data-wpr-hosted-gf-parameters="family=Roboto"/>
	<link rel="stylesheet" href="/wp-content/cache/fonts/1/5/9/5/cb6ccb56826a802ed411cef875f0e.css" data-wpr-hosted-gf-parameters="family=Open+Sans"/>

Done, you've completed the purpose of this PR.

However this test only includes v1 fonts,
We can modify the fonts to be v2 or even combined them, as long as we have the local file saved it's fine.

For information, the hash (name) of the local file is made by : md5("https://fonts.googleapis.com/css?family=Roboto"); (and change the font URL you are checking).

Note that actually, Unit testing implemented in this PR are covering these manual tests.

Technical description

Documentation

The code introduces a new namespace Media\Fonts with four classes: Subscriber, Controller, Context, and ServiceProvider. The Subscriber class uses the rocket_buffer filter to add the markup to the page. The Controller class rewrites the CSS to the page and checks if the feature is available. The Context class implements ContextInterface to determine if the feature is allowed. The ServiceProvider class registers the created classes.

This new implementation also includes:

Base structure for managing Google Fonts locally.
Version management for Google Fonts.
Structural changes and linter fixes to ensure code quality and consistency.

Unit Tests Coverage

For the @wp-media/qa-team info,
The unit tests cover the following aspects:

Verification of the context to ensure the feature is allowed.
Rewriting of Google Fonts paths to local ones in the Controller class => Makes sure that when the font exists, we will get the rewrite on the front-end to load the local fonts rather than the external one.
Ensuring the Subscriber class correctly uses the rocket_buffer filter to add the necessary markup

New dependencies

No new dependencies are required for this change.

Risks

N/A

Mandatory Checklist

Code validation

I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
I triggered all changed lines of code at least once without new errors/warnings/notices.
I implemented built-in tests to cover the new/changed code.

Code style

I wrote a self-explanatory code about what it does.
I protected entry points against unexpected inputs.
I did not introduce unnecessary complexity.
Output messages (errors, notices, logs) are explicit enough for users to understand the issue and are actionnable.

codacy-production · 2024-11-06T14:26:36Z

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for `8b7db2e`¹	✅ 68.97% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (`8b7db2e`)	Report Missing	Report Missing	Report Missing
Head commit (`810538b`)	38220	16753	43.83%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7091)	58	40	68.97%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

…t-front-end

Miraeld · 2024-11-13T13:40:22Z

Hello hello,

There is a known bug with this branch, which is non-blocking. The main feature is here and that's what is important.

However, to give more context, the known bug is reported here:
#7104
And https://wp-media.slack.com/archives/CUT7FLHF1/p1731504606242829

To make it short, we are adding 2 times the same tag on the page instead of a single one.

Mai-Saad · 2024-11-15T11:29:17Z

@team Thanks for the PR. Kindly note my exploratory test notes below (WIP)

URL is href="https://new.rocketlabsqa.ovh/wp-content/cache/fonts/1/b/0/e/c20c0038dca463f0adee9b315f221.css" not including google-fonts after fonts

Agreed as fine:

Locally hosted font is not preloaded
on this page https://new.rocketlabsqa.ovh/combine_v1fonts_template, after enabling the feature, the data-wpr-hosted-gf-parameters doesn't include this part #038;display=swap

Miraeld self-assigned this Nov 6, 2024

Miraeld linked an issue Nov 6, 2024 that may be closed by this pull request

Host Google Fonts Locally #7039

Open

Miraeld removed a link to an issue Nov 6, 2024

Host Google Fonts Locally #7039

Open

Miraeld linked an issue Nov 6, 2024 that may be closed by this pull request

3.18 - Frontend part #7063

Open

Miraeld added 2 commits November 6, 2024 14:10

Base structure

be9e3b9

Google font version management

b33302c

Miraeld force-pushed the feature/7063-google-font-front-end branch from 27da3fa to b33302c Compare November 6, 2024 13:10

Miraeld added 3 commits November 6, 2024 14:26

Change of structure + fixes linters

5687237

Change use of home_url to WPR constant

5fac384

Change use of home_url to WPR constant

968eefd

Miraeld added 7 commits November 7, 2024 06:04

Changes the build of the factory

359f175

Add unit tests

6f044c0

Fix ServiceProvider

4882bbf

Works up to combining URL

833baaf

Apply linter

98d8fdc

First working prototype

0f2c05b

WIP: Integration test

32fa787

remyperona changed the base branch from feature/3.18 to feature/host-google-fonts November 8, 2024 14:48

remyperona added 11 commits November 8, 2024 16:58

revert visibility

ebbbaf2

update context checking

5160b3d

add strict declare

e2d59b2

rewrite fonts URL

02a4c23

update instantiation

03845d4

update URL

84480aa

update tests

44f0891

remove group

e4934af

Merge branch 'feature/host-google-fonts' into feature/7063-google-fon…

7e7c721

…t-front-end

update name

29b218c

update config

8ed9d56

remyperona added 3 commits November 8, 2024 17:14

update test

1322df3

update instantiation

32930b5

remove file

46e6a8b

remyperona added the type: sub-task Indicates the issue is a sub-task linked to an epics card label Nov 8, 2024

remyperona added this to the 3.18 milestone Nov 8, 2024

remyperona self-assigned this Nov 8, 2024

Khadreal added 3 commits November 11, 2024 13:41

Change the position of google font combined url process

04dcaed

Fixed linter error

489c049

update test

81eaa9c

Miraeld changed the title ~~DRAFT: Closes #7063: Google font - Frontend part~~ Closes #7063: Google font - Frontend part Nov 12, 2024

MathieuLamiot requested a review from a team November 12, 2024 14:07

refactor duplicate code

cab4e86

Miraeld mentioned this pull request Nov 13, 2024

Closes #7066: 3.18 - Preconnect and prefetch removal #7101

Merged

8 tasks

Updated namespace

810538b

jeawhanlee approved these changes Nov 13, 2024

View reviewed changes

Miraeld mentioned this pull request Nov 13, 2024

3.18 - Front-end display - Duplicated tag added to the page #7104

Open

Miraeld mentioned this pull request Nov 13, 2024

Closes #7104: Duplicated tag added to page #7105

Merged

8 tasks

Khadreal merged commit 061f8b6 into feature/host-google-fonts Nov 14, 2024
11 of 12 checks passed

Khadreal deleted the feature/7063-google-font-front-end branch November 14, 2024 08:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Closes #7063: Google font - Frontend part #7091

Closes #7063: Google font - Frontend part #7091

Miraeld commented Nov 6, 2024 •

edited

Loading

codacy-production bot commented Nov 6, 2024 •

edited

Loading

Miraeld commented Nov 13, 2024

Mai-Saad commented Nov 15, 2024 •

edited

Loading

Closes #7063: Google font - Frontend part #7091

Closes #7063: Google font - Frontend part #7091

Conversation

Miraeld commented Nov 6, 2024 • edited Loading

Description

Type of change

Detailed scenario

Prerequisites

Technical description

Documentation

Unit Tests Coverage

New dependencies

Risks

Mandatory Checklist

Code validation

Code style

codacy-production bot commented Nov 6, 2024 • edited Loading

Coverage summary from Codacy

See diff coverage on Codacy

See your quality gate settings Change summary preferences

Footnotes

Miraeld commented Nov 13, 2024

Mai-Saad commented Nov 15, 2024 • edited Loading

Miraeld commented Nov 6, 2024 •

edited

Loading

codacy-production bot commented Nov 6, 2024 •

edited

Loading

Mai-Saad commented Nov 15, 2024 •

edited

Loading