Show translated strings coming from global styles variations

[oandregal]

Follow-up to #39322

What?

This PR shows the translated strings of the global styles variations according to the language of the user.

Why?

Style variations can contain strings that are shown to the user, such as the style variation title or the names of the presets (colors, font sizes, etc).

How?

• Centralizes the logic to read variations into WP_Theme_JSON_Resolver::get_style_variations.
• Makes them use the translate method we use for any other theme.json file.

Testing Instructions

I've created a couple of style variations for the TwentyTwentyTwo theme and each contains the following translatable strings 1) the variation title and 2) one color in the color palette with a name. This is the result (I've set the screen to Spanish and so the expectation is that the variation title and the color defined by it should be translated):

style-variations-translated.mp4

Step by step, this is what I've done:

1 - Create the variations

• Activate TwentyTwentyTwo.
• Within the theme folder, create a file at styles/redish.json with the following contents:

{
  "version": 2,
  "title": "Red style",
  "styles": {
    "color": {
      "background": "red",
      "text": "white"
    }
  },
  "settings": {
    "color": {
      "palette": [
        { "slug": "red", "name": "Red", "color": "red" }
      ]
    }
  }
}

• Within the theme folder, create a file at styles/bluish.json with the following contents:

{
  "version": 2,
  "title": "Blue style",
  "styles": {
    "color": {
      "background": "blue",
      "text": "white"
    }
  },
  "settings": {
    "color": {
      "palette": [
        { "slug": "blue", "name": "Blue", "color": "blue" }
      ]
    }
  }
}

2 - Provide a translation

Unzip the .mo file I've created for TwentyTwentyTwo twentytwentytwo-es_ES.mo.zip at wp-content/languages/themes/. This provides the strings of the style variations translated to Spanish.

Alternatively, you can do this yourself by (expand to see how).

• Go to "Settings > General" and set the "Site Language" to Spanish.
• Go to "Dashboard > Updates" and make sure you've updated the translations (both for the site and the active theme).
• Go to wp-content/languages/themes/ and paste the following at the end of the twentytwentytwo-es_ES.po file:

#: styles/bluish.json
msgctxt "Style variation name"
msgid "Blue style"
msgstr "Estilo azul"

#: styles/bluish.json
msgctxt "Color name"
msgid "Blue"
msgstr "Azul"

#: styles/redish.json
msgctxt "Style variation name"
msgid "Red style"
msgstr "Estilo rojo"

#: styles/redish.json
msgctxt "Color name"
msgid "Red"
msgstr "Rojo"

• Run the wp i18n make-mo <path-to-your-po-file> <path-to-the-directory> command to convert the .po file into the .mo one in the same directory.

3 - Do the testing

• Check that the variation title is translated accordingly to the site language (switch between English and Spanish).
• Check that the color names for the variations are translated accordingly to the site language (switch between English and Spanish).

[oandregal]

The key point of this PR is this line: passing the decode JSON to translate. The rest of the code remains the same as it was.

[oandregal]

get_style_variations had to be moved here to use translate, which is not a public method of the WP_Theme_JSON_Resolver_Gutenberg class.

Alternatively, we could make translate public and use it in the rest API. Though I think this approach is better because it encapsulates all the logic for consumers: they just want to read the style variations.

[oandregal]

This method is not modified with respect to WP_Theme_JSON_Resolver_5_9::translate, though it needs to live here to read the theme-i18n.json from the lib/compat/6.0 folder.

[youknowriad]

Makes sense