[website] Add support to internationalization
Motivation for the change, related issues
This pull request introduces comprehensive internationalization (i18n) support throughout the Playground website UI by integrating translation functions into user-facing strings. The changes ensure that all visible text, labels, and messages can be easily localized, improving accessibility for non-English users. The implementation leverages the @wordpress/i18n package and a custom useI18n hook to provide translation capabilities in React components.
Related to issue ##1991
Key changes include:
Internationalization Implementation:
- Added
@wordpress/i18nas a dependency inpackage.jsonto enable translation functions. - Introduced the
useI18nhook and imported it into all relevant components to access the translation function (__).
UI String Localization:
- Replaced all hard-coded user-facing strings in components such as
AddressBar,BrowserChrome,EnsurePlaygroundSiteIsSelected,ErrorReportModal,ImportFormModal,ImportForm, andLogModalwith calls to the translation function (__). This covers aria-labels, modal titles, button labels, error messages, and instructional text.
These updates lay the groundwork for translating the Playground UI into multiple languages, making the application more accessible and user-friendly for a global audience.
Testing Instructions (or ideally a Blueprint)
- Pull the branch locally
- Run the applications
npm run dev - Open the website with the selected language, for example:
- http://127.0.0.1:5400/website-server/?language=es_ES
- http://127.0.0.1:5400/website-server/?language=pt_BR
- http://127.0.0.1:5400/website-server/?language=en_GB
And check the UI:
Spanish UI
Brazilian Portuguese UI