Google Fonts: Enqueue fonts used in block and Global Styles

[creativecoder]

Changes proposed in this Pull Request:

• Updates the Google Fonts module to be compatible with the most recent version of the WP_Webfonts API.
• Registered fonts are no longer enqueued by default, so we add hooks that enqueue Google Fonts used in block and Global Styles settings so those fonts load.
• This prevents dozens of font-face declarations from being printed out in the HTML source for unused fonts.

Jetpack product discussion

n/a

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

• On a site with the most recent version of Gutenberg active, enable the Google Fonts module (/wp-admin/admin.php?page=jetpack_modules).
• With a block theme enabled, to the Site editor.
• Go to Global styles and choose a Google Font from the Font family settings for all Text.
• Go to the Blocks settings in Global styles and choose a different Google Font for the font family setting for all blocks of that type, like Buttons (makes sure you have an instance of that block on the page).
• Select an individual block's settings and set yet another Google font for that individual block (like a List block... not all blocks have Font family settings, it partly depends on the theme).
• Now load the the page you were editing in the front end... make sure all of the fonts you selected are loaded. I do this by viewing the Network tab in browser tools and filtering for Fonts, or the filtering for the fonts.gstatic.com domain.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: May 3, 2022.
• Scheduled code freeze: April 25, 2022.

[zaguiini]

Thank you! Left some comments in #23810 (comment)

[sdixon194]

Had to do some fixing up with the versions, but this works for me 👍

[jeyip]

Testing

I tested by applying Merriweather to global styles typography, Space Mono to button block-level global styles, and Raleway to a specific instance of a site title block's font family settings.

Requirements

Block Settings

• Font family selected from block settings applies only to specific block instance
• Font family displays properly in editor
• Font family displays properly in frontend
• Font family request is visible in network tab of chrome dev tools
• Block settings override global styles block-level settings

Global Styles Block-Level Settings

• Font family selected from block settings applies only to the selected blocks
• Font family displays properly in editor
• Font family displays properly in frontend
• Font family request is visible in network tab of chrome dev tools

Global Styles

• Selected font family modifies all fonts for non-heading blocks
• Font family displays properly in editor
• Font family displays properly in frontend
• Font family request is visible in network tab of chrome dev tools

Browsers

• Chrome

[jeyip]

Non-blocking: This might be a silly question, but would you mind explaining the is_admin() condition here? I thought that we wanted to enqueue all fonts in the site editor? I'm assuming that it's already being done elsewhere.

[creativecoder]

Answering now for posterity (sorry I missed this initially!): this is because the all the fonts are already enqueued in wp-admin views (at least in the editor) by Gutenberg, so there's no need to run this function in that context.