Webfonts API

[aristath]

Description

This is an alternative to #36394, backporting the API from WordPress/wordpress-develop#1736.
That patch was thoroughly discussed with core & theme developers and approved by core committers (@felixarntz, @hellofromtonya, @SergeyBiryukov), but the API was not merged in core on time for WP 5.9.
It was deemed a better choice to port the API to Gutenberg, where it can be implemented for theme.json and the font-family pickers (see comment on https://core.trac.wordpress.org/ticket/46370#comment:111)

The difference between this PR and #36394 is that this one removes the registry, controller, validator & provider implementations, simplifying the code structure, addressing all feedback from the initial PR, and making it easier to merge in WordPress.

The user-facing functions are exactly the same.

How has this been tested?

• PHPUnit tests
• Added a webfont in theme.json and confirmed that everything works as expected.
• Added a webfont in functions.php and confirmed that it works as expected.

Testing a webfont loaded via theme.json:

In the twentytwentytwo theme, edit its theme.json file and replace fontFamilies with the following:

			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pero\", serif",
					"name": "Source Serif Pero",
					"slug": "source-serif-pero",
					"fontFace": [
						{
							"fontFamily": "Source Serif Pero",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2" ]
						},
						{
							"fontFamily": "Source Serif Pero",
							"fontWeight": "200 900",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2" ]
						}
					]
				}
			],

Then, in functions.php replace the twentytwentytwo_get_font_face_styles function with this:

function twentytwentytwo_get_font_face_styles() { return ''; }

The above will test the font-family registration using theme.json.

Next, to test the PHP registration using the wp_register_webfonts function, in functions.php add the following:

add_action( 'after_setup_theme', function() {
	if ( ! function_exists( 'wp_register_webfonts' ) ) {
		return;
	}
	wp_register_webfonts(
		array(
			array(
				'font-family'  => 'Random Font Name',
				'font-weight'  => '200 900',
				'font-style'   => 'normal',
				'font-stretch' => 'normal',
				'src'          => array( 'file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ),
			),
			array(
				'font-family'  => 'Random Font Name',
				'font-weight'  => '200 900',
				'font-style'   => 'italic',
				'font-stretch' => 'normal',
				'src'          => array( 'file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ),
			),
		)
	);
} );

The expected result is this:

• The webfont gets properly loaded in the frontend and editor
• The Source Serif Pero font is available in site editor -> global-styles -> typography
• The Random Font Name font is available in the font-family picker too

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[azaozz]

This is an alternative to #36394.

Yes, this is simpler and imho looks quite better. Still unsure about having the provider in separate files/classes but that's not a big deal.

[oandregal]

I've pushed some changes to the theme.json classes. This PR depends on #38625

To test this, you need to have #38625 locally and do git merge --squash update/extend-theme-json. Updated the testing instructions in the issue description as well.

[oandregal]

I've just merged #38625 so this needs a rebase to get those changes in.

[aristath]

• Feedback was addressed
• Tests pass successfully
• There are 2 ✅ already here

I think it's time we merge this PR, so I'll go ahead and do that. This API is something that we need for WP 6.0, so delaying it more will only result in blocking other PRs and features that depend on this.

We can create follow-up PRs for improvements and additions, but merging this will allow us to start using the API and iterate further as we go 👍