« Gutenberg » est le nom du nouvel éditeur d’article de WordPress qui remplacera l’actuel éditeur en avril 2018. La grande nouveauté est qu’il fonctionne avec des blocs (de textes, d’images…) que l’on positionne dans la page éditée.

Dès maintenant, une extension permet de l’installer pour vérifier qu’il n’y a pas d’incompatibilité avec le thème ou les autres extensions utilisées et pour se familiariser avec son mode de fonctionnement.

Il est aussi possible de manipuler Gutenberg en accédant à un site de test.

Installer l’extension

Comme pour toutes les extensions disponibles sur WordPress.org, il faut se connecter à l’administration du site où l’extension sera installée :

Dans le tableau de bord, survoler avec la souris le menu « Extensions » puis cliquer sur le sous-menu « Ajouter » :

Dans la zone de saisie  , saisir « Gutenberg » puis cliquer sur le bouton  dans la zone de l’extension « Gutenberg » :

Le bouton doit s’animerpuis devenir .
Cliquer sur le bouton pour que l’extension puisse être utilisée.

La page des extensions doit apparaître avec :

1. en haut de page la mention « Extension activée »,
2. dans le corps de la page, une zone dédiée à l’extension « Gutenberg »

De l’aide pour découvrir

L’équipe de développement de Gutenberg a fait de gros efforts pour fournir l’information nécessaire à sa prise en main.

Une fois l’extension activée, un menu « Gutenberg » apparaît dans la colonne gauche de l’administration. En le survolant, on fait apparaître trois types de supports (rédigés en anglais) :

La démo

Il s’agit en fait d’une page de démonstration. Elle est composée de blocs (sauce Gutenberg) et permet de tester les fonctions de base applicables aux blocs.

La première chose qui apparaît, n’est pas une image : c’est un bloc de type « image de couverture ». Si vous cliquez dessus, vous verrez apparaître des icônes représentant les fonctions applicables à ce type de bloc :

Vous pouvez ainsi découvrir plusieurs types de blocs proposés en standard tout en testant le paramétrage proposé pour chacun. Dans cet article, je n’irai pas plus loin dans la présentation des blocs. Sachez que  que si vous comprenez l’anglais, cette page de démonstration est un moyen très performant pour découvrir la richesse de ce nouvel éditeur.

Le retour d’utilisation

Il permet d’établir un dialogue avec l’équipe de développement, soit pour faire part de remarques, soit pour poser des questions :

Documentation

Il s’agit d’un lien vers la documentation disponible sur WordPress.org :

Utiliser l’éditeur classique avec Gutenberg installé

Une fois l’extension Gutenberg activée, il est possible de choisir d’éditer chaque article soit avec Gutenberg soit avec l’éditeur classique.

Dans l’administration, afficher la page des articles puis passer la souris au dessus du nom de l’article; cliquer sur le lien « Modifier » pour éditer avec Gutenberg ou « Éditeur classique » pour éditer avec l’éditeur actuel  :

Et pour les articles créés avec l’éditeur classique ?

Pas de panique, ces articles continueront à s’afficher comme avant, et on peut même les éditer. L’astuce est simple, le contenu est inséré dans un bloc spécifique appelé « bloc de l’éditeur classique »:

1. cliquer quelque part dans le texte de l’article,
2. les icônes symbolisant les fonctions applicables au texte doivent apparaître en partie haute,
3. cliquer sur la roue crantée située en haut et à droite de la fenêtre,
4. cliquer sur l’option « Bloc »,
5. vous devez voir apparaître la mention « Classic » avec la précision suivant laquelle le bloc est en fait une récupération d’un contenu édité avec l’ancien éditeur

On peut lire l’article, mais les modifications sont limitées. On ne peut pas, par exemple, insérer un bloc dans le contenu existant. Heureusement, Gutenberg propose une fonction qui va éclater le contenu en blocs qui pourront être modifiés comme tout bloc créé avec Gutenberg.

1. Cliquer sur les trois points verticaux qui sont apparus en haut et à droite du contenu de l’article,
2. dans le menu qui apparaît, cliquer sur l’option « Convertir en blocs » :

1. Cliquer sur un élément (texte, image…),
2. activer l’option « Bloc » en haut et à droite du contenu,
3. le bloc utilisé comme exemple est du type « Paragraphe »
   des options liées au type de bloc doivent apparaître dessous la mention « Bloc » (en colonne de droite),
4. nous avons choisi d’activer l’option lettrine
5. et de modifier la couleur de fond du paragraphe

On peut voir le résultat dans la partie contenu, en colonne de gauche :

Un site pour tester Gutenberg

Le site se situe à l’adresse : https://testgutenberg.com.

Il permet de découvrir l’interface de Gutenberg, de créer et modifier des blocs, de tester l’interface utilisateur.

Il est malheureusement en anglais.

Et maintenant ?

Maintenant : il ne me reste plus qu’à reprendre les articles déjà parus pour les adapter à Gutenberg. Je vais néanmoins attendre la sortie officielle de Gutenberg, prévue avec la version WordPress 5.0, afin de travailler sur l’interface utilisateur définitive avec toutes les traductions en français. Sinon, je vais passer mon temps à faire et refaire les recopies d’écran.