[Fonts API] Print registered fonts for only the Site Editor #50558

hellofromtonya · 2023-05-11T18:38:00Z

Requires PR #50529, which has been merged ✅

Related PR #50558, which was reverted by PR #49863.

STATUS BLOCKED

This PR is currently blocked for merging by #40362. See my explanation here. Once the issue is resolved, then this PR can be merged.

What?

Fixes which fonts get their @font-face styles generated the specific iframe:

Site Editor: uses all registered fonts.
Block Editor: uses all enqueued fonts.

Why?

Outside of the Site Editor, only the enqueued fonts are to be used. Why? To avoid a potential performance impact when a site has one or more plugins or scripts that are registering fonts with the Fonts API.

In the Site Editor, all registered are to be used. Why? To allow users to preview typography choices before selecting and updating the global styles.

How?

Uses $pagenow to identify if the web page is the Site Editor. If yes, then modifies the queue to use the registered fonts and restores the queue after the @font-face styles are generated.

TODO

Add conditional to know if the iframed editor request (i.e. when $handles is true) is coming from the Site Editor.
Rebase after PR [Fonts API] Automatically enqueue user-selected global fonts #50529 merged (for the updated print tests).
Update tests.
Add tests for non-Site Editor iframed requests.

Testing Instructions

Set up

On your test site, activate the TT3 theme and Gutenberg plugin.
Install and activate this test plugin.

Scenario 1: No Google Fonts selected (no user fonts selected)

For this scenario, use the default setup and do not select any typography options in the Site Editor > Styles > Typography UI.

Open a post by going to Posts > and selecting or adding a post.
In your browser, open Dev Tools to the Inspector tab.
Search for wp-fonts-jetpack-google-fonts.
The expected behavior:
- <style id="wp-fonts-jetpack-google-fonts"> should not exist.
- <style id="wp-fonts-local"> should exist (these are the theme's defined fonts).
Then go to the Site Editor, i.e. Appearance > Editor.
Search for wp-fonts-jetpack-google-fonts.
The expected behavior:
- <style id="wp-fonts-jetpack-google-fonts"> should exist.
- <style id="wp-fonts-local"> should exist (these are the theme's defined fonts).

Scenario 2: A Google Font is selected.

Follow the same instructions above to set up the test environment.

Then do the following:

Go to the Site Editor.
Change the typography for all Headings by:
- Open the Styles > Typography > Headings UI.
- For Font, select Playfair Display.
- For Appearance, select Bold Italic.
Select the "Save" button twice, which saves your user selections.
Go to an existing post (or create a new one).
In your browser's dev tools in the Inspector (HTML) tab, search for wp-fonts-jetpack-google-fonts.

Screenshots, screen recording, code snippet

Test Report 1 shows Scenario 1 works as expected ✅

Test Report 2 shows Scenario 2 works as expected ✅

hellofromtonya · 2023-05-22T14:53:13Z

As PR #50529 as been merged, I've rebased and unblocked this PR.

All of the iframed editors require the "done" property to be reset. This commit restores printing in the Post block editor.

hellofromtonya · 2023-05-23T16:19:57Z

Test Report: Scenario 1 - no fonts selected (default set up)

Env:

Browser: Firefox
OS: macOS
PHP: 7.4 and 8.2
Localhost: wp-env
Plugins: Gutenberg and the test plugin
Theme: TT3

Results:

No Google Fonts selected (no user selected fonts from the Site Editor > Styles > Typography UI).

Expectation:
style#wp-fonts-jetpack-google-fonts:

should not be in the HTML when creating or editing a post.
should be in the HTML when in the Site Editor.

Reproduce the issue (before this PR)

Before this PR (using trunk), yes, I can reproduce the issue 🐞

When editing a Post, style#wp-fonts-jetpack-google-fonts is printed into the iframe > html > head. This means all of the registered fonts are printed, rather than only the enqueued fonts. This is the bug reported in #49645 🐞

When in the Site Editor, style#wp-fonts-jetpack-google-fonts is printed into the iframe > html > head ✅

With this PR

After this PR, the bug is fixed ✅

When editing a Post, style#wp-fonts-jetpack-google-fonts is not the HTML ✅

When in the Site Editor, style#wp-fonts-jetpack-google-fonts is printed into the iframe > html > head ✅

Conclusion

This PR resolves the bug reported in #49645 ✅

hellofromtonya · 2023-05-23T16:52:34Z

Test Report: Scenario: A Google Font is selected.

What happens when the user selects a Google Font?

Instructions

Follow the same instructions in the description to set up the test environment.

Then do the following:

Go to the Site Editor.
Change the typography for all Headings by:
- Open the Styles > Typography > Headings UI.
- For Font, select Playfair Display.
- For Appearance, select Bold Italic.
Select the "Save" button twice, which saves your user selections.
Go to an existing post (or create a new one).
In your browser's dev tools in the Inspector (HTML) tab, search for wp-fonts-jetpack-google-fonts.

Expected:

style#wp-fonts-jetpack-google-fonts should be in the HTML.
Only the Playfair Display @font-face styles should be in the <style> (checked by search for each of the font-family properties in the styles).

Results

Reproduce the issue (before this PR)

Before this PR, all of the Google Fonts font-families @font-face styles are in the style#wp-fonts-jetpack-google-fonts. Yes, I can reproduce the issue 🐞 ❌

With this PR

After this PR, the bug is fixed ✅

Only the Playfair Display @font-face styles are in style#wp-fonts-jetpack-google-fonts ✅

HTML for the style#wp-fonts-jetpack-google-fonts

<style id="wp-fonts-jetpack-google-fonts">
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: fallback;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

</style>

Conclusion

This PR resolves the bug reported in #49645 ✅

ironprogrammer · 2023-05-23T21:40:51Z

Test Report

Scenario 1: No Google Fonts selected (no user fonts selected)

Environment

Hardware: MacBook Pro Apple M1 Pro
OS: macOS 13.3.1
Browser: Safari 16.4, Google Chrome 113.0.5672.126
Server: nginx/1.23.4
PHP: 7.4.33
WordPress: 6.3-alpha-55505-src
Theme: twentytwentythree v1.1
Active Plugins:
- webfonts-jetpack-test v1.0.0-ironprogrammer
- gutenberg v15.8.1

Actual Results

In site editor:

✅ <style> tag for #wp-fonts-local does exist.
✅ <style> tag for #wp-fonts-jetpack-google-fonts does exist.

In post editor:

✅ <style> tag for #wp-fonts-local does exist.
✅ <style> tag for #wp-fonts-jetpack-google-fonts does NOT exist.

In frontend template and post:

✅ <style> tag for #wp-fonts-local does exist.
✅ <style> tag for #wp-fonts-jetpack-google-fonts does NOT exist.

Why? To ensure the user-selected fonts are in the queue before any handling of the WP_Fonts properties happens.

cbravobernal · 2023-05-24T10:19:17Z

Hi @hellofromtonya and @ironprogrammer !

I'm releasing Gutenberg 15.9 RC in a few hours, is this PR ready to merge?

Thanks!

hellofromtonya · 2023-05-24T14:31:33Z

I'm releasing Gutenberg 15.9 RC in a few hours, is this PR ready to merge?

@c4rl0sbr4v0 it's not approved yet. Please don't let this PR block 15.9 RC release.

cbravobernal · 2023-05-24T14:57:56Z

it's not approved yet. Please don't let this PR block 15.9 RC release.

I'm planning to make the release in about 6 hours. So feel free to check it if you have time 😄

ironprogrammer · 2023-05-24T17:01:19Z

Test Report

Scenario 2: A Google Font is selected

Environment

Same as for Scenario 1 report above.

Actual Results

In site editor:

✅ <style> tag for #wp-fonts-local does exist.
✅ <style> tag for #wp-fonts-jetpack-google-fonts does exist.

In post editor:

✅ <style> tag for #wp-fonts-local does exist.
✅ <style> tag for #wp-fonts-jetpack-google-fonts does exist, and contains only the user-selected font(s).

In frontend template and post:

✅ <style> tag for #wp-fonts-local does exist.
✅ <style> tag for #wp-fonts-jetpack-google-fonts does exist, and contains only the user-selected font(s).

Supplemental Artifacts

Where to set global typography styles in the site editor:

ironprogrammer

Looks good! I've provided a couple of non-blocking comment suggestions for the updated tests to clarify the expected behavior.

ironprogrammer · 2023-05-24T17:41:30Z

phpunit/fonts-api/wpPrintFonts-test.php

+	}
+
+	/**
+	 * @dataProvider data_should_print_enqueued_fonts_for_non_site_editor


Suggested change

* @dataProvider data_should_print_enqueued_fonts_for_non_site_editor

* Enqueued fonts should be printed, but not other unused registered fonts.

*

* @dataProvider data_should_print_enqueued_fonts_for_non_site_editor

Same here.

How about this instead?

test_should_print_only_enqueued_font_when_not_in_site_editor

This name follows the suggestion above and adds "only" to emphasize that only "enqueued" fonts are printed.

@ironprogrammer what do you think?

ironprogrammer · 2023-05-24T17:43:35Z

phpunit/fonts-api/wpPrintFonts-test.php

@@ -113,13 +120,21 @@ public function test_should_print_handles_when_not_enqueued( $setup, $expected_d
 	}

 	/**
-	 * @dataProvider data_should_print_all_registered_fonts_for_iframed_editor
+	 * @dataProvider data_should_print_registered_fonts_for_site_editor


Suggested change

* @dataProvider data_should_print_registered_fonts_for_site_editor

* All registered fonts should be printed in the site editor.

*

* @dataProvider data_should_print_registered_fonts_for_site_editor

I think this description is redundant to the test method's name. What if the test method's name is improved to make it more clear, such as:

test_should_print_all_registered_fonts_when_in_the_site_editor

In this way, the test method's name clearly describes what should happen when in this state. That better aligns to documenting and name in Core's test suite.

@ironprogrammer what do you think?

hellofromtonya · 2023-05-24T18:22:52Z

I've removed this PR from 15.9 milestone.

Why?
This PR is ready for merge. BUT I think a resolution needs to happen first for the issue of only exposing enqueued fonts to block level typography pickers #40362.

Why?
To prevent breakages on sites.

How so?
Sites are currently running with this experimental API (for example on wp . com). If users are selecting font families at the block level and any of those selections were not already selected at the global fonts level (i.e. through the Site Editor > Styles > Typography UI), then those fonts will not render correctly in the post / page editors.

Why?
Before this PR, all registered fonts are being printed in post / page editors. After this PR, only enqueued fonts will be printed. In testing with Jetpack's Google Fonts package, font-families selected at the block level that are not also selected at the global site level for all types (i.e. through the Site Editor > Styles > Typography UI) do not get printed post / page editors. Rather, that package relies on the Fonts API printing all registered fonts when in an iframed editor.

So for now, I'll mark this PR as blocked by #40362.

hellofromtonya · 2023-06-20T22:04:45Z

As noted in the issue, this PR is no longer required for the Fonts API. Reasoning is shared here #49645 (comment).

hellofromtonya requested a review from spacedmonkey as a code owner May 11, 2023 18:38

hellofromtonya requested review from aristath and anton-vlasenko and removed request for spacedmonkey May 11, 2023 18:38

hellofromtonya added [Type] Bug An existing feature does not function as intended [Status] Blocked Used to indicate that a current effort isn't able to move forward [Feature] Fonts API labels May 11, 2023

hellofromtonya self-assigned this May 11, 2023

hellofromtonya marked this pull request as draft May 11, 2023 18:44

hellofromtonya force-pushed the fix/registered-fonts-for-site-editor-only branch from bef4a5b to 33363b2 Compare May 22, 2023 14:48

hellofromtonya removed the [Status] Blocked Used to indicate that a current effort isn't able to move forward label May 22, 2023

hellofromtonya marked this pull request as ready for review May 22, 2023 14:53

hellofromtonya requested a review from ironprogrammer May 22, 2023 14:53

hellofromtonya force-pushed the fix/registered-fonts-for-site-editor-only branch from d5fb02b to 096817f Compare May 22, 2023 15:12

WordPress deleted a comment from github-actions bot May 22, 2023

Registered fonts for Site Editor

84091a2

hellofromtonya force-pushed the fix/registered-fonts-for-site-editor-only branch from 096817f to 84091a2 Compare May 22, 2023 16:05

WordPress deleted a comment from github-actions bot May 22, 2023

Reset done for all iframed editors.

1425ddd

All of the iframed editors require the "done" property to be reset. This commit restores printing in the Post block editor.

WordPress deleted a comment from github-actions bot May 23, 2023

hellofromtonya added this to the Gutenberg 15.9 milestone May 23, 2023

Do user selected fonts before iframed editor set up.

e22dd10

Why? To ensure the user-selected fonts are in the queue before any handling of the WP_Fonts properties happens.

ironprogrammer approved these changes May 24, 2023

View reviewed changes

ironprogrammer self-requested a review May 24, 2023 17:49

ironprogrammer approved these changes May 24, 2023

View reviewed changes

hellofromtonya removed this from the Gutenberg 15.9 milestone May 24, 2023

hellofromtonya added the [Status] Blocked Used to indicate that a current effort isn't able to move forward label May 24, 2023

hellofromtonya mentioned this pull request May 24, 2023

[Fonts API] All registered fonts are being rendered outside of the Site Editor #49645

Closed

hellofromtonya closed this Jun 20, 2023

hellofromtonya deleted the fix/registered-fonts-for-site-editor-only branch June 20, 2023 22:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fonts API] Print registered fonts for only the Site Editor #50558

[Fonts API] Print registered fonts for only the Site Editor #50558

hellofromtonya commented May 11, 2023 •

edited

Loading

hellofromtonya commented May 22, 2023

hellofromtonya commented May 23, 2023 •

edited

Loading

hellofromtonya commented May 23, 2023 •

edited

Loading

ironprogrammer commented May 23, 2023

cbravobernal commented May 24, 2023

hellofromtonya commented May 24, 2023

cbravobernal commented May 24, 2023

ironprogrammer commented May 24, 2023

ironprogrammer left a comment

ironprogrammer May 24, 2023

hellofromtonya May 24, 2023

ironprogrammer May 24, 2023

hellofromtonya May 24, 2023

hellofromtonya commented May 24, 2023

hellofromtonya commented Jun 20, 2023

[Fonts API] Print registered fonts for only the Site Editor #50558

[Fonts API] Print registered fonts for only the Site Editor #50558

Conversation

hellofromtonya commented May 11, 2023 • edited Loading

STATUS BLOCKED

What?

Why?

How?

TODO

Testing Instructions

Set up

Scenario 1: No Google Fonts selected (no user fonts selected)

Scenario 2: A Google Font is selected.

Screenshots, screen recording, code snippet

hellofromtonya commented May 22, 2023

hellofromtonya commented May 23, 2023 • edited Loading

Test Report: Scenario 1 - no fonts selected (default set up)

Results:

Reproduce the issue (before this PR)

With this PR

Conclusion

hellofromtonya commented May 23, 2023 • edited Loading

Test Report: Scenario: A Google Font is selected.

Instructions

Results

Reproduce the issue (before this PR)

With this PR

Conclusion

ironprogrammer commented May 23, 2023

Test Report

Environment

Actual Results

cbravobernal commented May 24, 2023

hellofromtonya commented May 24, 2023

cbravobernal commented May 24, 2023

ironprogrammer commented May 24, 2023

Test Report

Environment

Actual Results

Supplemental Artifacts

ironprogrammer left a comment

Choose a reason for hiding this comment

ironprogrammer May 24, 2023

Choose a reason for hiding this comment

hellofromtonya May 24, 2023

Choose a reason for hiding this comment

ironprogrammer May 24, 2023

Choose a reason for hiding this comment

hellofromtonya May 24, 2023

Choose a reason for hiding this comment

hellofromtonya commented May 24, 2023

hellofromtonya commented Jun 20, 2023

hellofromtonya commented May 11, 2023 •

edited

Loading

hellofromtonya commented May 23, 2023 •

edited

Loading

hellofromtonya commented May 23, 2023 •

edited

Loading