« 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’animer
puis devenir
.
Cliquer sur le bouton pour que l’extension puisse être utilisée.
La page des extensions doit apparaître avec :
- en haut de page la mention « Extension activée »,
- 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 »:
- cliquer quelque part dans le texte de l’article,
- les icônes symbolisant les fonctions applicables au texte doivent apparaître en partie haute,
- cliquer sur la roue crantée située en haut et à droite de la fenêtre,
- cliquer sur l’option « Bloc »,
- 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.
- Cliquer sur les trois points verticaux qui sont apparus en haut et à droite du contenu de l’article,
- dans le menu qui apparaît, cliquer sur l’option « Convertir en blocs » :

- Cliquer sur un élément (texte, image…),
- activer l’option « Bloc » en haut et à droite du contenu,
- 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), - nous avons choisi d’activer l’option lettrine
- et de modifier la couleur de fond du paragraphe
On peut voir le résultat dans la partie contenu, en colonne de gauche :

Par ailleurs, quand des images sont intégrées dans du texte, la mise en page peut être cassée.
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.
merci beaucoup pour cet article riche en conseils et informations
Merci pour ce merci, ça fait toujours plaisir.
Daniel Farnier
Pourquoi, en Avril, imposer ce module de mise en page alors que , démocratiquement, il devrait être proposé ???
Bonjour,
Je ne comprends pas ce que vous voulez dire.
Cette évolution a suivi le même parcours de décision que toutes les autres évolutions / versions décidées par la communauté.
Techniquement, il sera possible de conserver l’ancien éditeur en utilisant une extension afin de faciliter un passage en douceur.
Pour ma part, compte tenu de ce qu’apporte Gutenberg je l’adopterai le plus rapidement possible (il me manque un bloc diaporama pour pouvoir l’utiliser sur tous mes sites).
Bon Gutenberg
Merci pour cet article, mais personnellement, je continuerai à utiliser Elementor
Dès lors qu’un constructeur de pages convient, pourquoi en changer ?
Les constructeurs de pages vont s’appuyer sur Gutenberg pour apporter de nouvelles fonctionnalités. C’est ce qu’explique l’équipe d’elementor dans l’article suivant : https://docs.elementor.com/article/257-gutenberg
Daniel Farnier.