Juillet 2018, Gutenberg, le nouvel éditeur de WordPress, fait son apparition sur le CMS. WordPress en est encore à sa version 4.9 lorsque ses utilisateurs sont invités à télécharger et tester l’éditeur WordPress sous sa version plugin. Avec un nom emprunté à l’inventeur de l’imprimerie, l’éditeur Gutenberg est une solution intuitive basée sur l’édition de blocs visant à remplacer définitivement l’éditeur WYSYG dit « classique » du CMS. Gutenberg, aujourd’hui installé dans le cœur de WordPress, se présente comme un éditeur intuitif, flexible et en constante évolution qui laissera sans doute très loin dans peu de temps, les autres éditeurs et créateurs de site internet du marché.
Depuis WordPress 5.0, l’éditeur Gutenberg est installé nativement sur le CMS. L’utilisation de l’éditeur classique WYSIG reste bien sûr possible à condition d’installer la version plugin « Classic Editor », mais nous allons voir qu’il ne sert plus à grand-chose d’aller à contre-courant de l’évolution de WordPress.
Avant d’entrer dans le détail de l’édition avec Gutenberg sur WordPress, je vous propose de faire le tour du propriétaire de la version 14 de l’éditeur désormais natif de WordPress.
Premier aperçu de Gutenberg, une interface multitâches
L’écran de l’éditeur Gutenberg de WordPress présente trois zones d’action que nous pourrons utiliser pour structurer le document en cours édition, pour paramétrer l’interface elle-même, et bien sûr pour ajouter et utiliser les blocs de contenus à la page ou l’article.
La barre supérieure de Gutenberg
La barre supérieure horizontale de l’éditeur WordPress est divisée en deux groupes, le groupe des blocs d’édition et le groupe de paramètres.
Les outils d’édition de l’éditeur de WordPress
À gauche, Gutenberg nous propose des outils liés à l’édition à proprement parler.
Au survol de la souris, un bouton « + » bleu nous permet de rechercher et d’ajouter des blocs d’éléments au document (nous allons revenir sur la notion de blocs dans cet article).
Une icône de « stylo » révèle une liste déroulante permettant de choisir entre l’outil d’édition (le stylo) et l’outil de sélection (la flèche).
L’outil d’édition permet d’ajouter du contenu ou de modifier les paramètres du bloc sélectionné alors que l’outil de sélection permet de déplacer manuellement les blocs au sein de l’éditeur Gutenberg de WordPress à l’aide de la souris.
Les deux boutons suivants marqués de symboles de flèches (gauche et droite) permettent d’annuler la dernière action ou de la rétablir. Elles correspondent au « Ctrl Z » et « Ctrl Y » sur PC ou « Cmd Z » et « Cmd Y » sur Mac.
Le bouton « i » vous donne des informations sur le document courant. Il affiche une fenêtre présentant le nombre de caractères, de mots, de titres, de paragraphes et de blocs utilisés, ainsi que la structure du document en cours de création.
Le bouton de menu mobile incliné permet d’afficher un menu de navigation et de sélection rapide pour retrouver les blocs utilisés dans la page. Il est très utile pour atteindre facilement les blocs à éditer, notamment en cas d’utilisation de groupes de blocs ou de blocs imbriqués.
Les outils de gestion du document
La partie droite de la barre supérieure de l’éditeur Gutenberg présente trois boutons de gestion de la page ou de l’article en cours d’édition, leur libellé est assez parlant.
L’utilisateur WordPress a donc la possibilité d’enregistrer son travail dans la base de données de WordPress sans pour autant le publier, se laissant ainsi la possibilité de créer une page ou un article en plusieurs étapes.
Le bouton « Prévisualiser » de Gutenberg offre la possibilité de tester le document au format mobile, tablette ou ordinateur de bureau avant de le publier ou d’en modifier les styles pour en améliorer l’affichage sur les différents supports.
Le bouton « Publier » est assez simple, mais il ne devrait sans doute pas être utilisé avant que l’utilisateur ait pris le temps de paramétrer les blocs de réglage de l’onglet « Article » de la barre latérale et notamment les blocs « État de visibilité » et « Permalien » (nous y reviendrons dans la suite de cet article).
Le bouton présentant une icône d’engrenage permet d’afficher et de masquer cette même barre de réglages latérale pour un confort d’édition visuelle optimal.
Les outils et préférences de l’éditeur Gutenberg
Le menu à points horizontaux à l’extrême droite de la barre supérieure va nous permettre d’afficher ou de masquer des réglages et des outils propres à Gutenberg de WordPress et des raccourcis vers les réglages de plugins complémentaires.
Ce menu se décompose en cinq sections verticales :
La section « Vue »
La section « Vue » propose un outil « Barre d’outils supérieure » permettant de fixer la barre d’outils (dite de contrôle) de tous les blocs en cours d’édition en haut du document. Cette barre, habituellement située immédiatement au-dessus du bloc édité dans la page, propose des outils correspondant à l’édition de contenu du bloc tels que l’alignement, l’orientation horizontale, la mise en gras ou en italique, la gestion des liens, la suppression du bloc, etc.
Le second outil de la section « vue » appelé la « mise en lumière » permet de griser légèrement les blocs, excepté celui qui est en cours d’édition.
Enfin, le « mode plein écran » permettra de masquer la barre de menu de l’espace d’administration de WordPress, permettant d’accéder à tout ce qui ne relève pas de l’édition de contenu.
La section « Éditeur »
La section « Éditeur » permet de passer du mode d’éditeur au mode éditeur de code. La conception même de Gutenberg reposant sur le code sous-jacent inclut automatiquement lors de l’édition de chaque bloc, il est vivement déconseillé de modifier directement le rendu HTML sous peine de générer des erreurs et des messages d’alerte. Cet outil sera néanmoins très intéressant pour définir nous-mêmes des paternes de composition réutilisables, basés sur nos propres intégrations.
La section « Extensions » proposera des liens d’accès directs vers les barres de réglages propres à des plugins ou des thèmes externes.
La section « Outils »
Cette section propose à l’utilisateur de Gutenberg quatre liens d’accès rapide et un outil.
« Gérer les outils réutilisables » donne accès à un écran d’administration WordPress permettant de créer et de gérer des blocs qui seront disponibles sur l’ensemble du site. Il peut s’agir de blocs simples ou de compositions complexes, et leur gestion sera identique à celle des articles ou des pages de WordPress.
La section « Outils » propose aussi un accès à la liste de raccourcis clavier disponible sur Gutenberg ainsi qu’un lien permettant d’ouvrir le guide d’utilisation rudimentaire (dit guide de bienvenue) de l’éditeur Gutenberg, un lien vers une aide en ligne externe.
Enfin l’outil « Copier tout le contenu » fait exactement ce qu’il décrit, vous laissant ainsi la possibilité de collé le contenu là où bon vous semble à l’aide de « Crtl + V » ou « Cmd + v » en fonction de votre système (PC ou mac)
La section « Préférences »
Les préférences de Gutenberg vous permettront de paramétrer les blocs d’interface de l’éditeur Gutenberg, de choisir les blocs disponibles et de choisir les blocs affichés dans le panneau de l’article ou de la page.
La barre latérale de Gutenberg
La barre latérale de Gutenberg a elle aussi été revisitée. Là où celle de l’éditeur classique de WordPress proposait exclusivement des outils liés à l’article (ou la page) et ses métadonnées, la barre latérale de l’éditeur de WordPress propose désormais deux onglets : le panneau « article » ou « page » (en fonction. De ce que vous êtes en train d’éditer), et l’onglet « bloc » qui proposera un jeu d’options et de paramètres différents en fonction du bloc édité.
L’onglet article/page de la barre latérale de Gutenberg
L’onglet « article » (ou « page ») présente une actualisation des champs déjà présents sur la version précédente de l’éditeur de WordPress, nous y trouvons donc :
- Les réglages de visibilité (public, privé ou protégé par mot de passe)
- Les réglages de la date de publication souhaitée
- Le statut d’article à la une (pour les articles) ou en attente de relecture
- L’assignation de l’auteur
- Les réglages de catégories et d’étiquettes (pour les articles de blog)
- L’image mise en avant (image à la une)
- Le réglage de l’extrait
- Les réglages des commentaires
L’onglet Bloc ou le panneau d’édition des blocs de Gutenberg
L’onglet « bloc » est une zone contextuelle de réglages avancés liés au bloc sélectionné ou en en cours d’édition. Les paramètres présentés sur ce panneau dépendront donc des attributs modifiables du bloc à éditer.
De façon non exhaustive, on pourra donc y trouver :
- Les paramètres de taille et de couleur du texte et de fond de blocs
- Les styles des boutons
- Les réglages d’images et de galeries
- Les paramètres et l’orientation des menus
- Les réglages de catégories de listes dynamiques d’articles
- Des paramètres de champs de formulaires
- Tous les paramètres proposés par le bloc en cours d’édition
- Etc.
Tout cela est très simple d’utilisation et répond finalement aux objectifs du passage de WordPress à l’éditeur Gutenberg : pouvoir proposer à l’utilisateur WordPress la possibilité de modifier lui-même le style et le contenu des blocs (statiques ou dynamiques) en un même endroit sur le site.
La bonne nouvelle est ici que les paramètres de l’ensemble des blocs se trouveront dans cette même zone de l’éditeur (la barre latérale).
Seuls les outils d’édition de contenu (comme l’orientation, l’alignement, le gras ou l’italique, les liens, etc.) ou le choix et la modification des images restent positionnés au niveau même du bloc en cours d’édition.
La zone de mise en page et d’édition des blocs Gutenberg de WordPress
La partie centrale de l’écran d’édition de Gutenberg contient les blocs de mise en forme et de contenu inclus au document par l’utilisateur. Bien sûr cette partie est vide à la création d’une page ou d’un article sur WordPress, à l’exception du cas où un modèle de mise en page est associé à un type de contenu (post, page ou custom post type). Nous reviendrons sur le concept de modèle de mise en page dans un prochain article dédié au développement pour Gutenberg.
Notons tout de même que l’écran d’édition n’est pas totalement vide lors de la création de la page ou de l’article. En effet, sont présents dans la page le champ du titre principal du document ainsi qu’un bloc de paragraphe initial afin de nous permettre de rédiger notre premier contenu ou de choisir un bloc à intégrer (plus de détail sur le sujet un peu plus bas dans cet article).
Premier champ, le titre de la page
L’utilisateur débutant sur WordPress pourra mieux appréhender la présence par défaut du champ de titre de la page avec un bref rappel de son rôle dans un document HTML. En effet, une page web ou un article est avant tout une structure de contenu hiérarchisé dont le titre principal (headline) est numéroté 1 sur une échelle allant de 1 à 6.
Outre le fait que ce titre permet de différencier les documents enregistrés sur le site, le titre principal de la page joue un rôle primordial dans la conception d’un document web, tant pour sa lisibilité que pour son référencement sur les moteurs de recherche. Une fois le document enregistré, WordPress se chargera de convertir le contenu de ce champ en balise « h1 » dans le document HTML final.
Un bloc de paragraphe, deux fonctions en une
Le premier bloc de paragraphe pourra bien sûr servir à créer un premier contenu dans le document, quitte à transformer ensuite le bloc en titre, en liste ou en tout autre bloc éligible à la transformation d’un paragraphe. Notons que lorsqu’on explore les possibilités de transformation, l’éditeur Gutenberg nous propose, au survol de la souris, un aperçu du résultat de la transformation obtenue.
La fonctionnalité du bloc de paragraphe ne s’arrête pas là puisqu’en tapant un slash (« / ») comme premier caractère de ce bloc, l’éditeur Gutenberg ouvre un champ de recherche accompagné d’une liste de sélection dont le contenu varie en fonction des premières lettres du bloc recherché. Cet outil est très pratique et évite d’avoir à cliquer sur le l’un des boutons « + » sous le bloc même ou au niveau de la barre supérieure.
Un bouton de recherche et d’ajout de nouveaux blocs
L’écran d’édition de Gutenberg propose deux boutons « + » permettant d’ajouter des blocs à la page. Le premier, noir, puis bleu au survol est situé immédiatement après le dernier bloc présent dans la page et/ouy au survol des blocs présents. Ce bouton n’est accessible que lorsqu’aucun bloc n’est sélectionné pour l’édition.
Le second, comme nous l’avons vu, est situé dans la barre supérieure de Gutenberg sur WordPress et permet d’avoir un aperçu plus complet des blocs disponibles sur le site.
Nous venons de survoler les principales zones d’interactions de Gutenberg, mais avant de pousser plus avant notre exploration de l’interface de WordPress, nous devons nous intéresser au concept de bloc pour comprendre son fonctionnement.
Gutenberg, un éditeur basé sur les blocs
Nous devons donc maintenant approfondir la question des blocs pour prendre la mesure de la puissance de l’éditeur Gutenberg de WordPress, ce que sont les blocs et quels blocs sont désormais nativement disponibles sur le CMS.
Commençons donc par définir ce que sont les blocs de Gutenberg et par examiner leur organisation dans l’éditeur.
Rappel : qu’est-ce qu’un bloc Gutenberg ?
Le nouvel éditeur de WordPress est développé avec React, librairie JavaScript créée par Facebook destinée à faciliter la création d’interfaces utilisateurs.
Un bloc Gutenberg est une donc interface permettant à l’utilisateur WordPress d’intégrer des contenus simples, comme des titres, des paragraphes, des citations ou des listes, mais aussi des contenus plus complexes comme des bannières, des formulaires, des appels de contenus dynamiques ou bien encore des compositions de mises en page de tout ou partie du document.
Chaque bloc va proposer une série d’entrées, de paramètres, d’options et de styles à modifier, pouvant prendre la forme de sélecteurs, de champs numériques, de cases à cocher, de pipette de couleur, etc. Ces paramètres permettent aux utilisateurs WordPress d’enregistrer leurs propres modifications afin que WordPress puisse restituer leurs choix sous forme d’éléments HTML et ce, sans qu’ils n’aient à entrer la moindre ligne de code.
Voilà pourquoi l’utilisateur de Gutenberg manipule des blocs au lieu de travailler directement avec des éléments HTML et CSS.
Les blocs étant les éléments centraux de l’éditeur Gutenberg, on comprend maintenant mieux pourquoi tout est fait pour faciliter la recherche, le choix et l’intégration (l’ajout) de ces blocs sur l’interface. La première aide fournie en ce sens à l’utilisateur WordPress est sans aucun doute le classement des blocs en catégories facilement accessibles.
Les catégories de blocs Gutenberg
Le bouton bleu « + », situé en haut à gauche de l’éditeur, permet d’accéder à un outil d’insertion affichant la liste catégorisée des blocs disponibles.
WordPress propose nativement un certain nombre de blocs que l’utilisateur WordPress pourra étendre à l’aide des très nombreux plugins, gratuits ou payants, proposés par la communauté.
On trouve six (6) grandes catégories initiales de blocs Gutenberg permettant de construire des contenus sur le site WordPress :
· Les blocs de texte
La catégorie « Texte » permet d’insérer des titres, paragraphes, des listes et des tableaux, ainsi que des citations ou des bouts de codes au sein de la page.
· Les blocs médias
La catégorie « Média » permettra de choisir des images, des vidéos, des galeries, des fichiers textes ou audio.
· Les blocs de design
La catégorie « Design » permet à l’utilisateur WordPress de formater des contenus dans la page à l’aide de lignes, de colonnes et de séparateurs, mais aussi d’insérer des blocs interactifs tels qu’un bouton ou un groupe de boutons.
· Les blocs widgets
La catégorie « Widgets » permet d’afficher dans la page tous les éléments habituellement trouvés dans la barre latérale : champs de recherche, liste d’articles et de catégories, icônes de réseaux sociaux, nuage de mots clés, des formulaires de newsletter ou d’envoi d’email, etc.
· Les blocs de thème
La catégorie de blocs « Thème » est une réelle avancée proposée par l’éditeur Gutenberg de WordPress vers une plus grande flexibilité d’intégration des contenus globaux et des différents modèles de pages du site. Ce type d’intégration est appelée le full site editing.
On retrouvera donc dans cette section des blocs permettant de créer et d’insérer le logo ou la description du site, les menus de navigation, des présentations préformatées de contenus dynamiques (idéales pour les sections de blog, ou autres portfolios), ou encore des blocs liés au contenu à éditer comme l’image à la une, l’extrait de l’article, la date de publication, etc.
Plus de détail sur le full site editing à la fin de cet article.
· Les blocs de contenu embarqué
La catégorie des « contenus embarqués » de Gutenberg permet quant à elle de trouver et d’intégrer sur WordPress des contenus provenant d’autres plateformes telles que YouTube ou Dailymotion, Soundcloud, Flirck, Instagram, Pinterest, TikTok, Facebook, Twitter, etc.
La bonne nouvelle est que l’éditeur Gutenberg propose un certain nombre d’outils, de boutons et de raccourcis permettant de trouver et d’insérer rapidement n’importe que bloc en l’appelant par son nom ou sa catégorie. Nous voyons ça juste après dans cet article.
L’édition des blocs Gutenberg sur WordPress
Ajouter un bloc à une page ou un article
Nous l’avons vu plus haut dans cet article, l’éditeur Gutenberg offre plusieurs accès rapides pour ajouter un bloc à la page.
Un certain nombre de boutons « + » ouvrant un outil d’insertion ou un popup de recherche et de sélection de blocs sont affichés un peu partout sur la page d’édition et un raccourci utilisé sur le bloc par défaut de paragraphe permet lui aussi d’effectuer une recherche rapide :
- Le bouton de l’outil d’insertion de blocs est situé dans la barre supérieure de l’éditeur (bouton bleu).
Depuis cet outil d’insertion, le survol de chaque bloc affichera un aperçu de son rendu dans la page, et un simple clic permettra de l’ajouter là où le curseur était positionné sur la page. - Les boutons noirs « Ajouter un bloc » situés juste en dessous de chaque bloc déjà présent dans la page (le bouton noir apparaît au survol des blocs) ou au niveau d’un paragraphe vide permettent d’afficher un popup de recherche (par nom ou par catégorie) ainsi que les six derniers types de blocs récemment utilisés. Ce popup présente d’ailleurs lui aussi un bouton d’accès à l’outil général d’insertion de blocs.
- Enfin, il suffira d’insérer un slash « / » directement dans le champ de paragraphe vide et de taper la première lettre du nom du bloc recherché ou de sa catégorie pour afficher la liste des blocs disponibles.
Entrez par exemple « /twi » pour accéder rapidement au bloc de contenu embarqué Twitter 😉.
Éditer les blocs avec l’éditeur de WordPress
Chaque bloc de l’éditeur Gutenberg possède deux (2) niveaux d’édition : la barre dite d’outils ou de contrôles, située juste au-dessus du bloc sélectionné, et la barre latérale, aussi appelée « l’inspecteur », affichant les options de personnalisation du bloc.
La barre d’outils des blocs Gutenberg
La barre d’outils d’un bloc se décompose en 3.
La partie gauche présente un ou deux boutons de transformation du bloc.
À l’extrême gauche se situe un bouton d’accès au bloc parent, présent si le bloc sélectionné est imbriqué au sein d’un bloc conteneur (par exemple au sein d’un groupe ou d’une colonne) et permettant de remonter jusqu’au premier bloc transformable dans cette hiérarchie.
Le second bouton permet de transformer directement le bloc sélectionné en un autre type de bloc et/ou de déplacer le bloc au sein de son parent (un autre bloc conteneur ou la page elle-même). Les types disponibles dépendent du type du bloc courant (pour exemple, vous ne pourrez pas remplacer un bloc de paragraphe en appel dynamique d’archives à la base de données).
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
La partie centrale correspond à des outils d’édition du contenu du bloc sélectionné. Un paragraphe disposera des outils de :
- Mise en gras
- Italique
- Création d’un lien hypertexte
- Exposant
- Texte barré
Alors qu’une image présentera des outils tels que :
- Alignement
- Insérer un lien
- Recadrage
- Légende
- Application d’un duotone
- Bouton de remplacement de l’image proprement dite
À l’extrême droite de la barre d’outils, un menu à point horizontal (dit « d’options ») présente les options de réglages bloc en question. On y trouve des actions de base telles que :
- Copier le bloc
- Dupliquer le bloc
- Verrouiller le bloc
- Retirer le bloc
Mais ce menu propose aussi des fonctions d’édition plus avancées permettant de :
- Grouper le bloc et ses blocs descendants
- Ajouter aux blocs réutilisables
- Sélectionner le bloc parent
- Modifier en HTML (toutefois déconseillé)
Le panneau des blocs en barre latérale
La sélection d’un bloc Gutenberg permet donc d’afficher un panneau de paramètres et de styles liés au bloc lui-même. Là encore, les options disponibles dépendent du type de bloc en cours d’édition.
Ici le bloc de paragraphe dispose d’options de réglage de couleur et de typographie, dont les interfaces, accessibles via un nouveau menu à point, permettent non seulement de définir les couleurs et taille du texte, mais aussi de choisir sa casse, son espacement ou encore de lui créer une lettrine.
Chaque bloc dispose enfin de ses propres champs d’ID (son ancre) et de classe additionnelle, permettant aux plus utilisateurs plus avancés de travailler directement sur les CSS de leur site.
Nous allons maintenant passer en revue les actions de base à exécuter sur les blocs de l’éditeur Gutenberg de WordPress avant de nous intéresser plus avant à l’inspecteur et aux paramètres et options des blocs.
Retrouver et sélectionner un bloc conteneur ou un bloc enfant
Si la sélection d’un bloc simple peut sembler évidente, il n’en est pas forcément de même des blocs imbriqués. Il n’est pas rare de vouloir éditer le conteneur d’un élément de n’accéder qu’à un bloc enfant, et vice-versa.
Dans ces conditions, est es nécessaire de pouvoir de trouver rapidement le bon niveau de bloc à éditeur dans la structure du document. Gutenberg nous propose pour cela deux outils simples pour atteindre notre objectif :
- L’outil « Vue en liste » de la barre supérieure nous permet d’afficher la structure arborescente de la page ou de l’article et présente les sections, sous-sections et blocs imbriqués à la manière d’un répertoire. Le survol à l’aide de la souri de chaque élément de la liste génère l’affiche d’une bordure autour de l’élément correspondant de l’éditeur, nous facilitant ainsi la sélection du bloc à éditer.
- Enfin, nous l’avons vu plus haut, la barre d’outils d’un bloc sélectionné proposera systématiquement un bouton à l’extrême gauche, permettant de remonter au niveau du bloc parent tant qu’un parent existe.
Déplacer rapidement les blocs
Gutenberg nous offre à nouveau deux outils différents pour déplacer un bloc dans la page ou au sein de son conteneur.
- D’une part, un clic sur l’icône stylo de la barre supérieure de l’éditeur permet de choisir un outil dit de « sélection » qui permettra aux utilisateurs WordPress de déplacer n’importe quel bloc là où il le souhaite dans la page.
- De l’autre, un bouton présentant une icône de doubles flèches verticales permet de déplacer le bloc sélectionné d’un niveau vers le haut ou vers le bas.
Transformer les blocs, les remplacer par un autre
Nous l’avons évoqué, plus haut dans l’article, le bouton à l’extrême gauche de la barre d’outils du bloc affiche une icône représentant type de bloc en cours d’édition si celui-ci ne possède pas de conteneur.
Si le bloc sélectionné est imbriqué dans un conteneur, ce bouton est lors placé en second dans sa barre d’outils.
Au passage de la souris, le titre du bouton s’affiche et précise « Modifier le type ou le style du bloc ». Un clic sur ce bouton permet alors de transformer le bloc en question par type de bloc éligible pour une transformation.
Dans l’exemple suivant, nous accédons à un paragraphe imbriqué pour ouvrir la liste des blocs disponibles pour une transformation.
Modifier les styles et options des blocs
L’espace dédié à la stylisation des blocs de Gutenberg est situé au sein de la barre latérale droite de l’éditeur, dans l’onglet « Bloc ». Les options disponibles pour le bloc s’affichent lorsque celui-ci est sélectionné.
Les blocs d’options de styles
Après sélection, l’onglet « Bloc » de la barre latérale affiche le type de bloc en cours d’édition, puis une première section d’options libellée « Styles ». Ce bloc permet ici de choisir deux versions différentes du style initial du bloc de tableau.
L’exemple ci-dessous nous montre les possibilités de personnalisation d’un bloc de tableau, mais bien sûr, ces options seront différentes en fonction du type de bloc – un bloc image proposer ici style « par défaut » ou « arrondis ».
Là encore, Gutenberg offre un aperçu du style au survol de la souris.
Les blocs de réglages
La section dite de réglages de la barre latérale de l’éditeur Gutenberg correspond à des options de structure ou de métadonnées.
Ici, les réglages du tableau proposeront d’afficher ou de masquer une section d’en-tête, de pied de page, ainsi que des cellules à largeur équivalente (dite fixe).
Les réglages d’une image proposeront quant à eux de définir le texte alternatif du média, de choisir sa taille initiale ou d’en redéfinir le ratio pour améliorer son intégration.
N.B. Certains blocs de Gutenberg tels que les boutons ne proposeront pas de réglages, cela est tout à fait normal.
Le bloc « couleur »
La section « couleur » est généralement affichée pour les blocs présentant un caractère typographique. Un bloc de texte, de liste, de citation ou un tableau proposera donc une section « couleur » alors qu’un bloc vidéo ou image n’en présentera pas.
La section couleur offre la possibilité de définir la couleur du texte ainsi que celle de l’arrière-plan du bloc sélectionné. Un clic sur l’une ou l’autre de ces options permet d’ouvrir dans l’éditeur Gutenberg un popup présentant une palette de couleur par défaut et un aperçu de la couleur actuelle si elle est définie.
Après avoir choisi une couleur de base, un clic sur l’aperçu permet d’ouvrir un « color picker », c’est-à-dire une palette interactive permettant de définir précisément et visuellement la couleur de son choix.
Le bloc avancé
La section « avancé » d’un bloc Gutenberg vous permet de définir son ancre (son identifiant dans le document), ains que des class CSS supplémentaires.
Les utilisateurs pourront ensuite passer par l’outil de personnalisation de thème de WordPress ou directement par un éditeur de code pour modifier ensuite les CSS du site à l’aide des sélecteurs d’ancre et de classe modifiés.
Supprimer les blocs
Supprimer un bloc est sans doute l’action la plus simple à réaliser sur Gutenberg, il suffit de cliquer sur le menu à points à l’extrême droite de la barre d’outils du bloc sélectionné, puis sur l’item « Retirer le bloc ».
En cas d’erreur, vous pourrez annuler la suppression du bloc avec un raccourci « Ctrl Z » ou « Cmd Z » habituel sur votre ordinateur préféré 😉.
Créer des blocs réutilisables
La création de blocs réutilisables avec l’éditeur Gutenberg permet de créer des blocs simples ou des groupes de blocs accessibles partout sur le site. L’avantage des blocs réutilisables est de permettre aux utilisateurs de bénéficier du même bloc, incluant les mêmes modifications en même temps pour chaque occurrence du bloc réutilisé.
Toujours via le menu à points de la barre d’outils du bloc, il suffit de cliquer sur « Ajouter aux blocs réutilisables » pour faire apparaître un popup servant à définir un nouveau nom pour ce bloc ou ce groupe de blocs.
Les utilisateurs WordPress pourront ensuite trouver ce bloc via les outils d’insertion ou recherche de blocs.
Ajouter des compositions à l’aide de Gutenberg
La profusion de blocs et de réglages proposés par l’éditeur peut sembler un peu dense pour l’utilisateur débutant. Les développeurs de l’éditeur Gutenberg de WordPress ont donc prévu la possibilité de choisir des blocs de mise en forme préformatés afin d’aider ces utilisateurs à créer des contenus complexes.
À côté de la liste catégorisée des bloc Gutenberg, l’utilisateur trouvera aussi un onglet « Compositions » listant les blocs de présentation complexes disponibles.
On y trouve pêle-mêle des en-têtes, des lignes média/texte, des mises en page complètes, des présentations de portfolio, des zones de boutons d’interaction, etc.
Le gros avantage avec ces blocs complexes est que l’utilisateur pourra créer des sections ou des pages à l’aide de modèles préformatés, tout en ayant la possibilité de modifier le moindre sous module de la composition choisie.
Si le nombre de compositions disponibles n’est initialement pas très élevé, une recherche parmi les plugins gratuits ou payants pourra là encore permettre de trouver des paternes correspondant à chaque besoin.
Notons aussi que WordPress a introduit depuis sa version 5.8 un mécanisme de déclaration de styles et de paramètres permettant aux utilisateurs, en autre, de déclarer des compositions personnalisées (des paternes) au sein d’un fichier theme.json et d’enregistrer ces compositions directement dans le répertoire du thème courant.
Les utilisateurs WordPress les plus avancés pourront donc créer leurs propres compositions réutilisables, les autres pourront demander cette petite prestation à leur développeur ou leur webmaster favori 😉.
Étendre Gutenberg
WordPress dispose depuis toujours d’un système de plugins et d’API permettant d’étendre ses fonctionnalités ou ses options de stylisation.
Ces solutions peuvent être gratuites ou payantes, téléchargeables depuis de site de WordPress, depuis la page des extensions de l’interface d’administration du site à créer, ou développé par un développeur indépendant.
Les plugins disponibles
Pour rappel, un plugin (une extension) créé spécifiquement pour le CMS peut être gratuit ou payant, voire développé par votre développeur ou votre webmaster pour répondre à des besoins précis.
Les plugins gratuits
En septembre 2022, le site de WordPress propose 60 104 plugins téléchargeables gratuitement.
Nombre de ces plugins permettent d’ajouter de nouveaux blocs de structure, d’éléments HTML, de composition, de contenu ou de mise en forme ou plus simplement de nouvelles options aux blocs existants.
Nous ne pouvons bien évidemment pas passer en revue chaque plugin disponible pour l’éditeur Gutenberg, mais une simple recherche sur cette thématique vous permettra d’accéder à une centaine d’extensions disponibles pour Gutenberg.
Les plugins payants
Il n’est pas rare qu’une extension gratuite sur le site de WordPress en propose une version payante (souvent appelée « pro »).
Attention, un plugin gratuit présente souvent une limite aux fonctionnalités disponibles afin de proposer dans ce cas une version payant de l’extension. C’est notamment le cas pour les plugins tels que :
Le tarif d’une version payante ou « pro » d’un plugin d’extension de Gutenberg varie de 40 à 150 € par an. Ces plugins payants peuvent aussi être proposés à l’achat sur le site des éditeurs ou les marketplaces habituels.
Le développement pour Gutenberg
L’éditeur Gutenberg, comme le reste du code source de WordPress est basé sur un code open source, donc accessible aux développeurs et webmasters indépendants. Cela permettra à votre prestataire de créer ou d’étendre pour vous des blocs, des compositions, des modèles ou des options de stylisation qui pourront correspondre à vos besoins spécifiques.
Chaque développement personnalisé pour l’éditeur Gutenberg pourra ainsi être installé sur le site à l’aide d’un plugin « fait maison » afin de vous permettre de continuer de l’utiliser, quels que soient le thème ou les changements de thèmes de votre site web.
Enfin, depuis la version 5.8, WordPress offre aux utilisateurs WordPress et aux développeurs une nouvelle méthode de personnalisation de thème venant s’ajouter à l’utilisation de la méthode PHP « add_theme_support » au sein du fichier functions.php du thème courant.
Cette méthode consiste en la création d’un fichier unique theme.json permettant au thème d’interagir avec l’éditeur Gutenberg.
Via ce fichier theme.json, on pourra par exemple définir une nouvelle palette de couleurs par défaut, enregistrer des compositions personnalisées, définir des polices de caractères, des tailles ainsi que des hauteurs de lignes pour le corps et les titres du document, activer les dutones et les dégradés, définir des valeurs de marges internes et externes, limiter les blacks disponibles, etc.
Nous reviendrons dans un prochain article sur les possibilités qu’offrent les méthodes de personnalisation de thème pour Gutenberg.
Évolutions de Gutenberg, WordPress sur la voix du tout Gutenberg
Depuis le 15 septembre 2022, la version 14.1 de Gutenberg est disponible en téléchargement sur la page des extensions de WordPress.
La version 5.9 du 25 janvier 2022 a vu l’arrivée du full site editing sur WordPress, correspondant à l’édition des templates de pages et autres modèles de contenu du site via les blocs de l’éditeur Gutenberg. La dernière section de notre article est donc naturellement consacrée à cette avancée.
Gutenberg, vers le full site editing
La question qui revient souvent à propos de l’éditeur Gutenberg est de savoir s’il est ou deviendra un page builder (constructeur de page). Une réponse à cette question pourra sans doute être trouvée à travers l’utilisation de Gutenberg et son rôle joué dans la direction prise par WordPress vers le full site editing.
L’objectif premier de Gutenberg étant de faciliter l’édition des pages et des articles d’un site par l’utilisateur lui-même, il est tout à fait normal que l’interface repose sur le concept de blocs, déjà largement utilisé par la plupart des constructeurs de pages tels que Divi, Visual Composer ou Elementor.
Néanmoins, si l’objectif du passage à Gutenberg est de suffisamment simplifier l’édition pour offrir une expérience utilisateur intuitive et proche du front-office, le nouvel éditeur de WordPress ne peut être uniquement considéré comme un page builder, et si de nombreuses extensions tendent à rapprocher l’éditeur des constructeurs du marché, sa tendance à devenir l’éditeur par défaut de la totalité du site, des zones d’administration aux modèles de contenus, fait de Gutenberg une solution bien plus étendue qu’un simple constructeur visuel de pages.
Une interface dédiée au full site editing
Je vous propose donc maintenant un aperçu de l’interface de l’éditeur de thème de WordPress. Ce sujet dépasse quelque peu la portée de notre article sur Gutenberg et fera très prochainement l’objet d’un nouvel article à part entière. Mais l’interface full site editing de WordPress étant essentiellement basée sur Gutenberg, un résumé de ses possibilités semble tout de même très pertinent pour clore notre article.
Un nouvel environnement de création de thème en mode beta
L’éditeur de thème de WordPress 6.0.2 est toujours en mode de tests (mode beta), ce qui signifie ce mode de création de site ne sera standardisé que dans quelques mois. Néanmoins, le système d’édition de thème WordPress basé sur Gutenberg nous propose d’ores et déjà une expérience utilisateur elle aussi totalement basée sur les blocs.
L’éditeur de thème de WordPress permet de créer et de modifier des modèles globaux (des templates) de sections ou de pages statiques et dynamiques, de contenus customisés, des styles de blocs globaux, des blocs de thèmes ou encore des blocs d’appels de données.
Les modèles utilisés par initialement par WordPress sont conservés, mais leur particularité est de pouvoir être édités à l’aide de Gutenberg pour être ensuite assignés ou utilisés en fonction du contexte des requêtes.
Les modèles de l’éditeur pourront donc correspondre à des pages, des pages dites « vierges », des articles individuels, des pages d’archives de blog ou de contenus spécialisés, des pages de résultats de recherche et d’erreur 404, sans oublier le modèle d’index, bien connu des développeurs WordPress pour afficher la page générique du blog interne.
Bien sûr l’éditeur de thème permet là aussi d’éditer au niveau global les blocs de thèmes templates (aussi appelés « éléments de modèles ») utilisés dans les modèles du thème et chaque bloc de Gutenberg pourra, dans cette zone de l’éditeur, être paramétré au niveau global, donc pour l’ensemble du site. Le système d’édition globale basé sur Gutenberg remplace ainsi l’outil de personnalisation des thèmes de WordPress. Comme il remplace l’espace d’édition des menus et widget du CMS.
Des blocs dédiés au full site editing, mais pas que 😉
On retrouve donc dans l’environnement du full site editing de l’éditeur Gutenberg toute une série de blocs destinés à créer, à construire de toute pièce les modèles des pages du site. Parmi ces templates on va bien sûr trouver :
- Les blocs « header » et le « footer » (en-tête et pied de page) du site
- Le titre du site
- Le bloc de menu de navigation
- Le logo
- La description du site (le « slogan »).
On pourra aussi utiliser les blocs dits « dynamiques » pour créer chaque template et chaque section du modèle à éditer, par exemple :
- Des blocs d’archives (d’articles ou de contenus spécialisés) appelés « boucle de requête », très utiles pour créer une section dynamique au sein d’une page
- Les blocs de catégories présentes sur le site (idem)
- Des blocs de métadonnées (auteur, catégories, étiquettes, date, etc.) que l’on retrouve généralement sur les pages individuelles d’articles
- La description de l’auteur – sa biographie (idem)
- Le bloc dit de « thumbnail », l’image principale d’un article
- Des blocs de commentaires pour afficher les commentaires publiés ainsi qu’un formulaire
- Le contenu même de la publication
- L’extrait de la publication (pour les boucles de requêtes)
- Etc.
Cet environnement WordPress de full site editing, entièrement basé sur Gutenberg permet donc, non seulement d’utiliser des blocs dédiés à la structure même du site, mais aussi d’utiliser les blocs courants afin d’enrichir les modèles utilisés par le thème et/ou de modifier le design même de certains de ces modèles. On pourra ainsi utiliser au sein des templates de thème des blocs tels que les contenus embarqués ou les blocs de réseaux sociaux, des blocs séparateurs, des boutons, etc.
À noter aussi que l’environnement de full site editing de WordPress permet désormais de créer un template de page d’accueil directement, c’est à dire sans passer par la création d’une page dédiée pour l’accueil du site.
Enfin, le nouvel éditeur de WordPress permet désormais de définir des mises en pages et des styles dits « globaux », pour l’ensemble des blocs du site, allant des paramètres de la typographie et des palettes de couleurs jusqu’aux préréglages de styles de tous les blocs de l’éditeur Gutenberg : boutons, colonnes, groupes, séparateurs, texte, bannière, etc.
Cette section sur le full site editing n’est bien sûr qu’un aperçu des possibilités offertes par Gutenberg et WordPress, mais nous reviendrons dessus en détail dès la stabilisation su système sur le CMS.
WordPress et Gutenberg, une histoire à suivre et à écrire
Le système full site editing de WordPress en est encore à une version Beta et nombre de blocs et d’API sont en constante évolution, cela prend du temps, et tout cela peut ne pas rassurer les futurs utilisateurs et avoir tendance à faire râler les développeurs… et c’est est bien normal 😉.
Mais le passage de WordPress à un système tout Gutenberg, principalement basé sur React et autres librairies Javascript, marque sans doute une série de changements sans retour possible. Cette orientation offre au CMS des avantages en termes de gains de performance et d’amélioration d’expérience utilisateur qui risquent fort d’accentuer la distance prise par le CMS déjà leader du marché, sur ses lointains concurrents.
En attendant, sachez que les versions successives de Gutenberg et de WordPress restent compatibles avec la totalité des constructeurs visuels de pages du marché tels que Divi ou Elementor (certains d’entre eux proposent même des blocs d’intégration de leurs propres modules). Nombre de « thèmes basés sur les blocs » dit « full site editing » sont de plus d’ores et déjà proposés en téléchargement sur la page des thèmes WordPress, et la cohabitation des différents éditeurs sur le CMS sera assurée encore longtemps afin de permettre aux utilisateurs de s’approprier en douceur ce nouvel univers de création de site internet.