Skip to content

Commit

Permalink
Introduce font-face styles generator and printer.
Browse files Browse the repository at this point in the history
Introducing Font Face, a server-side `@font-face` styles generator and printer. 

tl;dr:
* Introduces Font Face.
* Deprecates `_wp_theme_json_webfonts_handler()`.

**Introduce Font Face**

From an array of fonts (i.e. each font-family and its font variations to be processed), it:

1. Validates each `font-face` declaration, i.e. the CSS property and value pairing. If validation fails, processing stops with no font-face styles printed.
3. Generates the `@font-face` CSS for each font-family.
4. Prints the CSS within a `<style id="wp-fonts-local">` element.

The entry point into Font Face is through a new global function called `wp_print_font_faces()`, which is automatically called:

* when the `'wp_head'` hook runs (for the front-end).
* when the `'admin_print_styles'` hook runs (for the back-end).
* when `_wp_get_iframed_editor_assets()` runs to inject the `@font-face` styles into the iframed editor.

Once called, it gets the fonts from Theme_JSON merged data layer, which includes theme defined fonts and user activated fonts (once the Font Library #59166 is introduced into Core).

For classic sites, themes and plugins can directly call `wp_print_font_faces()` and pass their fonts array to it for processing.

**Deprecates `_wp_theme_json_webfonts_handler()`.**

As Font Face is a direct replacement, the stopgap code in `_wp_theme_json_webfonts_handler()` (introduced in 6.0.0 via [53282]) is deprecated and unused in Core.

**Props note:**
There's a long multiple year history baked into Font Face, which dates back to the early versions of a web font API (see #46370 and [WordPress/gutenberg#41479 roadmap]. The props list includes those who contributed from those early versions up to this commit.

**References:**
* #46370 original (Web)Fonts API proposal for registering and enqueuing web fonts.
* [WordPress/gutenberg#41479 Gutenberg tracking issue] which includes the evolution from Webfonts API to Fonts API to Font Face.
* [53282] / #55567 Added the stopgap code `_wp_theme_json_webfonts_handler()` in 6.0.
* [https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face @font-face on mdn web docs]
* #59166 Font Library: Font manager for WordPress

Follow-up to [53282].

Props aristath, jonoaldersonwp, hellofromTonya, andraganescu, annezazu, antonvlasenko, arena, askdesign, azaozz, bph, bradley2083, colorful-tones, costdev, davidbaumwald, desrosj, dingo_d, djcowan, domainsupport, dryanpress, elmastudio, flixos90, francina, garrett-eclipse, gigitux, grantmkin, grapplerulrich, gziolo, ironprogrammer, jb510, jeffpaul, jeremyyip, jffng, joostdevalk, jorgefilipecosta, juanmaguitar, mamaduka, matveb, mburridge, mitogh, ndiego, ntsekouras, oandregal, ocean90, oglekler, paaljoachim, pagelab, peterwilsoncc, poena, priethor, scruffian, SergeyBiryukov, shiloey, simison, skorasaurus, soean, westonruter, wildworks, zaguiini.
Fixes #59165.

git-svn-id: https://develop.svn.wordpress.org/trunk@56500 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
hellofromtonya committed Aug 31, 2023
1 parent 54a1779 commit c29b095
Show file tree
Hide file tree
Showing 41 changed files with 2,302 additions and 612 deletions.
1 change: 1 addition & 0 deletions phpcs.xml.dist
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,7 @@
<element value="WP_Test_Adjacent_Image_Link_TestCase"/>
<element value="WP_Tests_Image_Resize_UnitTestCase"/>
<element value="WP_Theme_UnitTestCase"/>
<element value="WP_Font_Face_UnitTestCase"/>

<!-- Mock classes. -->
<element value="Spy_REST_Server"/>
Expand Down
3 changes: 3 additions & 0 deletions src/wp-admin/includes/admin-filters.php
Original file line number Diff line number Diff line change
Expand Up @@ -168,3 +168,6 @@

// Append '(Draft)' to draft page titles in the privacy page dropdown.
add_filter( 'list_pages', '_wp_privacy_settings_filter_draft_page_titles', 10, 2 );

// Font management.
add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
1 change: 1 addition & 0 deletions src/wp-includes/block-editor.php
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,7 @@ function _wp_get_iframed_editor_assets() {

ob_start();
wp_print_styles();
wp_print_font_faces();
$styles = ob_get_clean();

ob_start();
Expand Down
4 changes: 3 additions & 1 deletion src/wp-includes/default-filters.php
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,6 @@
add_action( 'after_switch_theme', '_wp_menus_changed' );
add_action( 'after_switch_theme', '_wp_sidebars_changed' );
add_action( 'wp_print_styles', 'print_emoji_styles' );
add_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' );

if ( isset( $_GET['replytocom'] ) ) {
add_filter( 'wp_robots', 'wp_robots_no_robots' );
Expand Down Expand Up @@ -719,4 +718,7 @@
// CPT wp_block custom postmeta field.
add_action( 'init', 'wp_create_initial_post_meta' );

// Font management.
add_action( 'wp_head', 'wp_print_font_faces', 50 );

unset( $filter, $action );
Loading

0 comments on commit c29b095

Please sign in to comment.