Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.41k stars 1.98k forks source link

i18n: Prepare calypso for `@automattic/react-i18n` usage #42836

Open sirreal opened 4 years ago

sirreal commented 4 years ago

Prepare Calypso for @wordpress/i18n and @automattic/react-i18n usage.

Gutenboarding (/new) is using @wordpress/i18n for static localization and @automattic/react-i18n package for reactive localization in React.

CompositeCheckout currently uses its own reactive implementation based on @wordpress/i18n. Calypso-wide support for @automattic/react-i18n would allow CompositeCheckout to share the implementation used in Gutenboarding and ideally across other projects. See #42831.

Much of this could likely be handled by adding a few components designed to specifically for WordPress.com i18n and these i18n libraries.

https://github.com/Automattic/wp-calypso/pull/39627 contains some sketching of components that could be share and serves as a starting point. These were oriented for debugging and testing, but the ideas hold.

Components

<CalypsoI18n />

This would be a top level component. It could handle translation fetching and updating, render an <I18nProvider />, and render any necessary translation effect handlers:

https://github.com/Automattic/wp-calypso/blob/5c77aa4a2310d6d0ba4fb2fb1cc74db7aecc81f3/client/landing/gutenboarding/index.tsx#L130-L155

<CalypsoI18nDomEffects />

Handle updating lang/dir in the DOM.

https://github.com/Automattic/wp-calypso/blob/5c77aa4a2310d6d0ba4fb2fb1cc74db7aecc81f3/client/landing/gutenboarding/index.tsx#L157-L164

Related: I18n issues in the Gutenboarding: https://github.com/Automattic/wp-calypso/issues/37665

cc: @Automattic/team-calypso @sirbrillig @Automattic/i18n

sirreal commented 4 years ago

40011 is a short-term use case for these changes and motivation to make https://github.com/Automattic/wp-calypso/pull/39627 happen for Gutenboarding.

A possible approach is to implement those changes for Gutenboarding, then extract components to share around the Calypso client.

sirbrillig commented 4 years ago

Here's my implementation of this component: https://github.com/Automattic/wp-calypso/pull/42997

What do you think?

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

jsnajdr commented 3 years ago

This issue is now more relevant than ever 🙂 Gutenberg now has @wordpress/i18n and @wordpress/react-i18n packages published, with all the features and React bindings that are needed to replace i18n-calypso and the @automattic/react-i18n library. The infrastructure for porting Calypso completely to @wordpress/i18n and deprecate i18n-calypso is ready.