wordpress-playground icon indicating copy to clipboard operation
wordpress-playground copied to clipboard

[website] Add support to internationalization

Open fellyph opened this issue 2 months ago • 0 comments

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/i18n as a dependency in package.json to enable translation functions.
  • Introduced the useI18n hook 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, and LogModal with 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)

  1. Pull the branch locally
  2. Run the applications npm run dev
  3. 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 Screenshot 2025-10-26 at 19 06 41

Brazilian Portuguese UI Screenshot 2025-10-26 at 19 06 20

fellyph avatar Oct 26 '25 19:10 fellyph