Add new i18n fonts and rename them via filter

[simison]

Adding new fonts for better global support.

An alternative to #27751

Related to adding & deprecating other fonts: #27441

See design discussion p9Jlb4-5Dj-p2

Changes proposed in this Pull Request:

• Adds a way to filter Global Styles to provide different name from "font family". Google fonts expects Noto Sans fonts to be requested with font family such as "Noto Serif TC" instead of "Noto Serif (Traditional Chinese)". wp_register_webfonts() does not support passing the name, although Global Style Schema does support the name and it thus works in the UI once provided via filter. Once the support for "name" is added, we can go via simpler approach implemented in Add fonts for better i18n #27751 instead.

• Moves font list to a getter function to be able to:

  • Translate new font names
  • Filter the list for both functions where the list is now used

• Adds new fonts at the end of the fonts list:

  'Alexandria'           => 'Alexandria (Arabic)',
  'IBM Plex Sans Arabic' => 'IBM Plex Sans (Arabic)',
  'Noto Sans Hebrew'     => 'Noto Sans (Hebrew)',
  'Noto Sans HK'         => 'Noto Sans (Hong Kong)',
  'Noto Sans JP'         => 'Noto Sans (Japanese)',
  'Noto Sans KR'         => 'Noto Sans (Korean)',
  'Noto Sans SC'         => 'Noto Sans (Simplified Chinese)',
  'Noto Sans TC'         => 'Noto Sans (Traditional Chinese)',
  'Noto Sans Telugu'     => 'Noto Sans (Telugu)',
  'Noto Serif Hebrew'    => 'Noto Serif (Hebrew)',
  'Noto Serif HK'        => 'Noto Serif (Hong Kong)',
  'Noto Serif JP'        => 'Noto Serif (Japanese)',
  'Noto Serif KR'        => 'Noto Serif (Korean)',
  'Noto Serif SC'        => 'Noto Serif (Simplified Chinese)',
  'Noto Serif TC'        => 'Noto Serif (Traditional Chinese)',
  

Mukta, which is present in the screenshot above, is missing from the list since it wasn't available at Google Fonts.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?

Jetpack product discussion

p9Jlb4-5Dj-p2

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

Nope.

Testing instructions:

• Test using non-blockbase theme (including child themes) because blockbase disables Jetpack fonts. Alternatively test using the upcoming change in blockbase.

• Ensure "Google fonts" module is enabled when testing with standalone Jetpack. At .com it is enabled already.

• Go to Appearance → Editor → Press "edit" on newer Gutenberg.

• Navigate to Styles panel and change fonts for the text or headings. See all the fonts in the dropdown:

  

• Have some Japanese, Arabic, Chinese etc texts to test with and observe how specific fonts support these scripts beautifully.

  

• Note also difference between Noto Sans and Noto Serif in the language you're testing, here's Japanese:

  

• Ensure frontend of the site works, too.

• Observe how values are different from the actual names in the dropdown list:
  

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run bin/jetpack-downloader test jetpack update/fonts-i18n-filter to get started. More details: p9dueE-5Nn-p2

[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: January 3, 2023.
• Scheduled code freeze: December 26, 2022.

[obenland]

The font dropdown doesn't show the translated font names for me with either Twenty Twenty-Two or Twenty-Three. Is there a theme that has these Noto Sans variants in its theme.json that I should be testing with?

addressed

[simison]

@Automattic/i18n Any difference to do above or use sprintf:

$renamed_fonts = array(
    'Alexandria'           => sprintf( _x( '%s (Arabic)', 'Font name (font script)', 'jetpack' ), 'Alexandria'),
    'IBM Plex Sans Arabic' => sprintf( _x( '%s (Arabic)', 'Font name (font script)', 'jetpack' ), 'IBM Plex Sans'),
    'Noto Sans Hebrew'     => sprintf( _x( '%s (Hebrew)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Sans HK'         => sprintf( _x( '%s (Hong Kong)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Sans JP'         => sprintf( _x( '%s (Japanese)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Sans KR'         => sprintf( _x( '%s (Korean)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Sans SC'         => sprintf( _x( '%s (Simplified Chinese)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Sans TC'         => sprintf( _x( '%s (Traditional Chinese)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Sans Telugu'     => sprintf( _x( '%s (Telugu)', 'Font name (font script)', 'jetpack' ), 'Noto Sans'),
    'Noto Serif Hebrew'    => sprintf( _x( '%s (Hebrew)', 'Font name (font script)', 'jetpack' ), 'Noto Serif'),
    'Noto Serif HK'        => sprintf( _x( '%s (Hong Kong)', 'Font name (font script)', 'jetpack' ), 'Noto Serif'),
    'Noto Serif JP'        => sprintf( _x( '%s (Japanese)', 'Font name (font script)', 'jetpack' ), 'Noto Serif'),
    'Noto Serif KR'        => sprintf( _x( '%s (Korean)', 'Font name (font script)', 'jetpack' ), 'Noto Serif'),
    'Noto Serif SC'        => sprintf( _x( '%s (Simplified Chinese)', 'Font name (font script)', 'jetpack' ), 'Noto Serif'),
    'Noto Serif TC'        => sprintf( _x( '%s (Traditional Chinese)', 'Font name (font script)', 'jetpack' ), 'Noto Serif'),
);

[dlind1]

The current approach (without sprintf) should be better for localization and would allow translating the font name in some locales.

[simison]

I don't think the font name itself ever needs translating, only the part in brackets. Could be wrong tho!

[dlind1]

While some Wiki articles translate the 'Noto' family (Arabic, Korean), the actual font name is displayed in English and most of translated versions of Google Fonts FAQ also use the English name for the font. The ones which do translate Noto (Hindi and Bengali) are not part of Mag-16 and have low translation rates on WordPress.com and Jetpack.

It should be safe to have the font names wrapped in translate calls and let the translators handle it, but since all of Mag-16 don't translate them and keeping it separate would allow to easily update the fonts, the sprintf approach looks better.

[simison]

Thanks!

Used sprintf instead in 42ff3e8

Less work for translators and end result will be equally good, methinks.

[obenland]

Do all block themes have all of these keys defined? If not it might make sense to return early if an isset() returns false.

[obenland]

Will JETPACK_GOOGLE_FONTS_LIST be part of $font_families? Or is $font_families the static representation of that theme json data?

[simison]

They are always defined because before this filter we registered the fonts, and they end up to theme style object when registered with with wp_register_webfonts() — even from a plugin. A bit confusing. :-)

That said, something that could in theory happen is that all Jetpack fonts or typography settings get filtered out or shortcirquitted by some plugin or theme. The shape of the data could also change later on in Gutenberg. $theme_json->update_with() takes care of versioning later on but here we don't have that safeguard. I'll add a check!

[simison]

I added a few checks;

• tests if array keys exist
• Skip renaming entirely for non wp-admin/rest API requests.

[obenland]

I have a hard time testing this one, the fonts don't show up for me in the site editor.
Neither syncing it to my sandbox (Stewart theme) nor checking out the branch with Jetpack Beta on a WoA site (Russell theme) worked.

Is there an additional step I should take?

[simison]

checking out the branch with Jetpack Beta on a WoA site (Russell theme) worked.

@obenland Ah, sorry I think I didn't clarify this; you need to test using non-blockbase theme, including its child themes like Russell. Blockbase disables Jetpack fonts
so none of this works with Blockbase on Jetpack nor on WP.com for now. until that is changed, hopefully soon.

Stewart on .com should work though, so I'll double check what's up with that. Stewart on Jetpack site seems to work.

[simison]

Stewart on .com should work though, so I'll double check what's up with that. Stewart on Jetpack site seems to work.

@obenland The PR with Stewart theme and other themes do work on .com for me. Not quite sure what you're missing. Double sure you are sandboxed and applied the right branch? #27854 (comment)

Maybe you also have luck replicaing the issue in this PR which I cannot. :-D

Feel free to invite me to a test site where the issue is, might be able to find the problem that way.

[obenland]

I'll take another look today!

[obenland]

Yeah I don't know what's going on. This is my sandbox output: 2e8e4-pb/#plain

Twenty Twenty Two

Twenty Twenty Three

Stewart

What are themes it should work with on Simple?

[simison]

Even the regular set of fonts doesn't appear for you on simple sites. 😱 TT* themes are great for testing this. Let's take convo out of PR to have a deeper look.

[jeherve]

This looks good and works well for me, on a WoA site as well as on a WordPress.com simple site.

I've updated the branch so it can be ready to merge whenever you're ready.