Convertir en blocs Gutenberg

Convertir une édition classique en blocs Gutenberg

Transformer une publication créée avec l’éditeur classique en publication gérée en blocs par le nouvel éditeur Gutenberg nécessite juste un peu de méthode et de temps.

C’est la solution lorsqu’on souhaite modifier un ancien article rédigé avec l’éditeur classique, tout en évoluant vers Gutenberg qui devient L’éditeur WordPress.

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

Ouvrir une édition classique dans Gutenberg

A partir de la version 5-0 de WordPress, les publications  s’ouvrent dans le nouvel éditeur Gutenberg, sauf si vous avez installé l’extension Classic editor ou équivalent.

Par exemple, ouvrons une page éditée avec l’ancien éditeur en cliquant sur le lien Modifier dans la liste des pages :

Cliquer sur l’option Modifier de la page qu’on veut Gutenberg-iser.

Tout le contenu de la page est inséré dans un  bloc particulier, le bloc Classique. WordPress le signale dans le bandeau en haut du bloc, et si on clique dans ledit bloc, dans la colonne d’information située à droite :

Nom du bloc dans le bandeau haut
Information sur le bloc

La page que nous allons faire évoluer contient du texte, des images, des listes et une galerie de photos :

Différents éléments à éclater en blocs

Convertir le contenu en blocs

  1. Cliquer à l’intérieur du bloc Classique,
  2. cliquer sur les trois points horizontaux apparaissant en haut et à droite du bloc Classique,
  3.  Cliquer sur l’option Convertir en blocs.
Lancer l’éclatement en blocs

Le contenu est alors éclaté en blocs : Titres, Paragraphes, Images, Listes….

Éclatement en blocs, notamment un bloc Liste

Finaliser la mise en page

La mise en page obtenue peut être différente de celle initiale. Ainsi, dans la page initiale, la photo se situait à droite de la liste.
Pour ce type de mise en page avec Gutenberg, il faut insérer un bloc Colonne :

  • cliquer le bouton Ajouter un bloc en haut et au centre du bloc au dessus duquel on va insérer le bloc Colonnes (ici au dessus du bloc Liste),
  • cliquer sur l’icône du bloc Colonnes.
Cliquer sur le bouton d’ajout de bloc
Choisir le bloc Colonnes

Déplacer le bloc Liste

Réaliser un glisser / déposer depuis le bloc Liste vers le bloc Colonnes :

  • Cliquer sur la poignée apparaissant à gauche du bloc quand on le survole,
  • conserver le bouton appuyé et déplacer la souris jusqu’à la colonne cible,
  • relâcher la souris  :
Cliquer sur la poignée de glisser / disposer
Déposer le bloc Liste dans la colonne cible

La liste s’intègre dans le bloc Colonnes :

Le bloc Liste inséré dans le bloc Colonnes

Recopier la photo

La photo est insérée dans le bloc Titre. Nous allons la couper / coller dans le bloc Colonne.

  1. Cliquer sur l’image puis cliquer avec le bouton droit,
  2. cliquer sur l’option Couper,
  3. cliquer dans la colonne cible puis cliquer avec le bouton droit,
  4. cliquer sur l’option Coller.
Couper la photo
Coller la photo

Désormais l’image est à droite de la liste comme dans la mise en page avec l’éditeur Classique :

Mise en pages en colonne

Insérez des codes courts

La galerie d’images était en fait un diaporama réalisé grâce à l’extension Jetpack.
Si Jetpack est activé, il est toujours capable d’afficher le diaporama, mais rien dans l’interface utilisateur de Gutenberg ne permet de transformer la galerie Gutenberg en diaporama. On peut s’attendre à ce que Jetpack nous propose bientôt un bloc diaporama.

Heureusement, Jetpack gère un type de code qu’on appelle un Code court pour indiquer qu’il faut ajouter un diaporama et non une galerie simple.
Voici le type de code à ajouter :

gallery type=”slideshow” ids="liste des identifiants des images du diaporama"

Nous pouvons retrouver la liste des identifiants des images du diaporama. Celle-ci est visible dans l’éditeur de code, dans la définition du bloc Galerie.

  1. Cliquer sur les trois points verticaux en haut et à droite de la page,
  2. cliquer sur Éditeur de code,
  3. copier la liste des identifiants d’images (sélection avec la souris puis CTRL+C ou « Copier » dans le menu après clic droit),
  4. revenir à l’Éditeur visuel,
  5. insérer un bloc Code court,
  6. Saisir le Code court du diaporama en copiant la liste des identifiants d’images récupérés dans la définition de la galerie.
Sélectionner l’éditeur de code
Récupérer la liste des identifiants d’images
Revenir à l’éditeur visuel
Sélectionner le bloc Code court

Insertion du Code court correspondant à l’affichage du diaporama

En cliquant sur le bouton Prévisualiser, on vérifie que le diaporama s’affiche pour les visiteurs du site :

Le diaporama est visible par les visiteurs du site.

Il suffit ensuite de retirer le bloc Galerie :

  1. cliquer dans le bloc Galerie puis sur les trois points verticaux,
  2. cliquer sur l’option Retirer le bloc.

Travailler sur une copie de la publication

Il est préférable de mettre au point la mise en page sur une copie de l’article ou de la page, et non sur la version initiale de la publication, car cela permet de :

  • visualiser à tout moment la mise en page initiale,
  • travailler en plusieurs fois et ne publier que quand la mise en page satisfait pleinement,
  • récupérer des portions de publication qu’on aurait malencontreusement modifiées ou perdues,
  • récupérer les Codes courts,
  • au pire, reprendre toute la mise en page, mais sans réécrire la publication.

Ajouter une extension de duplication

Plusieurs extensions sont disponibles pour dupliquer des publications.

  1. Dans l’administration, survoler le menu Extensions avec la souris puis cliquer sur le choix Ajouter,
  2. dans le champ de recherche, saisir Duplicate post,
  3. choisir parmi les extensions proposées
Choisir une extension parmi celles proposées dans le répertoire officiel

Mettre en page la publication dupliquée

La mise en page s’effectue suivant les principes décrits précédemment.
On peut simplifier le travail, par exemple en récupérant  les Codes courts dans l’éditeur de code de la publication initiale et les recopier dans la publication dupliquée, au lieu d’essayer des les reconstituer :

Copier les Codes courts dans le code de la publication initiale

Recopier la duplication dans la publication initiale

Nous pourrions publier la publication dupliquée et supprimer la publication  initiale. Mais si la publication initiale avait été référencée par des moteurs de recherche, cette référence est perdue.

Personnellement je préfère passer par l’Éditeur de code en copiant tout le code dans la duplication puis en le recopiant, toujours via l’éditeur de code, dans la publication initiale :

CTRL+A puis CTRL+C pour copier le code de la page Gutenbergisée

Toutes ces opérations peuvent paraître longues et délicates. En réalité, dès qu’on s’habitue à manipuler Gutenberg, cela va  vite.
Une fois la publication passée en mode Gutenberg, on peut profiter des possibilités nouvelles qu’il offre pour faire évoluer les mises en page.
Il faut comprendre que Gutenberg n’en est qu’à ses débuts et qu’il va profiter de tout l’investissement des équipes de développement du noyau WordPress et des efforts de toute la communauté pour continuellement s’améliorer.


Articles présentant Gutenberg :

Haut de page