Premier article Gutenberg

Gutenberg : publier un premier article

A savoir : vous pouvez agrandir les images de cet article en cliquant dessus.

Qu’est-ce que « Gutenberg » ?

Gutenberg est le nouvel éditeur utilisé par WordPress, l’outil qui permet de rédiger le contenu des articles et des pages.

Sa grande particularité est de s’organiser autour de blocs : de textes, d’images, de titres, de vidéos, de lignes séparatrices et de pleins d’autres éléments.

L’édition consiste alors à choisir ses blocs, les positionner dans la page et de paramétrer leur mise en forme.

L’objectif est que ce système de blocs serve à l’ensemble de la conception d’un site WordPress, par exemple pour la réalisation d’un thème (la définition de la forme visuelle d’un site).

Accéder à l’édition d’un article

Haut de page

Un simple visiteur de site ne peut pas créer ou modifier un article.
Seul un utilisateur préalablement autorisé par un administrateur du site peut le faire.
L’adresse de la page de connexion au site est soit disponible depuis le site soit doit être communiquée par l’administrateur aux utilisateurs déclarés.
L’utilisateur doit se connecter avec son identifiant et son mot de passe. Il peut alors accéder tableau de bord :

WordPress - se connecter avec un nouveau mot de passe
Se connecter avec un identifiant et un mot de passe
Le tableau de bord qui permet de gérer le site.

Passer la souris sur l’option « + Créer » située dans la barre du haut, puis cliquer sur « Article » :

Faire apparaître le menu des éléments à créer.
Cliquer sur le chois « Article »

Une page de saisie d’article vierge doit s’afficher :

Page de saisie d’un nouvel article.

Saisir un titre

Haut de page

Cliquer dans la zone contenant « Ajout de titre » et saisir le titre de l’article :

Saisie du titre

Saisir le contenu de l’article

Haut de page

Saisir du texte

Cliquer dans la zone « Commencer à écrire » :

Cliquer dans la zone prévue pour commencer à rédiger

Saisir un texte; des boutons de mise en forme du texte (gras, alignement, italique…) apparaissent en surimpression en haut du bloc Texte :

Saisie du texte dans le bloc Texte.

Tapez un « Retour chariot », et saisir un nouveau texte.

Saisir une nouvelle ligne de texte.

Sauvegarder la saisie

Il y a deux types d’informaticiens : ceux qui sauvegardent régulièrement et ceux qui n’ont pas encore tout perdu d’un coup.

WordPress veille sur les inconscients en enregistrant régulièrement la saisie en cours. WP le fait savoir en affichant le message « Enregistrement automatique » durant la sauvegarde en haut de la page :

Enregistrement déclenché automatiquement par WordPress

Une fois la sauvegarde terminée, le bouton passe à « Enregistré » :

L’article est enregistré

Bien évidemment il est aussi possible de sauvegarder son travail à tout moment en cliquant sur le bouton « Enregistrer le brouillon » :

Enregistrement déclenché par le rédacteur.

Ajouter une image

Haut de page

Pour ajouter une image, il faut …. ajouter un bloc Image.

  1. Créer un bloc texte en saisissant un retour chariot dans le bloc texte après lequel nous souhaitons insérer l’image (par exemple, après le bloc contenant « voici la première ligne de mon Gutarticle »),
  2. cliquer dans le bloc texte créé sans saisir de caractères,
  3. puis cliquer sur l’icône image si celle-ci apparaît.
Insérer rapidement une image après un bloc existant

L’affichage des icônes contextuelles correspond aux blocs les plus utilisés.
Il est bien évidemment possible d’insérer n’importe quel type de bloc.

  1. Créer un bloc texte en saisissant un retour chariot dans le bloc texte après lequel nous souhaitons insérer l’image (par exemple, après le bloc contenant « voici la première ligne de mon Gutarticle »),
  2. cliquer dans le bloc texte créé sans saisir de caractères,
  3. puis cliquer sur l’icône en forme de croix dans un rond, qui est l’icône d’ajout de bloc.
Retrouver un bloc parmi les plus utilisés

Rechercher le bloc Image.
Soit il apparaît dans les icônes les plus utilisées,
soit il faut le retrouver parmi les icônes de même catégorie :

  1. utiliser l’ascenseur situé à droite pour faire apparaître sa catégorie de blocs,
  2. faire apparaître les icônes de la catégorie choisie en cliquant sur la flèche située à droite du nom de catégorie (l’icône Image fait partie de la catégorie Blocs communs),
  3. cliquer sur l’icône Image.
Retrouver le bloc « Image »

Après avoir cliqué sur l’icône Image,

  1. une fenêtre apparaît afin de permettre la récupération du fichier contenant l’image,
  2. dans notre exemple, le fichier est récupéré depuis l’ordinateur local (celui à partir duquel on s’est connecté au site), c’est pourquoi nous cliquons sur le bouton Envoyer :
Envoyer un fichier image vers le site
  1. Sous Windows, l’explorateur de fichier s’ouvre, 
  2. sélectionner le répertoire où se trouve le fichier image,
  3. double cliquer sur l’icône du fichier (ou le nom du fichier suivant le type d’affichage), ou cliquer simplement puis…
  4. cliquer sur le bouton Ouvrir.
Sélectionner un fichier image

L’image s’insère dans le bloc Image

Haut de pageInsertion de l’image (photo)  dans l’article

Visualiser l’article

Haut de page

A tout moment, il est possible de regarder à quoi ressemblera l’article vu par un visiteur du site.
Je vous conseille de toujours enregistrer l’article en cours d’édition avant de le visualiser.

Cliquer sur le bouton Prévisualiser situé en haut et à droite du bouton d’enregistrement du brouillon . L’article apparaît dans un nouvel onglet du navigateur web :

Le bouton Prévisualiser situé en haut de la page de saisie de l’article
L’article tel qu’il sera vu par les visiteurs du site

Attention : la prévisualisation permet au rédacteur de voir son article « tel qu’il sera vu par un visiteur », mais il n’est pas encore visible par un visiteur non connecté. Pour que les visiteurs non connectés puissent voir l’article, il faut le publier.

Publier l’article

Publier un article, s’est le rendre visible pour tous les visiteurs du site, qu’ils soient connectés ou non.

Cliquer sur le bouton Publier situé en haut et à droite du bouton Prévisualiser :

Le bouton Publier.

WordPress nous incite à vérifier certaines informations avant que la publication soit réalisée.

  1. certaines informations et options relatives à l’article s’affichent à la droite de la zone d’édition,
  2. pour notre premier article, nous confirmons la publication immédiate en cliquant sur le bouton Publier,
  3. remarquons qu’on peut choisir de ne plus passer par cette étape de vérification pour les futures publications.
  4. WordPress confirme que la publication s’est bien déroulée,
  5. et fournit des informations sur l’article publié.
Vérification avant publication
Confirmation de la publication

Désormais, vous avez publié votre premier article avec Gutenberg.

Et maintenant ?

Haut de page

Cet article a pour but de présenter quelques principes de base de Gutenberg.
Si vous êtes curieux, vous pouvez désormais découvrir par vous même  toute la richesse de Gutenberg qui a été conçu pour être intuitif.

Pour ma part, je commence aujourd’hui une (longue) série d’articles visant à décrire le plus complètement que je pourrai Gutenberg : ses principes d’utilisation, les différents blocs fournis en standard, les paramètres associés aux blocs….

Dans un premier temps, je vais me concentrer sur l’utilisation de Gutenberg par un rédacteur de site. Aucune connaissance en informatique ne sera nécessaire, il n’y aura pas de développement informatique.

Par ailleurs, je remplacerai progressivement les articles décrivant le fonctionnement de l’éditeur classique par des articles montrant comment rédiger avec Gutenberg.

Ensuite, viendra le temps d’aider les développeurs à créer leurs propres blocs ou modifier le fonctionnement de blocs existants.


Articles présentant Gutenberg :

Haut de page