Formation « Créer des blocs avec Gutenberg »

i18n : internationaliser le Javascript de Gutenberg

Lecture : 2 minutes • 4

Dans ce cours on va voir comment gérer l’internationalisation de nos chaines de texte en PHP et en JS afin que nos blocs puissent être traduits dans toutes les langues.

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

Déclarer le textdomain PHP

Pour permettre la traduction de vos blocs il va falloir préalablement configurer quelques petites choses. En premier lieu on va s’assurer que le textdomain est bien chargé en PHP. Ici rien de nouveau, normalement c’est ce que l’on fait pour tout thème ou extension.

Il permet d’indiquer 2 choses : le nom unique que l’on va utiliser pour détecter nos chaines (j’utilise dans cet exemple capitainewp-gutenberg-blocks) et le dossier dans lequel aller chercher la traduction. Dans mon cas mes fichiers de langue Po/Mo se trouvent dans le dossier /languages/. Ce dossier est d’ailleurs devenu inutile si vous prévoyez de publier votre traduction sur wordpress.org : les traductions sont gérées directement depuis le service de traduction WP.

Le tout se passe dans le hook plugins_loaded et on place généralement ce code au tout début de l’extension.

PHP
plugin.php

Écrire des textes traduisibles en JS

Pour écrire une chaine à traduire en JS, j’utilise donc la fonction __(), comme en PHP, avec en premier paramètre la chaine à traduire et en second le textdomain.

JSX

On n’utilise pas _e() en React car les accolades font office de template qui va au final afficher cette valeur.

Ajouter le nécessaire pour la détection des chaines

De base les traductions sont disponibles en PHP, mais pour les envoyer au Javascript, il va falloir ajouter une ligne de code, juste après avoir déclaré le JS de votre éditeur.

Le tout se passe dans le hook enqueue_block_editor_assets, que l’on a vu dans le cours sur le chargement des styles et scripts Gutenberg.

Il vous faudra ajouter la fonction wp_set_script_translations apparue avec WordPress 5.0 et la sécuriser par un test afin d’éviter les erreurs PHP sur les anciennes versions.

PHP
plugin.php

Avec ça, les chaines de texte dans votre JS devraient désormais être traduites lorsque vous changez de langue dans WordPress.

Traduire une extension du répertoire officiel WordPress

Le répertoire officiel de WordPress est capable de détecter les chaines de texte dans votre JS (même compilé) exactement comme il le faisait déjà auparavant avec PHP.

Du coup pas besoin de faire quoique ce soit de votre côté !

Si vous ne souhaitez pas passer par le répertoire officiel, vous pouvez utiliser po2json qui permet de créer un fichier JSON à partir de vos chaines.

Dans ce cas il faudra ajouter un troisième paramètre à votre fonction pour indiquer que certaines traductions se trouvent dans un fichier JSON, lui-même dans le répertoire /languages/.

PHP
plugin.php

Pour plus d’informations à ce sujet, consultez l’article officiel sur le support i18n.


Voilà pour l’internationalisation de Gutenberg. Votre extension est désormais prête pour être traduite dans tous les langues !

4

Questions, réponses et commentaires

  1. wwp-members

    Le 10 juillet 2019

    Bonjour,

    Je reviens vers vous pour les questions de traduction des fichiers js.

    En me basant sur l’article suivant https://getwithgutenberg.com/2019/04/how-to-internationalize-your-block/ j’ai pu faire fonctionner la traduction d’un block de style « HelloWorld ». Voici le code : https://github.com/epfl-idevelop/test-i18n-gutenberg

    En effet, si le fichier json généré par wp-cli respecte la nomenclature : ${domain}-${locale}-${handle}
    dans lequel ${handle} est le nom du script js cela fonctionne.

    Par contre dès que l’on a N fichiers js qui contiennet des traductions la commande wp i18n make-json va générer N fichiers *.json (1 fichier json par fichier js)
    Ces fichiers json ayant une partie du nom md5 ne sont pas pris en compte.

    Pourtant d’après la documentation officielle :

     » …. When parsing JS files for translations we don’t know which handle is used to register that file so we’ve had to use an alternate mechanism to find the translations belonging to each file. To do this we’re using the md5 of the relative path of each file. This is appended to the usual name of ${domain}-${locale} in the form of ${domain}-${locale}-${md5}.json.
    When you set script translations for a handle WordPress will automatically figure out the relative md5 hash of your source file, check to see if a translations file exists and if so ensure that it’s loaded into wp.i18n before your script runs.

     »

    Un bug a bien été enregistré
    https://core.trac.wordpress.org/ticket/45488
    mais fermé sans patch

    Avez vous eu l’occasion de faire fonctionner la traduction de fichier js via les fichiers json md5 ?

    Merci

    Bonne journée
    Greg

    1. Maxime BJ

      Le 12 juillet 2019

      Merci pour toutes ces informations !
      De mon côté j’ai expérimenté avec 2 de leurs scripts qui permettant de faire Js -> Json puis Json -> PHP, comme ça wp.org voit les chaines puisqu’elles sont dans un fichier PHP (ce dernier n’est rattaché ou inclus dans un aucun autre, mais sa présence suffit pour que wp.org le voit et scanne les chaines). Mon process n’est pas encore propre mais s’il t’intéresse je peux te l’envoyer par e-mail.

  2. wwp-members

    Le 15 mai 2019

    Bonjour,

    Je ne parviens pas à ce que mes chaines de texte dans le JS soient traduites lorsque je change de langue dans WordPress.

    Je souhaite conserver l’utilisation de mes fichiers mo/po pour ce faire.

    Faut il utiliser le fichier js builder par webpack à savoir blocks.build.js lors de :

    // Déclaration du JS de l’éditeur
    wp_register_script(
    ‘capitainewp-editor-js’,
    plugins_url( ‘dist/blocks.build.js’),
    [ ‘wp-editor’, ‘wp-blocks’, ‘wp-element’, ‘wp-i18n’ ],
    );

    Je pense que ce serait super utile d’avoir un petit exemple style « HelloWorld » pour ce cours 🙂

    Par avance merci pour votre aide.
    Bonne journée
    Greg

    1. Maxime BJ

      Le 15 mai 2019

      Ca a pas mal évolué de ce côté là et du coup maintenant grâce à WP-CLI tu peux donc trouver tes chaines dans les fichiers JS. Je dois expérimenter de mon côté pour améliorer le process sur mes extensions et je mettrais le cours à jour en conséquent.

Laisser un commentaire