Fonts API: Add missing files to lib/load.php #48108

hellofromtonya · 2023-02-15T18:31:36Z

What?

Load all of the deprecated files into memory.

Why?

To avoid fatal errors for sites that are actively using the non-deprecated architecture, i.e. before the API was renamed and redesigned.

How?

Add each file in lib/experimental/fonts-api/deprecations/ to the lib/load.php file.

Testing Instructions

Step 1: Activate the Twenty Twenty-Three theme.
Step 2: Activate the Gutenberg plugin.
Step 3: Upload this plugin file and then activate it.
fonts-api-bc-tester.zip
Step 4: 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
Step 5: Select a Playflair Display font for the headings. In the Google Styles UI
- Select Typography.
- Select Headings.
- In FONT select Playflair Display (a Google Font).
- In APPEARANCE, select Bold Italic. (Notice the heading should change)
- Click on the "Save" button.
Step 6: Examine the dynamically generated @font-face stylings in the admin area by:
- Open Dev Tools in your favorite browser
- Search for wp-fonts-fonts-tester (which is in the <head>)
- Expand the <style> element to inspect the CSS
- The CSS should be:

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

Step 7: Examine the front-end by:
- Go to the front-end of the website
- Open Dev Tools in your favorite browser
- Search for wp-fonts-fonts-tester
- Expand the <style> element to inspect the CSS
- The CSS should be the same as above.

github-actions · 2023-02-15T18:59:22Z

Flaky tests detected in 046fe87.
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/4187175706
📝 Reported issues:

[Flaky Test] should leave a scheduled page scheduled if canceled #47499 in specs/editor/various/switch-to-draft.test.js
[Flaky Test] should make the modal content focusable when it is scrollable #48067 in /test/e2e/specs/editor/various/a11y.spec.js
[Flaky Test] should revert a scheduled page to a draft if confirmed #47500 in specs/editor/various/switch-to-draft.test.js

fullofcaffeine · 2023-02-15T19:33:05Z

Followed the test instructions, and tests well. I haven't verified the whole CSS, but the style element is present, and it starts with the @font-face for the Arvo font.

fullofcaffeine · 2023-02-15T19:36:08Z

Tested again with the newly updated instructions. Seems to work fine. CSS in the backend and front is: https://gist.github.com/fullofcaffeine/9037402cd58f65cd29b9637df686cde2

fullofcaffeine

LGTM

anton-vlasenko · 2023-02-15T19:46:47Z

When I examine the font-face stylings in the admin area and on FE, I get this (the order of the fonts is different). But, probably, that shouldn't affect anything.

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

Update: I've followed the test steps and everything works as described except for the order of font-face stylings. I don't know if that's important.

hellofromtonya · 2023-02-15T19:58:47Z

Notes: The problem is not in the Google Fonts plugin. It's in a custom implementation that is using WP_Webfonts_Provider_Local. Let me see if I can create a test plugin to simulate it.

hellofromtonya · 2023-02-15T20:40:48Z

@fullofcaffeine @anton-vlasenko @ironprogrammer The root of the problem is that a custom implementation is using WP_Webfonts_Provider_Local. I created a tester plugin that also uses that class. The tester instructions are updated in the description along with the zip of that plugin.

Can you please retest?

ironprogrammer · 2023-02-15T20:46:06Z

Thanks for the patch, @hellofromtonya 🙌🏻

Test Report

Environment

Hardware: MacBook Pro Apple M1 Pro
OS: macOS 12.6.3
Browser: Safari 16.3
Server: nginx/1.23.3
PHP: 7.4.33
WordPress: 6.2-beta2-55340-src
CLI: WP-CLI 2.7.1
Theme: twentytwentythree v1.0
Active Plugins:
- debug-bar v1.1.4
- gutenberg v15.2.0-rc.1
- health-check v1.5.1
- webfonts v1.0.0 (the test plugin provided here with the modification indicated below)

Actual Results

✅ Fonts provided with the TT3 theme, emitted in the markup's <style> element #wp-fonts-local, are consistent when Global Styles are modified.
✅ Fonts provided through the test plugin are selectable in the editor, emitted in the markup's <style> element #wp-fonts-jetpack-google-fonts, and display on the frontend with the assigned custom font face.
✅ Referencing the deprecated class WP_Webfonts_Provider_Local in the test plugin no longer throws a fatal error, and logs the following: PHP Deprecated: Function WP_Webfonts_Provider_Local::__construct is <strong>deprecated</strong> since version GB 15.1! Use WP_Fonts_Provider_Local instead.

Additional Notes

To simulate the fatal error originally reported, the following was added to line 33 of the test plugin file:

$webfonts_provider = new WP_Webfonts_Provider_Local();

hellofromtonya · 2023-02-15T21:02:19Z

Test Report

Env:

OS: macOS
Browser: Firefox, Edge, and Chrome
WordPress: 6.1.1
Theme: TT3
Active Plugins:
- Gutenberg: 15.1.0
- Fonts API BC Layer Tester: 1.0.0

Test Results

Before applying this PR

Upon activating the tester plugin, got a fatal error:

 Fatal error: Class 'WP_Webfonts_Provider_Local' not found in ../wp-content/plugins/fonts-api-bc-tester/class-fonts-provider.php on line 6

Yes, can reproduce the issue.

After applying this PR

Able to activate the tester plugin ✅
Following the test instructions:
- Yes, <style id="wp-fonts-fonts-tester"> is in the HTML ✅

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

* Yes, the headings render properly to [`Playflair Display` font](https://fonts.google.com/specimen/Playfair+Display?query=Play) ✅

Works as expected ✅

* Add missing files to lib/load.php` * Guard loading the experimental files

Add missing files to lib/load.php`

ac880af

hellofromtonya requested a review from spacedmonkey as a code owner February 15, 2023 18:31

hellofromtonya self-assigned this Feb 15, 2023

hellofromtonya requested a review from fullofcaffeine February 15, 2023 18:51

Guard loading the experimental files

046fe87

fullofcaffeine approved these changes Feb 15, 2023

View reviewed changes

hellofromtonya merged commit 729efaa into trunk Feb 15, 2023

hellofromtonya deleted the fix/fonts-api/load-all-deprecated-files branch February 15, 2023 21:03

github-actions bot added this to the Gutenberg 15.3 milestone Feb 15, 2023

DaisyOlsen added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Feb 15, 2023

hellofromtonya added the Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release label Feb 15, 2023

hellofromtonya modified the milestones: Gutenberg 15.3, Gutenberg 15.2 Feb 15, 2023

fullofcaffeine pushed a commit that referenced this pull request Feb 15, 2023

Fonts API: Load missing deprecated files (#48108)

be54431

* Add missing files to lib/load.php` * Guard loading the experimental files

fullofcaffeine modified the milestones: Gutenberg 15.2, Gutenberg 15.1 Feb 15, 2023

DaisyOlsen pushed a commit that referenced this pull request Feb 16, 2023

Fonts API: Load missing deprecated files (#48108)

25c3acf

* Add missing files to lib/load.php` * Guard loading the experimental files

DaisyOlsen modified the milestones: Gutenberg 15.1, Gutenberg 15.2 Feb 16, 2023

DaisyOlsen added [Type] Bug An existing feature does not function as intended [Feature] Webfonts labels Feb 16, 2023

DaisyOlsen removed Backport to Gutenberg Minor Release Pull request that needs to be backported to a Gutenberg minor release Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) labels Feb 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fonts API: Add missing files to lib/load.php #48108

Fonts API: Add missing files to lib/load.php #48108

hellofromtonya commented Feb 15, 2023 •

edited

Loading

github-actions bot commented Feb 15, 2023 •

edited

Loading

fullofcaffeine commented Feb 15, 2023

fullofcaffeine commented Feb 15, 2023 •

edited

Loading

fullofcaffeine left a comment

anton-vlasenko commented Feb 15, 2023 •

edited

Loading

hellofromtonya commented Feb 15, 2023

hellofromtonya commented Feb 15, 2023

ironprogrammer commented Feb 15, 2023

hellofromtonya commented Feb 15, 2023

Fonts API: Add missing files to lib/load.php #48108

Fonts API: Add missing files to lib/load.php #48108

Conversation

hellofromtonya commented Feb 15, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

github-actions bot commented Feb 15, 2023 • edited Loading

fullofcaffeine commented Feb 15, 2023

fullofcaffeine commented Feb 15, 2023 • edited Loading

fullofcaffeine left a comment

Choose a reason for hiding this comment

anton-vlasenko commented Feb 15, 2023 • edited Loading

hellofromtonya commented Feb 15, 2023

hellofromtonya commented Feb 15, 2023

ironprogrammer commented Feb 15, 2023

Test Report

Environment

Actual Results

Additional Notes

hellofromtonya commented Feb 15, 2023

Test Report

Env:

Test Results

Before applying this PR

After applying this PR

hellofromtonya commented Feb 15, 2023 •

edited

Loading

github-actions bot commented Feb 15, 2023 •

edited

Loading

fullofcaffeine commented Feb 15, 2023 •

edited

Loading

anton-vlasenko commented Feb 15, 2023 •

edited

Loading