Ecrire son premier article avec l’éditeur Gutenberg

L’éditeur de texte Gutenberg peut paraitre un peu déroutant au premier abord. Il suffit simplement de le pratiquer quelquefois pour comprendre son fonctionnement, qui au final s’avère etre assez simple, tout en possédant des caractéristiques avancées.

Gutenberg utilise des blocs qui s’empilent dans la page pour insérer le contenu, qu’il soit en texte ou en multimédia.

De plus, vous n’avez plus besoin d’insérer un plug-in pour la création de tableau, l’éditeur se charge de les insérer facilement.

Créer un post avec Gutenberg

La page pour écrire un nouvel article s’ouvre sur le bloc pour l’insertion du titre. C’est le seul présent pour l’instant. Vous n’avez plus qu’a le remplir.

Lorsque vous voudrez ajouter du texte par exemple, 2 choix pour sélectionner ce bloc s’offriront à vous. Soit en haut à gauche de votre écran, soit après le dernier bloc utilisé. Vous pouvez aussi appuyez sur la touche ENTREE pour ouvrir un nouveau bloc de paragraphe.

Insertion du titre dans un article.
Les flèches vous montrent les différents emplacements à sélectionneur pour ajouter des blocs.

Ouverture des différents blocs, pour ajouter du texte, des listes à puces ou des images.
Ouverture des différents blocs.

Changer l’URL du titre

Revenons au titre, puisque vous avez la possibilité de changer le lien du futur article. Pour cela, cliquez dans le bloc ou se trouve le lien et un bouton écrit MODIFIER apparaitra. Faites vos changements et cliquez sur ENREGISTRER.

Sélection du bloc titre dans l'éditeur gutenberg.

On peut vouloir changer d’URL pour de multiples raisons. Par exemple, dans le cas de l’exemple, ce fut pour nettoyer l’URL, en lui enlevant les points d’exclamation, et l’apostrophe présents, qui ne servent à rien.

On peut aussi vouloir raccourcir son URL lorsque’elle est trop longue, ou alors y laisser que les mots important si ce sont des mots clés utilisés dans l’article.

Icônes de publication

Icons de publication rapide.

Chaque fois que vous allez utiliser un nouveau bloc, vous allez avoir sur la droite , 3 petites icônes qui vont vous permettre de sélectionner rapidement un nouveau choix. Sur l’image, on trouve l’icône de téléchargement, celui pour l’insertion d’une image et enfin celui pour ajouter un titre.

Sachez que ces icônes ne sont pas fixes, et qu’ils peuvent changer suivant les choix antérieurs que vous avez faits pour écrire votre article. Par exemple si vous avez ajouté souvent un bouton, c’est cette icône qui reviendra au côté des deux autres.

Fonctionnalités plus intuitives

On parlait de bouton. Vous n’allez pas avoir une image de bouton en 3D, là il faudra là télécharger, mais vous allez avoir un bouton qui s’adapte a votre texte comme dans les deux exemples ci-dessous.

Vous allez choisir la couleur de fond, la couleur de la police, et automatiquement en dessous, il y a la case de formulaire vous proposant de saisir l’URL de destination lors du clic sur ce bouton.

Choix d'insertion d'un bouton dans la page avec Gutenberg.

De façon très intuitive, vous allez gérer la mise en page de votre article grâce aux blocs divisés en 5 catégories.

  1. Les blocs communs qui regroupent les paragraphes, les images, le titre, les listes à puces, le bouton de téléchargement, l’insertion d’une galerie photographique, du son, ou une bannière.
  2. Les blocs de mise en forme où l’on trouvera l’ajout de code, la possibilité d’ajouter du HTML, des citations, du texte préformaté, ou encore un tableau.
  3. Les blocs de mise en page, avec les colonnes, séparateurs, bouton, saut de page, espacement, ainsi que la possibilité d’insérer cote à côté une image et du texte.
  4. Les blocs Widjets, tous vos widjets peuvent être insérés au coeur de votre page, calendrier, commentaires, flux ….
  5. Les blocs de contenus embarqués, Twitter, YouTube, SoundCloud, Facebook, et bien d’autres encore.

Bloc de mise en forme dans Gutenberg.
Exemple du bloc de Mise en Forme.
Bloc pour les contenus embarqués dans Gutenberg.
Exemple du bloc de contenus embarqués.

Curseur de sélection de bloc.

Bien pratique, vous avez sur le côté gauche des blocs, un petit onglet avec une pointe de flèche.
On l’utilise pour faire remonter un bloc entier ou le faire redescendre dans l’article. On n’a pas besoin d’efface du texte et des images, pour les réinsérer ailleurs, il suffit juste de faire glisser le bloc choisi.

les blocs Réutilisables

Lorsque l’on ajoute un nouveau bloc, celui-ci est vide dans l’attente du contenu que l’on va ajouter. Si dans les articles certains styles de blocs reviennent souvent, vous pouvez les dupliquer, ce qui facilitera et vous fera gagner du temps pour la mise en forme de votre article.

Créer un bloc réutilisable

Prenons l’exemple d’une bannière qui fait la promotion de vos services et qui revient souvent dans les articles. La première fois où vous la créer, vous allez sur l’icône à trois points horizontaux, et sélectionnez : Ajouter aux blocs réutilisables.

Processus pour ajourter un bloc réutilisable dans  Gutenberg.
Enregistrement d'un bloc réutilisable.

Une fenêtre s’ouvre et vous lui donnez un nom, puis vous l’enregistrez. Ca y est vous avez votre premier bloc réutilisable.

Se servir d’un bloc réutilisable

Comment sélectionner un bloc réutilisable.

Vous ouvrez la fenêtre d’ajout de blocs, et vous cherchez réutilisables. En cliquant dessus apparait la bibliothèque de vos blocs. Vous n’avez plus qu’à sélectionner celui qu’il vous faut pour qu’il s’insère automatiquement dans votre article.

Tout vos blos peuvent être dupliqués et ajoutés à votre bibliothéque de blocs réutilisables.

La colonne Document et Bloc

Modification des blocs par choix multiples.

– Colonne Bloc

Sur la droite de la page où vous écrivez votre article se trouve une colonne. Elle peut se dédoubler en Bloc, ou Document.

Lorsque vous travaillez sur votre article, vous êtes dans un bloc de contenu ou d’image, ou autre. Chaque fois que vous ouvrez un bloc bien spécifique, la colonne de droite change et vous propose différents paramètres à choisir.

Prenons l’exemple du bloc paragraphe, la colonne de droite affichera alors le choix de la police, de sa taille ou même de sa couleur.

Si vous êtes dans le bloc pour l’insertion d’une image, la colonne de droite changera pour vous proposer un style de présentation, l’ajout d’une description pour cette image. …etc…

– Colonne Document

En passant par la colonne Document, vous allez gérer tous les attributs de ce nouvel article, c’est-à-dire le choix de la catégorie, l’ajout de tags, ou d’étiquettes, la publication directe ou différée.

Vous pourrez aussi autoriser ou pas les commentaires sur chaque article, et enfin autoriser les pings et les rétroliens. Ces deux dernières possibilités jouent pour le référencement.

Bloc document qui agit sur les réglages généraux de l'article.

Conclusion

Avec tous les éléments que l’on à abordé, vous allez pouvoir mettre en page plus facilement vos articles, même si tous les réglages possibles n’ont pas été évoqué.

L’éditeur Gutenberg pour WordPress est assez complet, et il mérite que l’on s’y attarde un moment pour comprendre toutes la palette de possibilité qu’il offre.

Cette éditeur est en constante évolution par ses créateurs qui au fils du temps lui rajoutent des possibilités supplémentaires. A suivre donc !