diff --git a/projects/packages/google-fonts-provider/changelog/update-enqueue-used-google-fonts b/projects/packages/google-fonts-provider/changelog/update-enqueue-used-google-fonts new file mode 100644 index 000000000000..59eab948e2b5 --- /dev/null +++ b/projects/packages/google-fonts-provider/changelog/update-enqueue-used-google-fonts @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add functions for enqueueing fonts used in block and global style settings diff --git a/projects/packages/google-fonts-provider/composer.json b/projects/packages/google-fonts-provider/composer.json index 59a6e84c9bdc..a80f8e4cf9ac 100644 --- a/projects/packages/google-fonts-provider/composer.json +++ b/projects/packages/google-fonts-provider/composer.json @@ -43,7 +43,7 @@ "link-template": "https://github.com/Automattic/jetpack-google-fonts-provider/compare/v${old}...v${new}" }, "branch-alias": { - "dev-master": "0.2.x-dev" + "dev-master": "0.3.x-dev" }, "textdomain": "jetpack-google-fonts-provider" } diff --git a/projects/packages/google-fonts-provider/package.json b/projects/packages/google-fonts-provider/package.json index 559eb2712998..8290e2cf5659 100644 --- a/projects/packages/google-fonts-provider/package.json +++ b/projects/packages/google-fonts-provider/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@automattic/jetpack-google-fonts-provider", - "version": "0.2.3-alpha", + "version": "0.3.0-alpha", "description": "WordPress Webfonts provider for Google Fonts", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/google-fonts-provider/#readme", "bugs": { diff --git a/projects/packages/google-fonts-provider/src/class-utils.php b/projects/packages/google-fonts-provider/src/class-utils.php index ba00ea93962c..3ea69559dece 100644 --- a/projects/packages/google-fonts-provider/src/class-utils.php +++ b/projects/packages/google-fonts-provider/src/class-utils.php @@ -31,4 +31,27 @@ public static function font_source_resource_hint( $urls, $relation_type ) { return $urls; } + + /** + * Check if a font family is registered (verifying that it can be enqueued). + * + * This function will not be needed if/when WP_Webfonts provides this functionality. + * + * @link https://github.com/WordPress/gutenberg/pull/39988 + * @link https://github.com/WordPress/gutenberg/blob/e94fffae0684aa5a6dc370ce3eba262cb77071d9/lib/experimental/class-wp-webfonts.php#L217 + * + * @param string $font_family_name Name of font family. + * @return boolean|void Whether the font family is registered, or void if WP_Webfonts is not available. + */ + public static function is_font_family_registered( $font_family_name ) { + if ( ! function_exists( 'wp_webfonts' ) || ! method_exists( 'WP_Webfonts', 'get_font_slug' ) ) { + return; + } + + $wp_webfonts = wp_webfonts(); + + $slug = \WP_Webfonts::get_font_slug( $font_family_name ); + + return isset( $wp_webfonts->get_registered_webfonts()[ $slug ] ); + } } diff --git a/projects/packages/google-fonts-provider/src/introspectors/class-blocks.php b/projects/packages/google-fonts-provider/src/introspectors/class-blocks.php new file mode 100644 index 000000000000..f715bfdf0ad7 --- /dev/null +++ b/projects/packages/google-fonts-provider/src/introspectors/class-blocks.php @@ -0,0 +1,37 @@ +.+)\)$/', $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; + } +} diff --git a/projects/packages/google-fonts-provider/tests/php/test-blocks-font-introspector.php b/projects/packages/google-fonts-provider/tests/php/test-blocks-font-introspector.php new file mode 100644 index 000000000000..3416a7a2ced9 --- /dev/null +++ b/projects/packages/google-fonts-provider/tests/php/test-blocks-font-introspector.php @@ -0,0 +1,102 @@ +webfonts = \Mockery::mock( 'WP_Webfonts' ); + + Functions\stubs( + array( + 'is_admin' => false, + 'wp_webfonts' => $this->webfonts, + ) + ); + } + + /** + * Test that a font family in block attributes is enqueued. + */ + public function test_enqueues_block_font_when_set() { + $content = 'foo'; + $parsed_block = array( + 'attrs' => array( + 'fontFamily' => 'Roboto', + ), + ); + + $this->webfonts + ->shouldReceive( 'get_registered_webfonts' ) + ->andReturn( array( 'roboto' => array() ) ); + + Functions\expect( 'wp_enqueue_webfont' ) + ->once() + ->with( 'Roboto' ); + + $this->assertEquals( $content, Blocks::enqueue_block_fonts( $content, $parsed_block ) ); + } + + /** + * Test that a block without font settings still returns the filtered content. + */ + public function test_does_not_enqueue_block_font_when_not_set() { + $content = 'foo'; + $parsed_block = array(); + + Functions\expect( 'wp_enqueue_webfont' ) + ->never(); + + $this->assertEquals( $content, Blocks::enqueue_block_fonts( $content, $parsed_block ) ); + } + + /** + * Test teardown. + * + * @after + */ + public function tear_down() { + Monkey\tearDown(); + } +} + +// phpcs:disable + +/** + * Use stub so that method_exists checks will pass. + * + * This will not be needed if/when WP_Webfonts provides a check for + * is_font_family_registered(). + * + * @link https://github.com/WordPress/gutenberg/pull/39988 + * @link https://github.com/WordPress/gutenberg/blob/e94fffae0684aa5a6dc370ce3eba262cb77071d9/lib/experimental/class-wp-webfonts.php#L217 + */ +class WP_Webfonts { + public static function get_font_slug( $font ) { + return strtolower( $font ); + } +} diff --git a/projects/packages/google-fonts-provider/tests/php/test-global-styles-font-introspector.php b/projects/packages/google-fonts-provider/tests/php/test-global-styles-font-introspector.php new file mode 100644 index 000000000000..b84b7977085c --- /dev/null +++ b/projects/packages/google-fonts-provider/tests/php/test-global-styles-font-introspector.php @@ -0,0 +1,133 @@ +webfonts = \Mockery::mock( 'WP_Webfonts' ); + + Functions\stubs( + array( + 'is_admin' => false, + 'wp_webfonts' => $this->webfonts, + ) + ); + } + + /** + * Test that a font family used in block presets is enqueued. + */ + public function test_enqueues_block_preset_fonts() { + $global_styles = array( + 'blocks' => array( + array( + 'typography' => array( + 'fontFamily' => 'Roboto', + ), + ), + ), + ); + + Functions\expect( 'gutenberg_get_global_styles' ) + ->once() + ->andReturn( $global_styles ); + + $this->webfonts + ->shouldReceive( 'get_registered_webfonts' ) + ->andReturn( array( 'roboto' => array() ) ); + + Functions\expect( 'wp_enqueue_webfont' ) + ->once() + ->with( 'Roboto' ); + + $this->assertNull( Global_Styles::enqueue_global_styles_fonts() ); + } + + /** + * Test that font family used in element font presets is enqueued. + */ + public function test_enqueues_element_preset_fonts() { + $global_styles = array( + 'elements' => array( + array( + 'typography' => array( + 'fontFamily' => 'Arvo', + ), + ), + ), + ); + + Functions\expect( 'gutenberg_get_global_styles' ) + ->once() + ->andReturn( $global_styles ); + + $this->webfonts + ->shouldReceive( 'get_registered_webfonts' ) + ->andReturn( array( 'arvo' => array() ) ); + + Functions\expect( 'wp_enqueue_webfont' ) + ->once() + ->with( 'Arvo' ); + + $this->assertNull( Global_Styles::enqueue_global_styles_fonts() ); + } + + /** + * Test that a font family used in Global Styles text settings is enqueued. + */ + public function test_enqueues_typography_fonts() { + $global_styles = array( + 'typography' => array( + 'fontFamily' => 'Lato', + ), + ); + + Functions\expect( 'gutenberg_get_global_styles' ) + ->once() + ->andReturn( $global_styles ); + + $this->webfonts + ->shouldReceive( 'get_registered_webfonts' ) + ->andReturn( array( 'lato' => array() ) ); + + Functions\expect( 'wp_enqueue_webfont' ) + ->once() + ->with( 'Lato' ); + + $this->assertNull( Global_Styles::enqueue_global_styles_fonts() ); + } + + /** + * Test teardown. + * + * @after + */ + public function tear_down() { + Monkey\tearDown(); + } +} diff --git a/projects/plugins/jetpack/changelog/update-enqueue-used-google-fonts b/projects/plugins/jetpack/changelog/update-enqueue-used-google-fonts new file mode 100644 index 000000000000..de9a3c45cac2 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-enqueue-used-google-fonts @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Google Fonts module: enqueue fonts used in block and Global Styles settings diff --git a/projects/plugins/jetpack/composer.json b/projects/plugins/jetpack/composer.json index 2b2dfc936a9b..68b2bef352e7 100644 --- a/projects/plugins/jetpack/composer.json +++ b/projects/plugins/jetpack/composer.json @@ -25,7 +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-google-fonts-provider": "0.2.x-dev", + "automattic/jetpack-google-fonts-provider": "0.3.x-dev", "automattic/jetpack-identity-crisis": "0.8.x-dev", "automattic/jetpack-jitm": "2.2.x-dev", "automattic/jetpack-lazy-images": "2.1.x-dev", diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock index 6ebcca5f444d..53094e04ec77 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": "ed070e0a747910e15a2b4c071c35ea69", + "content-hash": "1e7f9636e832a1a5752b3aae87638f28", "packages": [ { "name": "automattic/jetpack-a8c-mc-stats", @@ -796,7 +796,7 @@ "dist": { "type": "path", "url": "../../packages/google-fonts-provider", - "reference": "b4505b57b156ce9fb2a2eee1adebae621c7b3f96" + "reference": "4612b57832dbaa4fcc33ac683cd2a9fd191cab3c" }, "require-dev": { "automattic/jetpack-changelogger": "^3.0", @@ -811,7 +811,7 @@ "link-template": "https://github.com/Automattic/jetpack-google-fonts-provider/compare/v${old}...v${new}" }, "branch-alias": { - "dev-master": "0.2.x-dev" + "dev-master": "0.3.x-dev" }, "textdomain": "jetpack-google-fonts-provider" }, diff --git a/projects/plugins/jetpack/modules/google-fonts.php b/projects/plugins/jetpack/modules/google-fonts.php index 7d3fa33e7556..7ddba9dbb6dd 100644 --- a/projects/plugins/jetpack/modules/google-fonts.php +++ b/projects/plugins/jetpack/modules/google-fonts.php @@ -97,3 +97,5 @@ function jetpack_add_google_fonts_provider() { 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 ); +add_filter( 'pre_render_block', '\Automattic\Jetpack\Fonts\Introspectors\Blocks::enqueue_block_fonts', 10, 2 ); +add_action( 'init', '\Automattic\Jetpack\Fonts\Introspectors\Global_Styles::enqueue_global_styles_fonts' );