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 :
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 :
La page que nous allons faire évoluer contient du texte, des images, des listes et une galerie de photos :
Convertir le contenu en blocs
- Cliquer à l’intérieur du bloc Classique,
- cliquer sur les trois points horizontaux apparaissant en haut et à droite du bloc Classique,
- Cliquer sur l’option Convertir en blocs.
Le contenu est alors éclaté en blocs : Titres, Paragraphes, Images, Listes….
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.
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 :
La liste s’intègre 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.
- Cliquer sur l’image puis cliquer avec le bouton droit,
- cliquer sur l’option Couper,
- cliquer dans la colonne cible puis cliquer avec le bouton droit,
- cliquer sur l’option Coller.
Désormais l’image est à droite de la liste comme dans la mise en page avec l’éditeur Classique :
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.
- Cliquer sur les trois points verticaux en haut et à droite de la page,
- cliquer sur Éditeur de code,
- copier la liste des identifiants d’images (sélection avec la souris puis CTRL+C ou « Copier » dans le menu après clic droit),
- revenir à l’Éditeur visuel,
- insérer un bloc Code court,
- 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.
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 :
Il suffit ensuite de retirer le bloc Galerie :
- cliquer dans le bloc Galerie puis sur les trois points verticaux,
- 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.
- Dans l’administration, survoler le menu Extensions avec la souris puis cliquer sur le choix Ajouter,
- dans le champ de recherche, saisir Duplicate post,
- choisir parmi les extensions proposées
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 :
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 :
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 :
