Webfonts: scan content for webfonts and enqueue them #39399

zaguiini · 2022-03-11T22:34:36Z

We've since created an alternative approach that we find preferable to this PR. It can be found here. #39559

Part of #39332. Read #39332 (comment) to gather more context about the whole picture regarding the implementation.

What?

Now that we are not outputting all the registered fonts (#39327), we need to scan the content for actually used fonts and enqueue them. We are placing filters for content, global styles, and templates so we can crawl for webfonts and enqueue them. We are scanning all the post types that stock WordPress exposes through its API.

Why?

Performance. #39332 has more about it.

How?

We're hooking into every possible post type and enqueueing the webfonts that they are using. The webfonts found are then put in a cache (which is wiped on save) so it doesn't slow down the rendering process.

The process is a little different for templates and template parts since they might or might not be a post entry: if the template is pristine, there's no post, and the template is read from disk. That's why we cannot use meta attributes for them. Instead, they use a theme mod so the cache is wiped when the theme is switched.

Testing Instructions

Follow the steps on Webfonts API: expose enqueueing method instead of directly enqueueing fonts on registration #39327 to register a webfont;
Open the block editor and include a block which allows typography customization;
Pick the registered webfont and save the content.

Refresh the page and you should see the custom webfont there. It also works for global styles.

TODO

Tests.

zaguiini · 2022-03-12T11:02:16Z

lib/compat/wordpress-6.0/class-wp-webfonts.php

+	 * that has been loaded in the front-end.
+	 */
+	public function register_filter_for_current_template_webfonts_enqueuing() {
+		$template_type_slugs = array_keys( get_default_block_template_types() );


Will this work for custom templates?

I think it will only work for custom templates with the same slugs as those defaults, but I think would miss others that could be created by users or developers (like header-footer-only for example isnt part of the default list.)

I wonder if gutenberg_get_block_templates would work to create a slug list like this from? I think that should be retrieving all templates both from the theme file structure and the database.

So, if I got this right, get_default_block_template_types returns a list of the "slots" where the templates are applied. If this is right, then I think we should be good to go -- we want to hook into the rendered templates and scan them for fonts as lazily as possible.

gutenberg_get_block_templates retrieves all templates, whether they're rendered or not, and that might be costly because "existing" doesn't mean that the template is actually being used. I think a good idea would be to be as lazy as possible and only cache the fonts for the templates are actively on the page.

zaguiini · 2022-03-12T15:35:04Z

lib/compat/wordpress-6.0/class-wp-webfonts.php

+	/**
+	 * Set up the actions to invalidate webfont cache.
+	 */
+	private function register_webfont_cache_invalidation_actions() {


In this function, I thought of two approaches:

Hook into save_post and get the $post->post_type to determine the invalidation method (theme mod or meta attribute);

The one I picked. I feel it's easier to understand and it looks to fit more the WP filter/action definitions.

zaguiini · 2022-03-14T13:13:05Z

Test failures are not related to the changes proposed by the PR. End to End Tests are failing regularly on trunk.

aristath · 2022-03-16T10:01:48Z

I just wanted to add something to the conversation here:
I got a message/question on Slack a couple of days ago, about whether or not the webfonts API can be used to add a webfont used in a cookie banner.
Granted, a "cookie banner" is not something that would necessarily need a custom webfont, however, it got me thinking about JS-injected content.
There are tons of implementations and ways to build themes, render content etc. If we scan the content to get the font-families used in the content that is available on-render, then any content that gets injected via JS won't be parsed and we won't be able to check that for webfonts availability.
Another example: A few years ago I built a theme which was only rendering the header & main-content on initial page-load. The sidebars and footer were fetched after the initial page-load via AJAX, making the initial page-load faster. The logic was that when you visit a page you start from the top, and if the footer takes an extra second to load there's no harm 'cause it will take the visitor at least that time to get there.
It might be an edge-case, but it's just another scenario out of many. I'm sure there are plenty of scenarios out there that add content via JS and won't be covered by an implementation like this 🤔

zaguiini · 2022-03-16T19:41:56Z

Hey @aristath,

For the use-case you described: the user/developer can still programmatically enqueue webfonts at will -- they'll know beforehand which ones they want to preload, so when it's fetched through AJAX, for example, the font-face declaration will be there already. I don't see a problem with that.

On a side note, though: the PRs that we're adding are in no way final. They could, and probably will, be iterated upon in the future. This PR is scanning for webfonts used in the default Gutenberg post types, which is about what we can do. It's really hard to give support to a million post types and ways to inject content since we do not know what the users/plugin developers are doing. We're adding a way to:

automatically scan and enqueue webfonts that are located in the posts that Gutenberg/WP provides by default (post, pages, etc);
exposing an API where plugin developers can hook into and register/enqueue webfonts at will.

I think we're headed in a good direction with this right now, and I don't think this is the final form as well. Let's go step by step. First, separate between registering and enqueueing. Second, scan the content we know how to scan and look for fonts. Third, account for any edge cases that might appear once the API is published. Curious to understand what you think about it.

jeyip · 2022-03-22T15:30:33Z

We've since created an alternative approach that we find preferable to this PR. It can be found here. #39559

zaguiini · 2022-03-22T19:23:24Z

Close in detriment of #39593.

zaguiini added the [Feature] Webfonts label Mar 11, 2022

zaguiini requested a review from TimothyBJacobs as a code owner March 11, 2022 22:34

zaguiini self-assigned this Mar 11, 2022

zaguiini requested a review from spacedmonkey as a code owner March 11, 2022 22:34

This was referenced Mar 11, 2022

Webfonts: remove unused font-face declarations #39332

Closed

Webfonts API: expose enqueueing method instead of directly enqueueing fonts on registration #39327

Closed

zaguiini requested review from aristath, carolinan, jeyip, vindl, mattwiebe, Addison-Stavlo and creativecoder March 11, 2022 22:36

zaguiini commented Mar 12, 2022

View reviewed changes

jeyip force-pushed the try/expose-enqueue-webfont-method branch 3 times, most recently from c9ca5cf to fc3c8e9 Compare March 14, 2022 21:45

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch from 18819cd to f66950b Compare March 15, 2022 17:35

zaguiini force-pushed the try/expose-enqueue-webfont-method branch from be66425 to 7b4900a Compare March 15, 2022 17:44

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch from f66950b to 9440eba Compare March 15, 2022 17:48

zaguiini force-pushed the try/expose-enqueue-webfont-method branch 2 times, most recently from 88941bc to f763e10 Compare March 16, 2022 23:34

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch from 9440eba to 7f7dde5 Compare March 16, 2022 23:54

zaguiini force-pushed the try/expose-enqueue-webfont-method branch from f763e10 to e497a0c Compare March 17, 2022 00:08

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch 2 times, most recently from 035093b to e1c4ea8 Compare March 17, 2022 00:15

zaguiini force-pushed the try/expose-enqueue-webfont-method branch from e497a0c to 5ab6da7 Compare March 17, 2022 00:49

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch from e1c4ea8 to 35e6782 Compare March 17, 2022 00:52

zaguiini added 3 commits March 17, 2022 13:13

Preserve font id when registering and/or enqueueing

1518daa

Cache and enqueue the webfonts used in the template

b1c205b

Invalidate template webfonts cache on template or template save

d476e94

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch from 35e6782 to 64cc706 Compare March 17, 2022 16:13

zaguiini added 4 commits March 17, 2022 13:36

Cache and enqueue webfonts used in global styles

371f3d6

Invalidate global styles webfonts cache on save

0c46216

Set webfont cache invalidation for all post types

1fd06c3

Cache and enqueue webfonts used in content

dee80c1

zaguiini force-pushed the try/scan-content-for-webfonts-and-enqueue-them branch from 64cc706 to dee80c1 Compare March 17, 2022 16:36

zaguiini closed this Mar 22, 2022

aristath deleted the try/scan-content-for-webfonts-and-enqueue-them branch March 23, 2022 09:50

Directory

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webfonts: scan content for webfonts and enqueue them #39399

Webfonts: scan content for webfonts and enqueue them #39399

zaguiini commented Mar 11, 2022 •

edited by jeyip

zaguiini Mar 12, 2022

Addison-Stavlo Mar 17, 2022 •

edited

Addison-Stavlo Mar 17, 2022

zaguiini Mar 17, 2022 •

edited

zaguiini Mar 17, 2022 •

edited

zaguiini Mar 12, 2022

zaguiini commented Mar 14, 2022

aristath commented Mar 16, 2022

zaguiini commented Mar 16, 2022 •

edited

jeyip commented Mar 22, 2022

zaguiini commented Mar 22, 2022

Directory

Webfonts: scan content for webfonts and enqueue them #39399

Webfonts: scan content for webfonts and enqueue them #39399

Conversation

zaguiini commented Mar 11, 2022 • edited by jeyip

What?

Why?

How?

Testing Instructions

TODO

zaguiini Mar 12, 2022

Choose a reason for hiding this comment

Addison-Stavlo Mar 17, 2022 • edited

Choose a reason for hiding this comment

Addison-Stavlo Mar 17, 2022

Choose a reason for hiding this comment

zaguiini Mar 17, 2022 • edited

Choose a reason for hiding this comment

zaguiini Mar 17, 2022 • edited

Choose a reason for hiding this comment

zaguiini Mar 12, 2022

Choose a reason for hiding this comment

zaguiini commented Mar 14, 2022

aristath commented Mar 16, 2022

zaguiini commented Mar 16, 2022 • edited

jeyip commented Mar 22, 2022

zaguiini commented Mar 22, 2022

zaguiini commented Mar 11, 2022 •

edited by jeyip

Addison-Stavlo Mar 17, 2022 •

edited

zaguiini Mar 17, 2022 •

edited

zaguiini Mar 17, 2022 •

edited

zaguiini commented Mar 16, 2022 •

edited