[Webfonts] Rename to Fonts API #46749

hellofromtonya · 2022-12-22T16:21:48Z

What?

Renames the API from Webfonts to Fonts API.

Why?

The renaming is to align the feature to well-known authoritative standards for consistency and maintainability. Why? These standards do not use "webfont" to describe @font-face CSS styles. Rather, they use terms such as "font", "custom font", "downloadable font", and "web font".

How?

All publicly facing functionality is deprecated as part of the temporary BC layer. Notices will be thrown to alert developers where to upgrade their code to the new API.
"web" is removed from all inline comments, docblocks, and code names (except for the original which are now deprecated).

Testing Instructions

Testing Instructions for Keyboard

Testing Instructions

Active TT3
Activate the Gutenberg plugin
Reset the global styles to the default by:
- Go to the Site Editor > Global Styles "Styles Beta" UI
- Click on the 3 vertical dots
- Select "Reset to defaults"
- Click on the "Save" button
Examine the dynamically generated @font-face stylings in the admin area by:
- Open Dev Tools in your favorite browser
- Search for wp-fonts-local (which is in the <head>)
- Expand the <style> element to inspect the CSS
- The CSS should be:

<style id="wp-fonts-local">
@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;src:local("Source Serif Pro"), url('/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:200 900;font-display:fallback;src:local("Source Serif Pro"), url('/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:fallback;src:local("DM Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/dm-sans/DMSans-Regular.ttf') format('truetype');}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-display:fallback;src:local("DM Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/dm-sans/DMSans-Italic.ttf') format('truetype');}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:fallback;src:local("DM Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/dm-sans/DMSans-Bold.ttf') format('truetype');}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:700;font-display:fallback;src:local("DM Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/dm-sans/DMSans-BoldItalic.ttf') format('truetype');}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:fallback;src:local("IBM Plex Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-Light.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:fallback;src:local("IBM Plex Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-LightItalic.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;font-display:fallback;src:local("IBM Plex Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-ExtraLight.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;font-display:fallback;src:local("IBM Plex Sans"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-ExtraLightItalic.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:fallback;src:local("IBM Plex Mono"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexMono-Text.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:fallback;src:local("IBM Plex Mono"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexMono-TextItalic.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:fallback;src:local("IBM Plex Mono"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexMono-Bold.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;font-display:fallback;src:local("IBM Plex Mono"), url('/wp-content/themes/twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-BoldItalic.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:Inter;font-style:normal;font-weight:200 900;font-display:fallback;src:local(Inter), url('/wp-content/themes/twentytwentytwo/assets/fonts/inter/Inter.ttf') format('truetype');font-stretch:normal;}
</style>

Examine the front-end by:
- Go to the front-end of the website
- Open Dev Tools in your favorite browser
- Search for wp-fonts-local
- Expand the <style> element to inspect the CSS
- The CSS should be the same as above.
Change to the Blue style variation and modify the "text" typography by:
- Go back to the Global Styles UI in the admin
- Select "Browser styles"
- Select the "blue" variation
- Select "Browse styles" to go back
- Select "Typography"
- Select "Text"
- Change the size to "4"
- Change the "Appearance" to "Semi Bold Italic"
- Inspect the CSS as you did in Step 3. It should be the same.
Examine the front-end by:
- Refresh (may have to refresh multiple times until the blue styling renders)
- Search for wp-fonts-local
- Expand the <style> element to inspect the CSS and verify the CSS.

Testing a plugin

This gist is a plugin that uses Jetpack's Google Font Provider package, which is using the original (deprecated) API functionality and web fonts array structure. So it should continue to work and throw deprecation notices.

Instructions of how to install and test are in the plugin's README.md file, which you can get here.

Note: This plugin has a Google Fonts Provider which means it will print <style id="wp-fonts-jetpack-google-fonts">..</style> into the <head>.

ironprogrammer

Thanks for this, @hellofromtonya! I've left a few notes for review.

lib/experimental/class-wp-webfonts-provider-local.php

lib/experimental/class-wp-webfonts-provider.php

lib/experimental/class-wp-webfonts.php

hellofromtonya · 2023-01-17T15:35:36Z

Well darn it all, lots has changed since I created this PR. Merge conflicts are being unruly. Going to rebase and reapply the commits. Then force push to get it back in sync. Then will apply the changes @ironprogrammer suggested (thank you Brian).

* Moves the files into a fonts-api directory to better identify all of the API's files. * Moves the deprecated files (BC layer) into a /deprecations/ dir to better identify files that will not be backported to Core.

hellofromtonya · 2023-01-17T22:47:03Z

Merge conflicts taken care of ✅
Feedback from @ironprogrammer addressed ✅
Tested it locally: works in the Site Editor and frontend ✅

@ironprogrammer @aristath It's ready for your review and testing. If possibly, would like to merge this PR this week to unblock the rest of the API's work. Thanks!

github-actions · 2023-01-17T22:47:16Z

Flaky tests detected in 79cc093432d018bb738888d9dcf6f13dbcd37cea.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3943813274
📝 Reported issues:

[Flaky Test] should always expand single line selection #39787 in specs/editor/various/multi-block-selection.test.js
[Flaky Test] should insert media, convert to blocks, and undo in one step #36123 in specs/editor/blocks/classic.test.js
[Flaky Test] should move the blocks down #39691 in specs/editor/various/block-editor-keyboard-shortcuts.test.js
[Flaky Test] should not allow blocks to be inserted in inner blocks #44341 in specs/editor/plugins/cpt-locking.test.js

aristath

Amazing work here! Looks good to me and works as advertised 👍

hellofromtonya added [Priority] High Used to indicate top priority items that need quick attention [Feature] Webfonts labels Dec 22, 2022

hellofromtonya added this to the Gutenberg 14.9 milestone Dec 22, 2022

hellofromtonya requested a review from spacedmonkey as a code owner December 22, 2022 16:21

hellofromtonya requested review from aristath and desrosj December 22, 2022 16:22

hellofromtonya mentioned this pull request Dec 22, 2022

Webfonts: Consider renaming "webfont" to "web font" or "font" #42868

Closed

3 tasks

hellofromtonya force-pushed the try/rename-to-fonts-api branch from 1e6b6fe to be55e3a Compare December 22, 2022 16:46

hellofromtonya mentioned this pull request Dec 22, 2022

Server-Side Font Face CSS Generation and Printing: Ongoing Roadmap (formerly the Fonts API) #41479

Closed

5 tasks

This was referenced Dec 27, 2022

[Webfonts] Upgrade the Google Fonts Provider to use the new Fonts API Automattic/jetpack#28063

Closed

Migrate to new Web fonts API format from Gutenberg Automattic/jetpack#28054

Merged

priethor removed this from the Gutenberg 14.9 milestone Jan 4, 2023

ironprogrammer reviewed Jan 17, 2023

View reviewed changes

hellofromtonya added 3 commits January 17, 2023 10:15

Move files into /lib/experimental/fonts-api/ dir

df0e026

* Moves the files into a fonts-api directory to better identify all of the API's files. * Moves the deprecated files (BC layer) into a /deprecations/ dir to better identify files that will not be backported to Core.

Tests: rename dir, testcase, trait, groups

43e33c8

Renamed subpackage to Fonts API

565f508

hellofromtonya force-pushed the try/rename-to-fonts-api branch 2 times, most recently from 805b8fa to 145548e Compare January 17, 2023 22:13

hellofromtonya added 10 commits January 17, 2023 16:20

Rename and deprecate WP_Fonts_Utils

f66b0b4

Rename register-fonts-from-theme-json.php

9977e38

Rename and deprecate wp_webfonts()

84f35aa

Rename and deprecate wp_register_webfonts()

5061a10

Rename and deprecate wp_enqueue_webfonts()

54cf059

Rename and deprecate wp_enqueue_webfont_variations()

4c04b4a

Rename and deprecate wp_deregister_font_variation()

3be8850

Rename and deprecate wp_register_webfont_provider()

5442b84

Rename and deprecate wp_print_webfonts()

1778a1e

Rename and deprecate WP_Webfonts_Provider and WP_Webfonts_Provider_Local

4df02bf

WordPress deleted a comment from github-actions bot Jan 17, 2023

hellofromtonya force-pushed the try/rename-to-fonts-api branch from 145548e to 79cc093 Compare January 17, 2023 22:25

Rename and deprecate WP_Web_Fonts

52ef0d6

hellofromtonya force-pushed the try/rename-to-fonts-api branch from 79cc093 to 52ef0d6 Compare January 17, 2023 22:42

hellofromtonya removed request for spacedmonkey and desrosj January 17, 2023 22:47

aristath approved these changes Jan 18, 2023

View reviewed changes

hellofromtonya merged commit 37bb7c5 into trunk Jan 18, 2023

hellofromtonya deleted the try/rename-to-fonts-api branch January 18, 2023 12:30

github-actions bot added this to the Gutenberg 15.1 milestone Jan 18, 2023

hellofromtonya mentioned this pull request Jan 18, 2023

Blockbase: Register Fonts via Webfonts API instead of theme.json Automattic/themes#6794

Open

juanmaguitar added the [Type] Enhancement A suggestion for improvement. label Feb 1, 2023

djcowan mentioned this pull request Jun 14, 2023

@font-face CSS not loading in page editor. wp-edit-post-js-after #51072

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Webfonts] Rename to Fonts API #46749

[Webfonts] Rename to Fonts API #46749

hellofromtonya commented Dec 22, 2022 •

edited

Loading

ironprogrammer left a comment

hellofromtonya commented Jan 17, 2023

hellofromtonya commented Jan 17, 2023

github-actions bot commented Jan 17, 2023

aristath left a comment

[Webfonts] Rename to Fonts API #46749

[Webfonts] Rename to Fonts API #46749

Conversation

hellofromtonya commented Dec 22, 2022 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Testing Instructions

Testing a plugin

ironprogrammer left a comment

Choose a reason for hiding this comment

hellofromtonya commented Jan 17, 2023

hellofromtonya commented Jan 17, 2023

github-actions bot commented Jan 17, 2023

aristath left a comment

Choose a reason for hiding this comment

hellofromtonya commented Dec 22, 2022 •

edited

Loading