[Fonts API] Separate BC Layer

[hellofromtonya]

Fixes #50073

What?

The goal is to separate the BC Layer from the Core intended Fonts API code.

With this PR, the BC Layer remains fully functional by invoking the Fonts API's functionality but without making the Fonts API dependent upon the BC Layer.

Why?

To prepare the API for Core introduction. Why? The BC Layer is Gutenberg specific and will not be merged into Core. Currently this layer is intermingled within the API's code.

How?

• Adds tests for the BC Layer to ensure functionality continues to work as it did prior to this PR.
• Removes WP_Webfonts from the WP_Fonts inheritance.
• Changes wp_webfonts() back to instantiating WP_Webfonts() but injects wp_fonts() into it for reuse.
• Moves the deprecated array structure migration code from wp_register_fonts() to wp_register_webfonts().
• Renames the deprecations folder to bc-layer for readability and better alignment to its purpose.

Originally, WP_Webfonts was in the inheritance chain to ensure its public functionality kept working for extenders who may be invoking them. For example, Jetpack's Google Fonts Provider package < v0.5.0 uses wp_webfonts() and WP_Webfonts::get_registered_webfonts().

Testing Instructions

Automated Tests

Manually Testing

The key to testing is to compare before and after this PR with emphasis on:

• Does the typography visually looks the same before and after?
• Are the @font-face styles in the iframed editor and front-end HTML?

Set up:

1. On your test site, install and activate these 2 plugins:
   • Fonts API Tester using Jetpack's Google Fonts composer package - installation instructions are found in the plugins' README.md page.
   • BC Layer Tester plugin
2. A modification is needed in the Fonts API Tester's plugin code. Open its root PHP file in your fav code editor. Comment out the 'Poppins' font in the JETPACK_GOOGLE_FONTS_LIST constant. Why? This is the font used in the BC Layer test plugin.
3. Activate the Gutenberg plugin from this branch.
4. Activate the TT3 theme.

Testing Instructions:

1. Go to the Site Editor > Styles > Typography.
2. For headings, select Playfair Display font and set Appearance to Bold Italic. Expected behavior: headings typography should change to look like
3. For text, select Poppins font and set the Appearance to Regular. Expected behavior: the paragraph typography should change to look like.
4. Save the styles.
5. Go to the front-end. Do the styles above match?
6. Go to Posts. Open an existing post. Do the styles match?

HTML testing:
The following style tags should exist:

<style id="wp-fonts-local">
<style id="wp-fonts-bc-layer">
<style id="wp-fonts-jetpack-google-fonts">

The BC Layer style should be like this:

<style id="wp-fonts-bc-layer">
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:fallback;src:local(Poppins), url('/wp-content/plugins/fonts-api-bc-layer-tester/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');}@font-face{font-family:Poppins;font-style:italic;font-weight:100 900;font-display:fallback;src:local(Poppins), url('/wp-content/plugins/fonts-api-bc-layer-tester/assets/fonts/Poppins/Poppins-Italic.ttf') format('truetype');}
</style>

1. Open your browser's dev tools to inspect the HTML.
2. On the front-end, search for the style elements. Are all 3 there?
3. Go to the Site Editor. Again search for the style elements. Are all 3 there? (They should be in the <iframe>.)
4. Go to Posts. Open an existing post. Again search for the style elements. Are all 3 there?

Screenshots

In the Site Editor

On the front-end

In a Post

[anton-vlasenko]

I've done an initial code review.
Please see my questions below.
Thank you.

[anton-vlasenko]

I have tried to test this PR, but I am encountering some issues.
Specifically, the fonts displayed on the frontend do not match those displayed when editing a page in Gutenberg, as can be seen in the screenshot below:

I'm unable to locate a Regular Normal variation for the Poppins font. While there is a Regular style available, there does not seem to be a Regular Normal variant.
I will try to test again when I reinstall my local WordPress copy (just to rule out that this could be related to my local environment).

[hellofromtonya]

I'm unable to locate a Regular Normal variation for the Poppins font. While there is a Regular style available, there does not seem to be a Regular Normal variant.

Oh sorry about that @anton-vlasenko. I've updated the testing setup instructions. Yes, set its Appearance to Regular.

[hellofromtonya]

I have tried to test this PR, but I am encountering some issues.
Specifically, the fonts displayed on the frontend do not match those displayed when editing a page in Gutenberg...

Hmm interesting. Let me run through the testing setup and instructions to double check my findings, i.e. just in case there's something wrong there. I'll report back shortly.

[hellofromtonya]

I retested. It worked on my local setup as I fixed the bug in the Jetpack Google Fonts package (see below).

Env:

• WordPress: 6.2
• Gutenberg: this PR's branch
• Theme: TT3
• Plugins: Gutenberg and the 2 tester plugins for this PR
• Browser: Firefox

@anton-vlasenko I think the paragraph text is right, i.e. using Poppins. But looks like the Playfair Display is not enqueued. There's a bug in the Jetpack Google Fonts package Util::is_font_family_registered() where for the new API it should be using wp_fonts() and not wp_webfonts(). Whoopsie.

Before this PR, calling wp_webfonts() invoked wp_fonts(). Now it doesn't. So that means, need to add the get_registered_font_families() method to WP_Webfonts to maintain BC.

This commit should make the Google Fonts work again. Retesting now. Can you test too please?

[anton-vlasenko]

Thanks, @hellofromtonya.
I retested it using a clean installation of WordPress/Gutenberg and the test plugins.

I think the paragraph text is right, i.e. using Poppins. But looks like the Playfair Display is not enqueued.

I agree with you about the paragraph text, my apologies for the confusion.

dfad50f fixed the issue for me, and now the headings are displayed with the correct font.

[hellofromtonya]

Retested with the latest and it works! Rather than using my fixed version of the Google Fonts package, I cloned @ironprogrammer's plugin. Using the updated PR with the fix, it works as expected.

Excellent catch @anton-vlasenko 👏

The issue was:
Bug in the Jetpack Google Fonts package in its Utils::is_font_family_registered() method as it's using wp_webfonts() instead of wp_fonts(). That code worked previously because wp_webfonts() called wp_fonts(). With this PR, the BC Layer is separated. So this PR breaks the Google Fonts package's enqueuing.

It required a polyfill in the BC Layer to ensure sites keeping working once this PR get merged and ships.

The bug in Jetpack needs to be fixed in its repo. But to maintain BC (and avoid sites from breaking until it's fixed in that package), I've added a polyfill: get_registered_font_families() method to WP_Webfonts in this commit. That package's enqueuing is restored.

Note: Once automatic enqueuing of user-selected fonts is merged into the API, this area of code in the Google Fonts package is no longer needed. This is why I haven't yet opened an issue in Jetpack to fix this bug.

[anton-vlasenko]

The issue was:

Thank you explaining that to me, @hellofromtonya.
I appreciate it.

[anton-vlasenko]

I've tested this PR and it worked as described (after applying dfad50f).
The code also looks good to me.
Therefore, I approve this PR.