[website] Make playground translation ready

[MaggieCabrera]

I am at a Spanish WordCamp and we've been extensively using Playground for contributor day and workshops. We have the translation team here and we were wondering if the Playground interfaces were translatable. I think when you change the WP language the Playground interface should update to the selected language if a translation is available for it.

If you make playground translation ready, you already have translators waiting on it to translate into Spanish at least :)

[bgrgicak]

Playground isn't translatable today, but it would be wonderful if we could get there.

Here are a few thoughts on how we could get there.

• Most strings from the Playground UI should live in the Website package, so we could start by making this package translatable.
• We could use the @wordpress/i18n package to implement translation support.
• It would be great if translators could use translate.wordpress.org and Playground would download translation files from there.

[adamziel]

Looping in @akirk @amieiro – how would you go about making Playground translatable with the existing WordPress infrastructure? Technically, we're talking about a React app. One idea is packaging the code as a WordPress plugin. It's not ideal, as there would be no actual way to use that plugin, but it's something. Do you have any other ideas ?

[amieiro]

In the Meta project we have a similar situation: the Openverse project. This project uses Nuxt.js/Vue.js.

They have the English strings in a JSON file. They use these strings in the frontend to be able to translate them.

E.g., the about.title.description key is used here, using {openverse} as placeholder to be updated in runtime. They get the translations from the JSON file.

  about: {
    title: "About {openverse}",
    description: {
      content: "{openverse} is a tool that allows openly licensed and public domain works to be discovered and used by everyone.",
    },

We could have a similar situation:

• At translate.w.org, create a Playground project as a Meta subproject, similar to the Openverse.
• In Playground, create a similar solution, with a JSON file or another interchange format like po.
• At translate.w.org, add Playground to the import system.
• Add this project to the export system, to create the files with the translations.

[bgrgicak]

Playground heavily uses WordPress components. We should also consider how to make these strings translatable.