Gutenboarding: i18n

[johnHackworth]

Gutenboarding should fully support a localized experience. MT: pbAok1-dn-p2

Tasks

Wip:

• Creating a site with the name "테스트" works after D54000-code but we need to replicate Onboarding: Don't use site title as default domain query if it'll just error #48031 for the launch flow in ETK as it also auto searches the blog name resulting in an instant error. Prevent instant error on domain step during editor launch flow #48399

Todo:

Backlog:

Other teams:

• Add new font pairings for non latin locales Gutenboarding: font pairings need to support non-latin #43002
• [low priority] Gutenboarding: Load user provided translations Gutenboarding: Load user provided translations #39493
• [low priority] Propagate locale slug through all log in flows: Login: Fix locale propagation #23126
• Localize support URL in launch flow summary step (localizeUrl( 'https://wordpress.com/help/contact' )) (Logged in users will see a translated page, this is for logged out) New Onboarding: Localize help contact url in Step-by-step launch flow #47947 - blocked, see: Support contact urls need better localization support #48033
• Switch language picker on by setting gutenboarding/language-picker config entry to true or removing flag altogether. Relies on Use LanguagePicker in Calypso #46328 (not a blocker because we're releasing to existing users first)

Done:

• Try using mshots for fetching vertically oriented screenshots in Gutenboarding (Replace design screenshots with mShots in New Onboarding #43428)
• Not all copy is updated when user switches languages Onboarding: Not all copy is updated when user switches languages #48196 Onboarding: Onboarding related packages use react-i18n to translate copy #48232
• Provide default blog name for /sites/new when providing non latin site titles. Skip domain step without providing ascii characters currently results in a "something went wrong" error on site creation. D54000-code
• some copy isn't being queued for translation in ETK Onboarding: some copy isn't appearing in the list of strings to be translated #47884
• Error handling for domain suggestions and non-Latin chars pbAok1-dn-p2#comment-3227 Onboarding: Don't use site title as default domain query if it'll just error #48031
• Non-latin character set handling for domain search: Don't auto search non-latin characters using the site name Onboarding: Don't use site title as default domain query if it'll just error #48031
• Non-latin character set handling for domain search: Improve error handling by removing note about potential connection errors. (i.e. split the error conditions apart so the error message doesn't tell the user to refresh the page for a validation error) Use the standard <Notice> component for showing onboarding errors #47985
• Gutenboarding: Localize support URL for HSTS required tooltip in domain suggestions Localize Support URL for HSTS Tooltip in Domain Picker #45610 🚧 🚧 🚧 DomainPicker: localize support url via i18nLocale from @automattic/react-i18n #46670 Move localizeUrl to new i18n-utils package #46998 Revert calypso localizeUrl's move to i18n-utils package #47564 Update/i18n utils unreverted #47492 Update Gutenboarding to use new <LocaleProvider> #47567 Replace i18n-calypso usage in i18n-utils with LocaleProvider #47570 Replace localizeUrl with packages/i18n-utils  #47612 Use LocaleProvider in calypso #47613
• illustration on domain step doesn't work on RTL languages Gutenboarding: illustration on domain step doesn't work on RTL languages #47490 Onboarding: Flip the domain picker illustration in RTL languages #47891
• should progress bars be filled from right-to-left? Onboarding: site creation progress goes from right-to-left when locale is RTL #47886
• domain picker shows domain components in the wrong order in RTL locale Onboarding: domain picker shows domain components in the wrong order in RTL locale #47885 Onboarding: Add RTL support to domain picker #47889
• Plan details are showing up untranslated (intermittent), there is a timing issue where we request /plans/details without a locale and with a locale around the same time, depending which one comes back first changes the outcomes, page: /new/features Onboarding: fix the plans correct language displaying in the plans grid #47611
• Update Editing Toolkit to ensure the correct locale is passed to the plans/details API endpoint in the launch flow plans step as mentioned here: Gutenboarding: Switch plans grid to use plans/detail endpoint to fetch plans details via API #46588 (comment) Gutenboarding: plans grid requests data in the correct locale #47227
• Move localizeUrl to a package (probably i18n-calypso) Depends on Move language data to a package Move localizeUrl to new i18n-utils package #46998
• Localize domain suggestion shown in launch flow summary Gutenboarding launch flow: add domain suggestion to summary step #44840 (comment) Gutenboarding i18n: i18n for domain picker in the launch flow #47178
• Move language data to a package Replace client/languages with packages/languages #46709
• Ensure that the WPCOM Nux modal slides are translated Editing Toolkit: set translations for NUX modal #47136
• Ensure code shipped from ./packages (without text-domain) works when shipped in Editor kit plugin (with text-domain). context: pbAok1-1Ao-p2 Part of Add text domain to copy in domain-picker and plans-grid packages #46557 ?
• Use translated plan feature lists either from lib/plans or API (code) in progress in Gutenboarding: Switch plans grid to use plans/detail endpoint to fetch plans details via API #46588, endpoint deployed in D51380-code and D51895-code
• Extract Gutenboarding language picker into @automattic/language-picker Extract Gutenboarding language picker into @automattic/language-picker #46020
• Update style preview to generate template/demo endpoint url using current locale instead of path param Update Gutenboarding style preview to use i18nLocale instead of path language param #46793
• Get translated strings before rendering the page to avoid the current flicker of EN text at first load. (Gutenboarding: Load translations before render #46473)
• Add plans/details endpoint (D51380-code)
• RTL stylesheets Gutenboarding: RTL Support #39592
• Ensure Recoleta font works with all symbols of the language (Typography: explore smarter ways to trigger fallback typefaces for non-latin characters/languages #42522, Typography: NPM package to add support for Recoleta #42814)
• Gutenboarding: Set lang/dir in browser Gutenboarding: Set lang/dir in browser #39491 (Think this one is now redundant See comment)
• [?check if done] localize templates API
• Finalize switching site locale in the flow from header by shipping it Gutenboarding: add site language switcher #40011
• Implement switching site locale in the flow from header Gutenboarding: add site language switcher #40011
• Localise domain prices Gutenboarding: Domain prices should display in the correct locale #40733
• Ensure domain categories come translated from the API (Gutenboarding: Use domain categories from API. #41450)
• Ensure we translate plan names consistently Gutenboarding: get plan from URL param #41679 (comment)
• Extract @wordpress/i18n-style strings for translation (i18n: Add CircleCI extraction job #39541 / @yuliyan)
• Add translation context to animated verticals list
• get locale for logged-in users: Gutenboarding: Use useI18n #39410
• localize text strings: Gutenboarding: Use useI18n #39410
• get locale for new users: Gutenboarding: i18n for new users #38909
• Gutenboarding: Serve/update RTL CSS as needed Gutenboarding: Serve/update RTL CSS as needed #39492
• localize vertical API: Gutenboarding: Get localized verticals #37630 No verticals currently
• server-side-detect locale? Suspect duplicate of Gutenboarding: Load translations before render #46473

Test i18n:

• en: (redirect strip locale) https://wordpress.com/new/en
• ar: (RTL) https://wordpress.com/new/ar
• de: https://wordpress.com/new/de
• es: https://wordpress.com/new/es
• fr: https://wordpress.com/new/fr
• he: (RTL) https://wordpress.com/new/he
• id: https://wordpress.com/new/id
• it: https://wordpress.com/new/it
• ja: (non latin check) https://wordpress.com/new/ja
• ko: https://wordpress.com/new/ko
• nl: https://wordpress.com/new/nl
• pt-br: https://wordpress.com/new/pt-br
• ru: (long translations) https://wordpress.com/new/ru
• sv: https://wordpress.com/new/sv
• tr: https://wordpress.com/new/tr
• zh-cn: https://wordpress.com/new/zh-cn
• zh-tw: https://wordpress.com/new/zh-tw

Some additional pointers:

• Might be good to release work in stages, so e.g. left-to-right languages work first (Spanish etc) and then separately right-to-left languages.
• The site should be created in the locale that the UI is in.
• All the APIs, verticalized contents, UI strings, etc should be consistently translated.
• The flow works in Calypso, but parts of it are shipped to WP Admin, in which case UI translations should still work. Code for these parts shipped to two environments is typically in /packages/*
• Nothing gets shipped to "Calypso proper" but it should also work already (See 138-GH-i18n-issues)

[sirreal]

I've updated this master issue with some new issues to track additional i18n tasks.

[sirreal]

There's some good i18n work in #39627 that would be nice to clean up and get landed.