Prévu en 2018 pour la sortie officielle de la version 5.0 de WordPress, Gutenberg entend révolutionner l’édition de texte enrichi en introduisant le concept de blocks. Ce dernier sera capable de créer des mises en page de contenu grâce à l’utilisation de blocs dynamiques. Ce nouveau système se substituera alors aux shortcodes, widgets et autres fonctionnalités qui étaient proposés par la barre d’outils TinyMCE. Cependant, ce changement radical de l’interface utilisateur HTML peut engendrer certaines incompréhensions de la part des internautes. En effet, l’éditeur open source WYSIWYG TinyMCE remplissait à merveille son rôle d’éditeur textuel et certaines interrogations planent sur l’efficacité et l’adaptabilité de ce nouvel éditeur, qui devra sans doute faire ses preuves.
Les premiers pas
Gutenberg sera automatiquement intégré à toute nouvelle installation de WordPress à partir de la version 5.0. Cependant, il est actuellement disponible en version beta dans la bibliothèque de plugins WordPress afin de permettre aux utilisateurs une première prise en main. Voici ce à quoi ressemblera son interface :
Derrière son design épuré, Gutenberg souhaite repenser l’ajout de contenu enrichi et rendre plus simple et plus agréable l’expérience utilisateur. Mais est-ce le cas ? En voulant se rapprocher d’un page builder, commet-il l’erreur de dénaturer son mode de fonctionnement ?
Wordpress entame sa transition technologique en se reposant sur le concept de bloc comme une nouvelle manière de faire de l’édition. Pour bien comprendre de quoi il en retourne, on peut imaginer que les blocs de contenus sont les édifices d’un site internet. On peut ajouter, déplacer ou supprimer autant de blocs que l’on veut afin de construire la structure souhaitée.
Découverte de l’éditeur visuel Gutenberg
Pour mieux appréhender l’outil, nous allons découvrir les principales fonctionnalités qui sont présentes dans l’interface d’utilisation. Tout d’abord, quatre options sont visibles dans le coin supérieur gauche de Gutenberg :
– Le bouton « + » constitue le socle de base de Gutenberg, c’est l’ajout de blocs. Lorsque l’on clique dessus, voici ce qui apparaît :
Il est possible de rechercher un bloc directement dans une barre dédiée à cet effet. Par ailleurs, les blocs les plus utilisés apparaissent en premier (paragraphe, image, titre, galerie etc.) dans le menu des blocs. Ainsi, le fait de décomposer chaque fonction comme entité bloc permet de structurer une page en un sous ensemble de blocs.
À la suite des blocs les plus utilisés, les blocs sont répartis dans 5 catégories distinctes : Blocs communs (citation, son, image de couverture, titre, paragraphe etc.) ; Formattage (code, html personnalisé, tableau etc.) ; Éléments de mise en page (bouton, colonnes, en savoir plus, saut de page, espacement etc.) ; Widgets (code court, catégories, derniers contenus) ; et Inserts (Youtube, Facebook, Instagram, Twitter etc.).
- La flèche tournée vers la gauche permet d’annuler une action tandis que la flèche tournée vers la droite permet de rétablir une action.
- Le « i » affiche les informations relatives à la structure du contenu :
Dans le coin supérieur droite, 5 actions sont réalisables :
- Enregistrer le brouillon (permet de sauvegarder notre page dans WordPress sans qu’elle soit visible aux internautes) ;
- Prévisualiser : permet d’afficher le rendu HTML d’une page afin d’avoir un aperçu de son affichage final ;
- Publication : permet de mettre en ligne une page ou un article sur son site web ;
- L’engrenage permet d’afficher les réglages du document et des blocs ;
- L’option « En savoir plus » représenté par trois points permet de choisir l’éditeur (visuel ou HTML) et d’accéder à certaines options d’outils et de réglages :
Au milieu, se trouve le terrain de jeu de l’éditeur Gutenberg. Il est possible d’ajouter, de déplacer et de supprimer des blocs afin d’obtenir la nomenclature que l’on souhaite pour sa page ou son article web.
Le titre constitue le premier bloc de l’éditeur. Il est suivi par la galerie (ensemble d’images). La gestion de blocs dynamiques permet de concevoir une page en se concentrant davantage sur l’aspect visuel et la nomenclature de la page.
La partie située à droite intègre un menu contenant une catégorie « Document » et une catégorie « Bloc » : la catégorie « Document » se substitue au menu précédent de WordPress en reprenant ses grands principes tout en modifiant sensiblement le design (avec notamment les catégories, les étiquettes ou l’état et la visibilité de notre page) tandis que la catégorie « Bloc » permet d’entrer dans les caractéristiques d’un bloc afin de changer certaines de ses propriétés.
Voici une vidéo un peu plus technique qui présente sous un angle différent le fonctionnement de Gutenberg :
En savoir plus :
