From 30563a2687247d441207aad53ca4718fd7d32191 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Tue, 5 Apr 2022 17:16:29 -0500 Subject: [PATCH 1/8] Move Google Fonts module to its own folder --- .../plugins/jetpack/modules/google-fonts.php | 48 +---------------- .../google-fonts/jetpack-google-fonts.php | 8 +++ .../google-fonts/register-google-fonts.php | 54 +++++++++++++++++++ 3 files changed, 63 insertions(+), 47 deletions(-) create mode 100644 projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php create mode 100644 projects/plugins/jetpack/modules/google-fonts/register-google-fonts.php diff --git a/projects/plugins/jetpack/modules/google-fonts.php b/projects/plugins/jetpack/modules/google-fonts.php index 7d3fa33e75560..2039b48a64e39 100644 --- a/projects/plugins/jetpack/modules/google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts.php @@ -50,50 +50,4 @@ 'Work Sans', ); -/** - * Register a curated selection of Google Fonts. - * - * @return void - */ -function jetpack_add_google_fonts_provider() { - if ( ! function_exists( 'wp_register_webfont_provider' ) || ! function_exists( 'wp_register_webfonts' ) ) { - return; - } - - wp_register_webfont_provider( 'jetpack-google-fonts', '\Automattic\Jetpack\Fonts\Google_Fonts_Provider' ); - - /** - * Curated list of Google Fonts. - * - * @module google-fonts - * - * @since 10.8 - * - * @param array $fonts_to_register Array of Google Font names to register. - */ - $fonts_to_register = apply_filters( 'jetpack_google_fonts_list', JETPACK_GOOGLE_FONTS_LIST ); - - foreach ( $fonts_to_register as $font_family ) { - wp_register_webfonts( - array( - array( - 'font-family' => $font_family, - 'font-weight' => '100 900', - 'font-style' => 'normal', - 'font-display' => 'fallback', - 'provider' => 'jetpack-google-fonts', - ), - array( - 'font-family' => $font_family, - 'font-weight' => '100 900', - 'font-style' => 'italic', - 'font-display' => 'fallback', - 'provider' => 'jetpack-google-fonts', - ), - ) - ); - } -} -add_action( 'after_setup_theme', 'jetpack_add_google_fonts_provider' ); - -add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 ); +require __DIR__ . '/google-fonts/jetpack-google-fonts.php'; diff --git a/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php new file mode 100644 index 0000000000000..c7741aa64b705 --- /dev/null +++ b/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php @@ -0,0 +1,8 @@ + $font_family, + 'font-weight' => '100 900', + 'font-style' => 'normal', + 'font-display' => 'fallback', + 'provider' => 'jetpack-google-fonts', + ), + array( + 'font-family' => $font_family, + 'font-weight' => '100 900', + 'font-style' => 'italic', + 'font-display' => 'fallback', + 'provider' => 'jetpack-google-fonts', + ), + ) + ); + } +} +add_action( 'after_setup_theme', 'jetpack_add_google_fonts_provider' ); + +add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 ); From 0f4668dfb5d62d100748f542ed6a04e8daf8af86 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Tue, 5 Apr 2022 17:47:27 -0500 Subject: [PATCH 2/8] Convert the module into a class so we can share state between hooks --- .../class-jetpack-google-fonts.php | 73 +++++++++++++++++++ .../google-fonts/jetpack-google-fonts.php | 7 +- .../google-fonts/register-google-fonts.php | 54 -------------- 3 files changed, 79 insertions(+), 55 deletions(-) create mode 100644 projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php delete mode 100644 projects/plugins/jetpack/modules/google-fonts/register-google-fonts.php diff --git a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php new file mode 100644 index 0000000000000..427f5749823fc --- /dev/null +++ b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php @@ -0,0 +1,73 @@ +register_google_fonts_provider(); + + add_action( 'after_setup_theme', array( $this, 'register_google_fonts' ) ); + } + + /** + * Register the provider for Google fonts registration. + */ + private function register_google_fonts_provider() { + if ( ! function_exists( 'wp_register_webfont_provider' ) ) { + return; + } + + wp_register_webfont_provider( 'jetpack-google-fonts', '\Automattic\Jetpack\Fonts\Google_Fonts_Provider' ); + } + + /** + * Register Google fonts. + */ + public function register_google_fonts() { + if ( ! function_exists( 'wp_register_webfonts' ) ) { + return; + } + + /** + * Curated list of Google Fonts. + * + * @module google-fonts + * + * @since 10.8 + * + * @param array $fonts_to_register Array of Google Font names to register. + */ + $fonts_to_register = apply_filters( 'jetpack_google_fonts_list', JETPACK_GOOGLE_FONTS_LIST ); + + foreach ( $fonts_to_register as $font_family ) { + wp_register_webfonts( + array( + array( + 'font-family' => $font_family, + 'font-weight' => '100 900', + 'font-style' => 'normal', + 'font-display' => 'fallback', + 'provider' => 'jetpack-google-fonts', + ), + array( + 'font-family' => $font_family, + 'font-weight' => '100 900', + 'font-style' => 'italic', + 'font-display' => 'fallback', + 'provider' => 'jetpack-google-fonts', + ), + ) + ); + } + } +} diff --git a/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php index c7741aa64b705..c0bd12067cbd1 100644 --- a/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts/jetpack-google-fonts.php @@ -5,4 +5,9 @@ * @package automattic/jetpack */ -require __DIR__ . '/register-google-fonts.php'; +// Load the Jetpack_Google_Fonts class. +require __DIR__ . '/class-jetpack-google-fonts.php'; + +new Jetpack_Google_Fonts(); + +add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 ); diff --git a/projects/plugins/jetpack/modules/google-fonts/register-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/register-google-fonts.php deleted file mode 100644 index 159069b2044de..0000000000000 --- a/projects/plugins/jetpack/modules/google-fonts/register-google-fonts.php +++ /dev/null @@ -1,54 +0,0 @@ - $font_family, - 'font-weight' => '100 900', - 'font-style' => 'normal', - 'font-display' => 'fallback', - 'provider' => 'jetpack-google-fonts', - ), - array( - 'font-family' => $font_family, - 'font-weight' => '100 900', - 'font-style' => 'italic', - 'font-display' => 'fallback', - 'provider' => 'jetpack-google-fonts', - ), - ) - ); - } -} -add_action( 'after_setup_theme', 'jetpack_add_google_fonts_provider' ); - -add_filter( 'wp_resource_hints', '\Automattic\Jetpack\Fonts\Utils::font_source_resource_hint', 10, 2 ); From 279c27579e6d8c1b2ac4863ef61a465e5cff8f09 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Tue, 5 Apr 2022 18:07:06 -0500 Subject: [PATCH 3/8] Instropect blocks and enqueue used Google fonts --- .../class-jetpack-google-fonts.php | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php index 427f5749823fc..a7f60856d69c1 100644 --- a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php @@ -9,6 +9,14 @@ * Manages Google fonts registration, introspection and enqueueing. */ class Jetpack_Google_Fonts { + /** + * The Google fonts that we're registered after + * running the `jetpack_google_fonts_list`. + * + * @var array + */ + private $registered_google_fonts = array(); + /** * Hook into WordPress to register * and enqueue webfonts. @@ -17,6 +25,14 @@ public function __construct() { $this->register_google_fonts_provider(); add_action( 'after_setup_theme', array( $this, 'register_google_fonts' ) ); + + /** + * We are already enqueueing all registered fonts by default when loading the block editor, + * so we only need to scan for webfonts when browsing as a guest. + */ + if ( ! is_admin() ) { + add_filter( 'pre_render_block', array( $this, 'scan_block_for_google_fonts' ), 10, 2 ); + } } /** @@ -68,6 +84,46 @@ public function register_google_fonts() { ), ) ); + + $slug = wp_webfonts()->get_font_slug( $font_family ); + + /** + * When introspecting, all we have is the slug, + * so we need to keep track of the registered families + * to check whether the font was filtered after + * running the `jetpack_google_fonts_list` hook. + */ + $this->registered_google_fonts[ $slug ] = $font_family; + } + } + + /** + * Scan block for Google fonts. + * + * @param string $content The block content. + * @param array $parsed_block The parsed block attributes. + * + * @return string The block content. + */ + public function scan_block_for_google_fonts( $content, $parsed_block ) { + if ( isset( $parsed_block['attrs']['fontFamily'] ) ) { + $this->maybe_enqueue_font_family( $parsed_block['attrs']['fontFamily'] ); } + + return $content; + } + + /** + * Enqueue a font family if it was not removed from the curated list. + * + * @param string $font_family_slug The block content. + */ + private function maybe_enqueue_font_family( $font_family_slug ) { + if ( ! isset( $this->registered_google_fonts[ $font_family_slug ] ) ) { + // Font not allow-listed. + return; + } + + wp_enqueue_webfont( $font_family_slug ); } } From 8b31d4a085d98178746c0e175ef6d42a37ef8246 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Tue, 5 Apr 2022 18:13:46 -0500 Subject: [PATCH 4/8] Instropect global styles and enqueue used Google fonts --- .../class-jetpack-google-fonts.php | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php index a7f60856d69c1..8b55c8766907a 100644 --- a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php @@ -31,6 +31,7 @@ public function __construct() { * so we only need to scan for webfonts when browsing as a guest. */ if ( ! is_admin() ) { + add_action( 'wp_loaded', array( $this, 'scan_global_styles_for_google_fonts' ) ); add_filter( 'pre_render_block', array( $this, 'scan_block_for_google_fonts' ), 10, 2 ); } } @@ -126,4 +127,71 @@ private function maybe_enqueue_font_family( $font_family_slug ) { wp_enqueue_webfont( $font_family_slug ); } + + /** + * Scan global styles for Google fonts. + */ + public function scan_global_styles_for_google_fonts() { + $global_styles = gutenberg_get_global_styles(); + + // Look for fonts in block presets... + if ( isset( $global_styles['blocks'] ) ) { + foreach ( $global_styles['blocks'] as $setting ) { + $font_slug = $this->extract_font_slug_from_setting( $setting ); + + if ( $font_slug ) { + $this->maybe_enqueue_font_family( $font_slug ); + } + } + } + + // Look for fonts in HTML element presets... + if ( isset( $global_styles['elements'] ) ) { + foreach ( $global_styles['elements'] as $setting ) { + $font_slug = $this->extract_font_slug_from_setting( $setting ); + + if ( $font_slug ) { + $this->maybe_enqueue_font_family( $font_slug ); + } + } + } + + // Check if a global typography setting was defined. + $font_slug = $this->extract_font_slug_from_setting( $global_styles ); + + if ( $font_slug ) { + $this->maybe_enqueue_font_family( $font_slug ); + } + } + + /** + * Extract the font family slug from a settings object. + * + * @param object $setting The setting object. + * + * @return string|void + */ + private function extract_font_slug_from_setting( $setting ) { + if ( isset( $setting['typography'] ) && isset( $setting['typography']['fontFamily'] ) ) { + $font_family = $setting['typography']['fontFamily']; + + // Full string: var(--wp--preset--font-family--slug). + // We do not care about the origin of the font, only its slug. + preg_match( '/font-family--(?P.+)\)$/', $font_family, $matches ); + + if ( isset( $matches['slug'] ) ) { + return $matches['slug']; + } + + // Full string: var:preset|font-family|slug + // We do not care about the origin of the font, only its slug. + preg_match( '/font-family\|(?P.+)$/', $font_family, $matches ); + + if ( isset( $matches['slug'] ) ) { + return $matches['slug']; + } + + return $font_family; + } + } } From 2896b931f964dc73661d0ad3bdf87bbc97ae74b0 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 6 Apr 2022 14:14:51 -0500 Subject: [PATCH 5/8] Get font family slug through wp_register_webfonts output --- .../google-fonts/class-jetpack-google-fonts.php | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php index 8b55c8766907a..0e1897372808e 100644 --- a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php @@ -67,7 +67,7 @@ public function register_google_fonts() { $fonts_to_register = apply_filters( 'jetpack_google_fonts_list', JETPACK_GOOGLE_FONTS_LIST ); foreach ( $fonts_to_register as $font_family ) { - wp_register_webfonts( + $font_family_slugs = wp_register_webfonts( array( array( 'font-family' => $font_family, @@ -86,7 +86,16 @@ public function register_google_fonts() { ) ); - $slug = wp_webfonts()->get_font_slug( $font_family ); + if ( empty( $font_family_slugs ) ) { + // Fonts were not registered. + continue; + } + + /** + * As we're registering faces for the same font family, + * let's just pick the first one as they must be equal. + */ + $font_family_slug = $font_family_slugs[0]; /** * When introspecting, all we have is the slug, @@ -94,7 +103,7 @@ public function register_google_fonts() { * to check whether the font was filtered after * running the `jetpack_google_fonts_list` hook. */ - $this->registered_google_fonts[ $slug ] = $font_family; + $this->registered_google_fonts[ $font_family_slug ] = $font_family; } } From 9bab79d0dcb53280faac20216306c6abe6eb5d62 Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 6 Apr 2022 14:33:04 -0500 Subject: [PATCH 6/8] Extract global styles webfonts introspector to its own package --- pnpm-lock.yaml | 3 + .../.gitattributes | 16 ++++ .../.gitignore | 2 + .../.phpcs.dir.xml | 24 +++++ .../CHANGELOG.md | 7 ++ .../README.md | 20 +++++ .../changelog/.gitkeep | 0 ...oogle-fonts-instead-of-enqueueing-them-all | 4 + .../composer.json | 44 +++++++++ .../package.json | 29 ++++++ .../phpunit.xml.dist | 14 +++ ...ss-global-styles-webfonts-introspector.php | 90 +++++++++++++++++++ .../tests/php/bootstrap.php | 11 +++ 13 files changed, 264 insertions(+) create mode 100644 projects/packages/global-styles-webfonts-introspector/.gitattributes create mode 100644 projects/packages/global-styles-webfonts-introspector/.gitignore create mode 100644 projects/packages/global-styles-webfonts-introspector/.phpcs.dir.xml create mode 100644 projects/packages/global-styles-webfonts-introspector/CHANGELOG.md create mode 100644 projects/packages/global-styles-webfonts-introspector/README.md create mode 100644 projects/packages/global-styles-webfonts-introspector/changelog/.gitkeep create mode 100644 projects/packages/global-styles-webfonts-introspector/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all create mode 100644 projects/packages/global-styles-webfonts-introspector/composer.json create mode 100644 projects/packages/global-styles-webfonts-introspector/package.json create mode 100644 projects/packages/global-styles-webfonts-introspector/phpunit.xml.dist create mode 100644 projects/packages/global-styles-webfonts-introspector/src/class-global-styles-webfonts-introspector.php create mode 100644 projects/packages/global-styles-webfonts-introspector/tests/php/bootstrap.php diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a9114fe089e41..23653f2a47ce8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -593,6 +593,9 @@ importers: webpack: 5.65.0_webpack-cli@4.9.1 webpack-cli: 4.9.1_webpack@5.65.0 + projects/packages/global-styles-webfonts-introspector: + specifiers: {} + projects/packages/google-fonts-provider: specifiers: {} diff --git a/projects/packages/global-styles-webfonts-introspector/.gitattributes b/projects/packages/global-styles-webfonts-introspector/.gitattributes new file mode 100644 index 0000000000000..9f76af3f06e7e --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/.gitattributes @@ -0,0 +1,16 @@ +# Files not needed to be distributed in the package. +.gitattributes export-ignore +.github/ export-ignore +package.json export-ignore + +# Files to include in the mirror repo, but excluded via gitignore +# Remember to end all directories with `/**` to properly tag every file. +# /src/js/example.min.js production-include + +# Files to exclude from the mirror repo, but included in the monorepo. +# Remember to end all directories with `/**` to properly tag every file. +.gitignore production-exclude +changelog/** production-exclude +phpunit.xml.dist production-exclude +.phpcs.dir.xml production-exclude +tests/** production-exclude diff --git a/projects/packages/global-styles-webfonts-introspector/.gitignore b/projects/packages/global-styles-webfonts-introspector/.gitignore new file mode 100644 index 0000000000000..140fd587d2d52 --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/.gitignore @@ -0,0 +1,2 @@ +vendor/ +node_modules/ diff --git a/projects/packages/global-styles-webfonts-introspector/.phpcs.dir.xml b/projects/packages/global-styles-webfonts-introspector/.phpcs.dir.xml new file mode 100644 index 0000000000000..c01a67f3899b0 --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/.phpcs.dir.xml @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/packages/global-styles-webfonts-introspector/CHANGELOG.md b/projects/packages/global-styles-webfonts-introspector/CHANGELOG.md new file mode 100644 index 0000000000000..721294abd00ad --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/CHANGELOG.md @@ -0,0 +1,7 @@ +# Changelog + +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + diff --git a/projects/packages/global-styles-webfonts-introspector/README.md b/projects/packages/global-styles-webfonts-introspector/README.md new file mode 100644 index 0000000000000..274918e4764aa --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/README.md @@ -0,0 +1,20 @@ +# global-styles-webfonts-introspector + +Looks for webfonts picked in global styles + +## How to install global-styles-webfonts-introspector + +### Installation From Git Repo + +## Contribute + +## Get Help + +## Security + +Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic). + +## License + +global-styles-webfonts-introspector is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt) + diff --git a/projects/packages/global-styles-webfonts-introspector/changelog/.gitkeep b/projects/packages/global-styles-webfonts-introspector/changelog/.gitkeep new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/projects/packages/global-styles-webfonts-introspector/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all b/projects/packages/global-styles-webfonts-introspector/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all new file mode 100644 index 0000000000000..17403e499ea97 --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add Google fonts global styles introspection package. diff --git a/projects/packages/global-styles-webfonts-introspector/composer.json b/projects/packages/global-styles-webfonts-introspector/composer.json new file mode 100644 index 0000000000000..b807927221641 --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/composer.json @@ -0,0 +1,44 @@ +{ + "name": "automattic/jetpack-global-styles-webfonts-introspector", + "description": "Looks for webfonts picked in global styles", + "type": "jetpack-library", + "license": "GPL-2.0-or-later", + "require": {}, + "require-dev": { + "yoast/phpunit-polyfills": "1.0.3", + "automattic/jetpack-changelogger": "^3.0" + }, + "autoload": { + "classmap": [ + "src/" + ] + }, + "scripts": { + "phpunit": [ + "./vendor/phpunit/phpunit/phpunit --colors=always" + ], + "test-coverage": [ + "php -dpcov.directory=. ./vendor/bin/phpunit --coverage-clover \"$COVERAGE_DIR/clover.xml\"" + ], + "test-php": [ + "@composer phpunit" + ] + }, + "repositories": [ + { + "type": "path", + "url": "../../packages/*", + "options": { + "monorepo": true + } + } + ], + "minimum-stability": "dev", + "prefer-stable": true, + "extra": { + "branch-alias": { + "dev-master": "0.1.x-dev" + }, + "textdomain": "jetpack-global-styles-webfonts-introspector" + } +} diff --git a/projects/packages/global-styles-webfonts-introspector/package.json b/projects/packages/global-styles-webfonts-introspector/package.json new file mode 100644 index 0000000000000..bd2f649e683e4 --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/package.json @@ -0,0 +1,29 @@ +{ + "private": true, + "name": "@automattic/jetpack-global-styles-webfonts-introspector", + "version": "0.1.0-alpha", + "description": "Looks for webfonts picked in global styles", + "homepage": "https://jetpack.com", + "bugs": { + "url": "https://github.com/Automattic/jetpack/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/Automattic/jetpack.git" + }, + "license": "GPL-2.0-or-later", + "author": "Automattic", + "scripts": { + "build": "echo 'Not implemented.'", + "build-js": "echo 'Not implemented.'", + "build-production": "echo 'Not implemented.'", + "build-production-js": "echo 'Not implemented.'", + "clean": "true" + }, + "devDependencies": {}, + "engines": { + "node": "^14.18.3 || ^16.13.2", + "pnpm": "^6.32.3", + "yarn": "use pnpm instead - see docs/yarn-upgrade.md" + } +} diff --git a/projects/packages/global-styles-webfonts-introspector/phpunit.xml.dist b/projects/packages/global-styles-webfonts-introspector/phpunit.xml.dist new file mode 100644 index 0000000000000..3223c32458db2 --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/phpunit.xml.dist @@ -0,0 +1,14 @@ + + + + tests/php + + + + + + + src + + + diff --git a/projects/packages/global-styles-webfonts-introspector/src/class-global-styles-webfonts-introspector.php b/projects/packages/global-styles-webfonts-introspector/src/class-global-styles-webfonts-introspector.php new file mode 100644 index 0000000000000..78a4458186ecd --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/src/class-global-styles-webfonts-introspector.php @@ -0,0 +1,90 @@ +.+)\)$/', $font_family, $matches ); + + if ( isset( $matches['slug'] ) ) { + return $matches['slug']; + } + + // Full string: var:preset|font-family|slug + // We do not care about the origin of the font, only its slug. + preg_match( '/font-family\|(?P.+)$/', $font_family, $matches ); + + if ( isset( $matches['slug'] ) ) { + return $matches['slug']; + } + + return $font_family; + } + } + + /** + * Introspect global styles for webfonts. + */ + public static function introspect_global_styles_webfonts() { + if ( ! function_exists( 'gutenberg_get_global_styles' ) ) { + return; + } + + $global_styles = gutenberg_get_global_styles(); + + $found_webfonts = array(); + + // Look for fonts in block presets... + if ( isset( $global_styles['blocks'] ) ) { + foreach ( $global_styles['blocks'] as $setting ) { + $font_slug = self::extract_font_slug_from_setting( $setting ); + + if ( $font_slug ) { + $found_webfonts[ $font_slug ] = 1; + } + } + } + + // Look for fonts in HTML element presets... + if ( isset( $global_styles['elements'] ) ) { + foreach ( $global_styles['elements'] as $setting ) { + $font_slug = self::extract_font_slug_from_setting( $setting ); + + if ( $font_slug ) { + $found_webfonts[ $font_slug ] = 1; + } + } + } + + // Check if a global typography setting was defined. + $font_slug = self::extract_font_slug_from_setting( $global_styles ); + + if ( $font_slug ) { + $found_webfonts[ $font_slug ] = 1; + } + + return array_keys( $found_webfonts ); + } + +} diff --git a/projects/packages/global-styles-webfonts-introspector/tests/php/bootstrap.php b/projects/packages/global-styles-webfonts-introspector/tests/php/bootstrap.php new file mode 100644 index 0000000000000..46763b04a2cdb --- /dev/null +++ b/projects/packages/global-styles-webfonts-introspector/tests/php/bootstrap.php @@ -0,0 +1,11 @@ + Date: Wed, 6 Apr 2022 14:34:23 -0500 Subject: [PATCH 7/8] Use webfonts introspector when looking for fonts used in global styles --- projects/plugins/jetpack/composer.json | 1 + projects/plugins/jetpack/composer.lock | 46 +++++++++++- .../class-jetpack-google-fonts.php | 70 +++---------------- 3 files changed, 54 insertions(+), 63 deletions(-) diff --git a/projects/plugins/jetpack/composer.json b/projects/plugins/jetpack/composer.json index 90464c0ec483e..f410b752a0aed 100644 --- a/projects/plugins/jetpack/composer.json +++ b/projects/plugins/jetpack/composer.json @@ -25,6 +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-global-styles-webfonts-introspector": "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", diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock index 37f2e6a2e1d85..f14bc06729e16 100644 --- a/projects/plugins/jetpack/composer.lock +++ b/projects/plugins/jetpack/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "58e6ced6b5ab2c650ba00cb6d4838dc8", + "content-hash": "17c48db347e411b76fc2cd14903b7669", "packages": [ { "name": "automattic/jetpack-a8c-mc-stats", @@ -791,6 +791,49 @@ "relative": true } }, + { + "name": "automattic/jetpack-global-styles-webfonts-introspector", + "version": "dev-master", + "dist": { + "type": "path", + "url": "../../packages/global-styles-webfonts-introspector", + "reference": "e5e98c025007d6398194cf268dad558650569d37" + }, + "require-dev": { + "automattic/jetpack-changelogger": "^3.0", + "yoast/phpunit-polyfills": "1.0.3" + }, + "type": "jetpack-library", + "extra": { + "branch-alias": { + "dev-master": "0.1.x-dev" + }, + "textdomain": "jetpack-global-styles-webfonts-introspector" + }, + "autoload": { + "classmap": [ + "src/" + ] + }, + "scripts": { + "phpunit": [ + "./vendor/phpunit/phpunit/phpunit --colors=always" + ], + "test-coverage": [ + "php -dpcov.directory=. ./vendor/bin/phpunit --coverage-clover \"$COVERAGE_DIR/clover.xml\"" + ], + "test-php": [ + "@composer phpunit" + ] + }, + "license": [ + "GPL-2.0-or-later" + ], + "description": "Looks for webfonts picked in global styles", + "transport-options": { + "relative": true + } + }, { "name": "automattic/jetpack-google-fonts-provider", "version": "dev-master", @@ -5249,6 +5292,7 @@ "automattic/jetpack-constants": 20, "automattic/jetpack-device-detection": 20, "automattic/jetpack-error": 20, + "automattic/jetpack-global-styles-webfonts-introspector": 20, "automattic/jetpack-google-fonts-provider": 20, "automattic/jetpack-heartbeat": 20, "automattic/jetpack-identity-crisis": 20, diff --git a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php index 0e1897372808e..70a342cfa7c55 100644 --- a/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts/class-jetpack-google-fonts.php @@ -5,6 +5,8 @@ * @package automattic/jetpack */ +use Automattic\Jetpack\Fonts\Global_Styles_Webfonts_Introspector; + /** * Manages Google fonts registration, introspection and enqueueing. */ @@ -31,7 +33,7 @@ public function __construct() { * so we only need to scan for webfonts when browsing as a guest. */ if ( ! is_admin() ) { - add_action( 'wp_loaded', array( $this, 'scan_global_styles_for_google_fonts' ) ); + add_action( 'wp_loaded', array( $this, 'enqueue_global_styles_google_fonts' ) ); add_filter( 'pre_render_block', array( $this, 'scan_block_for_google_fonts' ), 10, 2 ); } } @@ -138,69 +140,13 @@ private function maybe_enqueue_font_family( $font_family_slug ) { } /** - * Scan global styles for Google fonts. - */ - public function scan_global_styles_for_google_fonts() { - $global_styles = gutenberg_get_global_styles(); - - // Look for fonts in block presets... - if ( isset( $global_styles['blocks'] ) ) { - foreach ( $global_styles['blocks'] as $setting ) { - $font_slug = $this->extract_font_slug_from_setting( $setting ); - - if ( $font_slug ) { - $this->maybe_enqueue_font_family( $font_slug ); - } - } - } - - // Look for fonts in HTML element presets... - if ( isset( $global_styles['elements'] ) ) { - foreach ( $global_styles['elements'] as $setting ) { - $font_slug = $this->extract_font_slug_from_setting( $setting ); - - if ( $font_slug ) { - $this->maybe_enqueue_font_family( $font_slug ); - } - } - } - - // Check if a global typography setting was defined. - $font_slug = $this->extract_font_slug_from_setting( $global_styles ); - - if ( $font_slug ) { - $this->maybe_enqueue_font_family( $font_slug ); - } - } - - /** - * Extract the font family slug from a settings object. - * - * @param object $setting The setting object. - * - * @return string|void + * Enqueue Google fonts used in global styles. */ - private function extract_font_slug_from_setting( $setting ) { - if ( isset( $setting['typography'] ) && isset( $setting['typography']['fontFamily'] ) ) { - $font_family = $setting['typography']['fontFamily']; - - // Full string: var(--wp--preset--font-family--slug). - // We do not care about the origin of the font, only its slug. - preg_match( '/font-family--(?P.+)\)$/', $font_family, $matches ); - - if ( isset( $matches['slug'] ) ) { - return $matches['slug']; - } - - // Full string: var:preset|font-family|slug - // We do not care about the origin of the font, only its slug. - preg_match( '/font-family\|(?P.+)$/', $font_family, $matches ); - - if ( isset( $matches['slug'] ) ) { - return $matches['slug']; - } + public function enqueue_global_styles_google_fonts() { + $webfonts_found = Global_Styles_Webfonts_Introspector::introspect_global_styles_webfonts(); - return $font_family; + foreach ( $webfonts_found as $font_family_slug ) { + $this->maybe_enqueue_font_family( $font_family_slug ); } } } From b9c92a49304c3b8ea03fced18b70a26ea23ec5ce Mon Sep 17 00:00:00 2001 From: Luis Felipe Zaguini Date: Wed, 6 Apr 2022 19:19:20 -0500 Subject: [PATCH 8/8] Add CHANGELOG entry --- ...te-instrospect-google-fonts-instead-of-enqueueing-them-all | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all diff --git a/projects/plugins/jetpack/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all b/projects/plugins/jetpack/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all new file mode 100644 index 0000000000000..75283230617e2 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-instrospect-google-fonts-instead-of-enqueueing-them-all @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Introspect Google fonts instead of enqueueing them all