Formation « Créer des blocs avec Gutenberg »

i18n : internationaliser le Javascript de Gutenberg

Lecture : 3 minutes • 0

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.

Déclarer le textdomain en 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
<?php 

function capitainewp_blocks_load_textdomain() {
  load_plugin_textdomain( 'capitainewp-gutenberg-blocks', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
}
add_action( 'plugins_loaded', 'capitainewp_blocks_load_textdomain' );

É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.

JS
index.js
<RichText
	placeholder={ __('Your text here', 'capitainewp-gutenberg-blocks') }
/>

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 JS

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
<?php 

public function editor_assets() {
  
  // Déclaration du JS de l'éditeur
  wp_register_script(
    'capitainewp-editor-js',
    plugins_url( 'assets/editor.build.js'),
    [ 'wp-editor', 'wp-blocks', 'wp-element', 'wp-i18n' ],
  );

  // Premier paramètre : le nom du script (handle)
  // Second paramètre : le textdomain
  if ( function_exists('wp_set_script_translations') ) {
  	wp_set_script_translations( 'capitainewp-editor-js', 'capitainewp-gutenberg-blocks' );
  }	
}
add_action( 'enqueue_block_editor_assets' , 'editor_assets' );

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

Traduire pour 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
<?php 

wp_set_script_translations( 
  'capitainewp-editor-js', 
  'capitainewp-gutenberg-blocks', 
  plugin_dir_path( MY_PLUGIN ) . 'languages' 
);

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 !

0

Questions, réponses et commentaires

    Laisser un commentaire