Gutenboarding: add site language switcher

[simison]

Add language switcher to the header — it'll change the UI language of gutenboarding and most importantly site's language.

Imagine a situation where Spanish customer is creating an English site.

Questions

• Note language picker component in Calypso: https://wpcalypso.wordpress.com/devdocs/design/language-picker — can it be re-used?
• If the user is authenticated, should we change their locale for the rest of Calypso or just site locale?
  • Should we still update the UI locale when they're authenticated, even if we wouldn't update user's locale? After creating the site in whatever language, they'd get dropped back to Calypso in their own locale.

Context p7rd6c-2dV-p2

[yansern]

I'm exploring the possibility to reuse LanguagePicker component.

I think the LanguagePicker button component can't be reused, but the LanguagePickerModal component can be reused with CSS overrides from the gutenboarding end to make it look like the new design.

The only trouble is the "Select your site language" heading which may require modifying the LanguagePickerModal itself, otherwise, a nasty JS injection.

[yansern]

For the part that does the actual language switching, probably use the setLocale() method in @wordpress/i18n? I see react-i18n pulls the locale from there.

[simison]

Thoughts from @sirreal via p1584087489446600-slack-luna:

• There’s potential to reuse some UI, but if we have different designs maybe not worthwhile.
• There’s a component near the gutenboarding root that stores the languageData and passes it to the react-i18n Provider. My idea for implementation is that this component would add another Provider for language switching, it might provide available languages, but primarily would provide a callback to change the language. The language picker would use this context to change the language and the component would handle fetching the new language data.

[ramonjd]

Just capturing a conversation with @simison from p1591075525152100-slack-CNMU1UHHB

In perfect world with endless time, I’d love to;

• Implement the language modal for us from core components 🎉
• Replace Calypso language modal with one built from core components :tadaco:
• Offer that to core to replace the ugly we now have in settings page. :taco-rocket: Once it’s in core, replace ours with core one

[sirreal]

I shared some general thoughts about i18n in Calypso that will help lay the foundations for this: #42836

#39627 has some sketching that's functional but rough. It would be straightforward to implement the language switcher on top of the work in #39627 once it's been polished.

Gutenboarding has served as a proving ground for novel i18n approaches and they seem successful so far. I hope that in the near future we're able to share the approaches back to Calypso at large. #42836 outlines an approach to make that happen.

I think it makes sense to get the language switcher implemented in Gutenboarding because I believe it's the final feature we should support before our solutions become valid for the rest of Calypso. I'm happy to collaborate and support these efforts and #39627 serves as a good base 👍