WordPres Gutenberg

Découvrir Gutenberg dès maintenant

« 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 » :

Sous-menu "Ajouter" du menu "Extensions"
Ajouter une extension

Dans la zone de saisie Choix "Mot-clé" pour rechercher des extensions , saisir « Gutenberg » puis cliquer sur le bouton  dans la zone de l’extension « Gutenberg » :

Cliquer sur le bouton "Installer" de la zone de l'extension "Gutenberg"
Demander l’installation de l’extension « Gutenberg »

Le bouton doit s’animerBouton "Installer" devient "Installation"puis 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 »
Liste des extensions installées sur le site, dont "Gutenberg"
Gutenberg ajoutée au site et activée

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) :

Le menu "Gutenberg" et ses trois options : Démo, Retour d'utilisation et Documentation.
Aide de Gutenberg

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 :

Des icônes apparaissent en surimpression permettant de cadrer, de mettre le texte en gras....
Faire apparaître les fonctions associées à un 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 :

Questionnaire de retour d'expérience
Accéder au questionnaire de retour d’utilisation

Documentation

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

Page d’accueil de la documentation de Gutenberg sur WordPress.org
La documentation de Gutenberg

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  :

Dans la page d'administration, liste des articles, ajout d'un lien "Éditeur classique"
Choix du mode d’édition

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
Affichage de la page décrite ci-dessus
Une édition réalisée avec l’ancien éditeur récupérée dans Gutenberg

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 » :
Affichage du menu de conversion en blocs
Demander à décomposer le contenu en blocs de type Gutenberg
  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 :

Visualisation d'un paragraphe modifié grâce au paramétrage ci-dessus : bloc avec un fond orange et une lettrine
Modification d’un paragraphe

ATTENTION : la récupération d’un article créé avec l’éditeur classqiuene fonctionne pas toujours. J’ai pu notamment le constater sur des articles d’une certaine taille.
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.

Affichage de la page d'accueil du site "testgutenberg"
Le site « testgutenberg »

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.

6 réflexions sur « Découvrir Gutenberg dès maintenant »

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *