Gutenberg - la Bible de l'utilisateur

Gutenberg est le nouvel éditeur par défaut de WordPress. Avec une nouvelle interface et de nouveaux outils, il n'a strictement rien à voir avec l'éditeur classique auquel nous étions tous habitué. Voyons comment en tirer le meilleur parti.

Cet article prend 15 minutes à lire et comporte 3684 mots.

Vous avez déjà entendu parler de Gutenberg ? Mais non, pas le vieux monsieur à longue barbe des livres d’Histoire ! L’outil de compo­si­tion par défaut de WordPress !

Au vu des réac­tions susci­tées par son inté­gra­tion au cœur de WordPress, je suppose que oui. Aimé par les uns, haï par les autres, il ne laisse pas vrai­ment indifférent.

Tout le monde n’est pas convaincu de son utilité, et beau­coup refusent tout simple­ment de l’uti­li­ser, que ce soit pour ne pas chan­ger ses habi­tudes, ou parce qu’ils ne retrouvent pas les fonc­tion­na­li­tés dont ils ont besoin. Il n’y a qu’a voir l’en­goue­ment pour l’ex­ten­sion « clas­sic Editor », active sur plus de 3 millions de sites.

Mais vu qu’il est désor­mais l’édi­teur par défaut, autant apprendre à s’en servir et à en tirer le meilleur parti.

Cet article n’est pas une ode à Gutenberg, pas plus qu’un billet assas­sin, et l’on ne revien­dra ni sur les origines du nom ni sur celles du projet. J’ai déjà donné dans l’hu­meur dans l’ar­ticle Ghost – Une alter­na­tive à WordPress ? et pour les origines, vous les trou­ve­rez dans l’ar­ticle J’ai essayé Gutenberg. Aujourd’hui, nous allons juste décou­vrir plus en détail cet éditeur et voir comment l’uti­li­ser au mieux.

Vous verrez, les capa­ci­tés par défaut de Gutenberg sont plus qu’in­té­res­santes. J’ai moi-même décou­vert en le rédi­geant des blocs que je n’avais pas remar­qués, et même si la mise en page de certaines sections de cet article ne sont pas des plus heureuses, elles montrent la puis­sance et la flexi­bi­lité de l’outil.

Et au fur et à mesure de mes décou­vertes, ou des évolu­tions de Gutenberg, je ne manque­rai pas de mettre cet article à jour. 

C’est d’ailleurs une des raisons qui devraient vous inci­ter à vous abon­ner
– et c’est promis, je n’en­ver­rai jamais de lettre à des fins publicitaires.

[newsletter_signup_form id=1]

Je n’abor­de­rai pas dans cet article les exten­sions éten­dant les capa­ci­tés de l’édi­teur via l’ajout de nouveaux blocs : dans le vaste monde des exten­sions WordPress, certaines durent, d’autre pas.

Chaque exten­sion utile aura son petit article, histoire de flat­ter son ego et de ne pas atteindre le mien avec un article obso­lète avant même sa publication 😉

Par contre, j’ai posé la ques­tion au support, si en acti­vant l’ex­ten­sion Gutenberg dans WordPress 5.x, on utili­sait l’ex­ten­sion ou la version inté­grée dans le cœur de WordPress.

La réponse est que c’est l’ex­ten­sion qui prend le dessus, permet­tant ainsi de béné­fi­cier des dernières mises à jour de Gutenberg, sans attendre la version suivante de WordPress.

When the plugin is instal­led, it is what will be used over the core version. This is to ensure you get all the new features that get tested via the plugin before they are relea­sed in core 🙂

Marius L. J. (@clorith)

Si vous subis­sez des plan­tages inex­pli­qués lors de l’édi­tion, ou si vous voulez vous aussi profi­ter des dernières mises à jour, je vous recom­mande d’ins­tal­ler l’ex­ten­sion Gutenberg – c’est d’ailleurs ce que j’ai fait sur ce blog, ou plus exac­te­ment, sur tous mes sites propul­sés par WordPress.

Mais atten­tion ! Vous pouvez aussi remar­quer certains compor­te­ments « bizarres » en instal­lant Gutenberg (l’ex­ten­sion) dans WordPress 5.+ dont :

  • nombre de mots inopé­rant (1 mot, quel que soit le nombre réel)
  • bugs dans l’af­fi­chage de la liste des articles dans l’in­ter­face d’administration

La mani­pu­la­tion est donc à faire avec précaution.

Prise en main de Gutenberg

Que vous vouliez écrire un nouvel article ou mettre en ligne une nouvelle page, Gutenberg est l’in­ter­face par défaut, incon­tour­nable depuis WordPress 5.0, dans sa confi­gu­ra­tion d’origine.

Pour les besoins de cet article, je me suis servi d’une instal­la­tion vierge de WordPress (v. 5.0.3), sans exten­sion, sans rien d’autre que ce que nous offre l’ins­tal­la­tion par défaut.

Dès votre arri­vée dans l’in­ter­face d’édi­tion, vous êtes pris en main avec une série de quatre astuces qui vous serons présen­tées jusqu’à ce que vous en ayez fait le tour et cliqué sur J’ai compris.

Et main­te­nant, c’est à vous, vous êtes lâché comme un lion dans l’arène, à vous d’af­fron­ter Gutenberg !

Mais vous n’êtes pas seul. Découvrons ensemble…

L’interface de l’éditeur

C’est un écran dépouillé, presque vierge, qui s’offre à vous. Il n’y a que la barre d’ou­tils en haut de l’écran, la barre contex­tuelle, à droite, et les indi­ca­teurs des premières zones de saisie, pour le titre et le contenu.

Écran d'accueil de l'éditeur Gutenberg
Écran d’ac­cueil de l’édi­teur Gutenberg

Voyons point par point les éléments de cette inter­face. Pour commen­cer, intéressons-nous à…

La barre principale d’outils

La barre d’ou­tils en haut de l’écran permet de connaitre tout de l’état de votre publi­ca­tion, et d’ef­fec­tuer les actions essentielles.

Cette barre d’ou­tils comporte deux sections, une à gauche, une à droite.

Barre d'outils de Gutenberg
Barre d’ou­tils de Gutenberg

La section 1, à gauche, concerne l’édi­tion du docu­ment en cours. La section 2, à droite, sert prin­ci­pa­le­ment pour enre­gis­trer le docu­ment, et pour les actions non usuelles.

Section de gauche

Blocs Gutenberg - vue par défaut
Blocs Gutenberg – vue par défaut
Blocs Gutenberg - box fermée
Blocs Gutenberg – box fermée

le bouton [icon name=« plus-circle  »] donne accès aux diffé­rents types de blocs, où qu’il soit situé dans l’édi­teur, et l’in­sère à la suite du bloc courant (celui où votre curseur est posi­tionné). Si vous cher­chez un bloc parti­cu­lier, vous pouvez fermer les onglets internes avec le chevron [icon name=« chevron-down »] ou effec­tuer une recherche dans le champ texte.

Gutenberg - Bloc option de bloc
Gutenberg – Bloc option de bloc

Vous remar­que­rez aussi que lors de la créa­tion d’un nouveau bloc, vous avez trois petites icones sur la droite, en fait, les trois types de bloc les plus utilisés.

Les flèches vers la gauche et vers la droite permettent d’an­nu­ler ou de refaire une action (précé­dem­ment annulée).

Aperçu du document
Aperçu du document

Quant au bouton [icon name=« info-circle  »] il permet de tout savoir du docu­ment en cours : le nombre de mots, de titres, de para­graphes et de blocs, plus une table des matières permet­tant une navi­ga­tion rapide au sein du document.

Intéressant quant on est dans un docu­ment rela­ti­ve­ment long (et bien struc­turé), pour reve­nir à un para­graphe précé­dent par exemple, puis pour retour­ner en fin de docu­ment sans scrol­ler à vue avec la souris.

Pour visua­li­ser le travail rédac­tion­nel accom­pli. Ou pour connaître le nombre de mots, quant on a par exemple une ligne à suivre : pas moins de / pas plus x mots.

Le bouton suivant, [icon name=« bars »] permet la navi­ga­tion dans les blocs. Mais vu que les blocs se nomment quasi­ment tous para­graphe, ce n’est pas – à mon avis – très intui­tif. Mais ce « navi­ga­teur » peut se révé­ler utile pour retrou­ver une gale­rie par exemple.

Section de droite

À droite, vous avez tous les outils pour l’en­re­gis­tre­ment (Enregistrer le brouillon et Publier ou Mettre à jour), l’icone [icon name=« cog »] pour passer en vue large (utile pour la saisie au kilo­mètre, sans mise en forme parti­cu­lière) et l’icone [icon name=« ellipsis‑v »] pour accé­der aux fonc­tions avan­cées. Nous revien­drons sur les fonc­tions avan­cées plus tard dans l’article.

À noter le compor­te­ment par défaut de Gutenberg pour la publi­ca­tion : il vous demande si vous voulez vrai­ment publier l’ar­ticle, ce qui évite les mises en lignes intem­pes­tives dues à une erreur de manipulation.

La barre latérale contextuelle

Barre contextuelle - Onglet Bloc
Barre contex­tuelle – Onglet Bloc
Barre latérale - Onglet Document
Barre laté­rale – Onglet Document

Dans cette barre laté­rale, vous trou­ve­rez en perma­nence deux onglets : Document et Bloc. Si l’on­glet Bloc peut être vide (quand il n’y a pas de bloc sélec­tionné) l’on­glet Document, lui, contient en perma­nence les infor­ma­tions rela­tive… au docu­ment en cours.

Vous retrou­vez dans cet onglet (Document) l’es­sen­tiel des fonc­tion­na­li­tés présentes dans la barre laté­rale de l’édi­teur clas­sique, et certains éléments aupa­ra­vant placés en-dessus ou en-dessous du docu­ment en cours d’édi­tion, comme par exemple le perma­lien ou l’ex­trait. Vous pouvez égale­ment y trou­ver des options de réglage pour le thème (concer­nant la page en cours), mais ce n’est pas une géné­ra­lité. Ces éléments peuvent aussi se trou­ver en dessous de la zone de rédac­tion du document.

Dans l’on­glet Bloc, vous trou­ve­rez l’en­semble des infor­ma­tions rela­tive au bloc en cours d’uti­li­sa­tion. Dans la capture d’écran ci-contre, vous avez un bloc Paragraphe, avec le réglage des couleurs de texte et de fond, la taille de la police ou encore l’ap­pa­rence de la première lettre, qui peut être une lettrine.

Nous verrons ulté­rieu­re­ment comment gérer certains éléments de cette barre contex­tuelle, à travers des exemples simples – le but de l’ar­ticle n’étant pas d’ap­prendre à déve­lop­per pour Gutenberg, mais d’ap­prendre à l’uti­li­ser de manière optimale.

Après avoir vu les fonc­tions de la barre de menu, ou barre haute, et le fonc­tion­ne­ment de la barre laté­rale contex­tuelle, nous allons nous inté­res­ser aux diffé­rents types de blocs que Gutenberg propose par défaut.

Le mode Mise en lumière

Gutenberg est doté d’un mode « sans distrac­tion », acces­sible depuis l’el­lipse verti­cale [icon name=« ellipsis‑v »] tout en haut à droite de l’édi­teur, appelé mode Mise en lumière.

En l’ac­ti­vant, vous aurez le focus sur un seul bloc, celui sur lequel vous travaillez :

Gutenberg - la Bible de l'utilisateur

Je ne l’uti­lise pas, mais vous y trou­ve­rez éven­tuel­le­ment un intérêt.

Les blocs de l’éditeur

Vous avez déjà eu un aperçu (très) rapide des blocs propo­sés, dans le « chapitre » précé­dent (La barre prin­ci­pale d’ou­tils / Section de gauche).

Gutenberg - la Bible de l'utilisateur
Menu flot­tant – Éléments récurrents

Tous les blocs ont un menu flot­tant, avec deux éléments systé­ma­ti­que­ment présents : le module de dépla­ce­ment à gauche, externe au bloc, et l’icône [icon name=« ellipsis‑v »] tout à droite. Bon nombre d’entre eux ont égale­ment l’icône [icon name=« para­graph »] (pour les blocs de type texte, éven­tuel­le­ment remplacé par un icône diffé­rent, lié au type de contenu) situé à gauche, pour pouvoir bascu­ler d’un type de bloc à un autre.

Les trois blocs essen­tiels sont Titre, Paragraphe et Image. Ce sont d’ailleurs ceux que vous trou­ve­rez le plus souvent à droite d’un nouveau bloc (vierge donc) dont le contenu n’a pas été défini.

Chaque bloc (ou du moins, la plupart des blocs) a un ensemble de para­mètres prédé­fi­nis (para­mètres d’usine) dont certains peuvent être modi­fiés via la barre laté­rale contex­tuelle, à droite de la zone de saisie (voir la capture d’écran Barre contex­tuelle – Onglet Bloc).

Le bloc classique

Lorsque vous ouvrez pour la première fois un article précé­dem­ment rédigé avec l’an­cien éditeur, tout le contenu sera dans un bloc dit clas­sique :

Gutenberg - la Bible de l'utilisateur
Bloc Gutenberg « classique »

Il suffira de cliquer sur l’el­lipse verti­cale [icon name=« ellipsis‑v »] puis sur Convertir en blocs.

Gutenberg - la Bible de l'utilisateur
Convertir en bloc

Votre contenu soit auto­ma­ti­que­ment trans­posé sous forme de blocs Gutenberg natifs :

Gutenberg - la Bible de l'utilisateur
Blocs Gutenberg natifs

Les blocs de texte

Gutenberg - la Bible de l'utilisateur
Menu flot­tant du bloc Paragraphe

Ces blocs (Titre, Paragraphe, Liste, Citation…) béné­fi­cient d’un menu flot­tant, que vous pouvez « coller » dans la barre haute, à la suite des icônes à gauche. Cette mini barre d’ou­tils s’adapte en fonc­tion de la nature du bloc.

De plus, ces blocs sont « inter­chan­geables » dans leur nature, c’est à dire que vous commen­cez à saisir votre texte dans un bloc par défaut (Paragraphe) et vous déci­dez d’en faire un titre en cliquant sur l’icône [icon name=« para­graph »] (qui elle, est toujours présente à gauche du menu flot­tant) puis en sélec­tion­nant le nouveau type de bloc.

Le bloc Titre

Gutenberg limite l’uti­li­sa­tion des balises H, il ne descend pas jusqu’à H7 (qui n’existe de toute façon pas) mais unique­ment jusqu’à H4, lais­sant de côté les niveaux de titre 5 et 6 (toujours acces­sibles depuis la barre contex­tuelle). Parce qu’ils ne sont pas très utili­sés, et pas très utiles non plus dans un docu­ment courant.

Le bloc Paragraphe 

C’est le bloc par défaut de Gutenberg. Si vous appuyez sur la touche Entrée de votre clavier, un nouveau bloc para­graphe est créé, à la suite du bloc précé­dent, et ce, quel que soit son type.

Ce bloc semble manquer de corps par rapport aux fonc­tion­na­li­tés présentes dans la barre d’ou­tils de l’édi­teur clas­sique, auxquelles nous étions habi­tués. Mais honnê­te­ment, de quels éléments de mise en forme vous serviez-vous vrai­ment ? Pour la plupart d’entre nous, du gras, de l’ita­lique, de l’ali­gne­ment à droite ou centré (en plus de l’ali­gne­ment par défaut, bien sûr) et des liens.

Ceux qui utili­saient la justi­fi­ca­tion, le texte barré ou souli­gné ont été contraints d’aban­don­ner ces mises en forme ou d’ins­tal­ler et d’ac­ti­ver une exten­sion pour gérer à nouveau cette fonctionnalité.

En aparté, la justi­fi­ca­tion est une héré­sie créée pour les besoins de la presse écrite qui voulait une présen­ta­tion irré­pro­chable de ses colonnes. On s’est depuis aperçu que la lecture d’un texte aligné à gauche est plus aisée que la lecture d’un texte justifié.

Ce qui person­nel­le­ment me manque le plus, c’est l’icône Ω (oméga) qui servait à insé­rer un carac­tère que l’on ne trouve pas sur un clavier stan­dard : une lettre grecque (le Ω en l’occurrence), un set de guille­mets typo­gra­phiques à la fran­çaise, les graphèmes Æ, æ, Œ et œ que j’ai depuis trou­vés sur un clavier alter­na­tif, le clavier FrElrick. Que j’uti­lise dans WordPress bien sûr, mais aussi en dehors de WordPress !

Clavier FrElrick
Clavier FrElrick

Comme quoi, en cher­chant bien, on trouve toujours une solu­tion 🙂 dans ce cas préfé­rable à la fonc­tion­na­lité d’ori­gine. Ceci-dit, faut pas trop pous­ser, je veux bien qu’il n’y ait pas trop de place pour mettre une palan­quée d’icônes, mais quand même ! Laissez-nous en quelques uns !

Le bloc Liste

On ne choi­sit plus entre liste ordon­née et liste non ordon­née dès le départ, on crée une liste. On aura tout le temps de cliquer sur l’une des deux icônes du menu flot­tant pour faire ce choix ultérieurement.

Les blocs de mise en forme

Le bloc Citation

Le nouveau bloc cita­tion est prêt à l’emploi, avec un empla­ce­ment prévu par défaut pour rensei­gner la source (de la cita­tion). Agréable, surtout quand on se souvient du forma­tage des cita­tions dans l’édi­teur classique.

Gutenberg - la Bible de l'utilisateur

Ce bloc peut être trans­formé en Citation en exergue, qui donne plus de volume à la cita­tion, comme vous le voyez sur la capture d’écran suivante.

Gutenberg - la Bible de l'utilisateur
Citation en exergue – Vue dans l’édi­teur (thème Twenty Nineteen)

En aparté, je n’ai pas mis cette illus­tra­tion pour affi­cher une appar­te­nance à une reli­gion ou un mouve­ment quel­conque, j’ai juste cher­ché des cita­tions célèbres pour illus­trer l’ar­ticle, et celle-ci était en toute première page du site où je me suis rendu. Et, je ne le cache pas, je la trouve mignonne. Sans doute, dirait un psycha­na­lyste, une made­leine de Proust 😉

Le bloc Couplet

Il s’agit d’un bloc para­graphe un peu spécial, prévu pour mettre en valeur la poésie.
Contrairement au texte de para­graphe tradi­tion­nel, il laisse tous les espaces et les sauts de ligne intacts, en les affi­chant exac­te­ment tels que vous les entrez.

Le bloc Tableau

Pour mettre en ligne un tableau très extrê­me­ment basique, ce bloc suffira. Mais la mise en page en tableaux est un vrai casse-tête dès qu’on le veut respon­sive. Les solu­tions pour un tableau respon­sive sous WordPress méri­te­rait un article 😐 sauf que je n’ai pas vrai­ment trouvé la solu­tion idéale – ni dans le gratuit, ni dans le payant.

Les blocs d’images

Lorsque vous créez un bloc de type Image ou Galerie, Gutenberg met à votre dispo­si­tion un espace spécifique.

Gutenberg - la Bible de l'utilisateur
Ajouter une image ou une gale­rie, dans Gutenberg

Mais vous pouvez aussi glis­ser une image (ou plusieurs) direc­te­ment dans l’édi­teur, qui fera le reste en créant un bloc image ou gale­rie que vous n’au­rez plus qu’à ajuster.

Le place­ment des images corres­pond à ce que vous aviez l’ha­bi­tude d’avoir avec l’édi­teur clas­sique, avec en plus une présen­ta­tion grande largeur et une pleine largeur. À noter que tous les thèmes ne permettent pas d’uti­li­ser les deux derniers formats de manière opti­male, notam­ment lorsque vous affi­chez une barre laté­rale. Si vous souhai­tez béné­fi­cier de ces formats, effec­tuez des tests avant de vous décider.

Gutenberg - la Bible de l'utilisateur
Bloc Image centrée, classique

La grande largeur et la pleine largeur sont égale­ment dispo­nibles pour les gale­ries. Intéressant pour mettre en valeur vos photos, ou du moins certaines.

Le bloc Bannière

C’est un bloc image & texte en surim­pres­sion. Vous pouvez vous en servir pour un call to action simple par exemple. La barre d’ou­tils texte est simple, mais suffisante.

Gutenberg - la Bible de l'utilisateur
Bloc bannière centré

Vous pouvez le posi­tion­ner libre­ment, comme une image : centré, à gauche, à droite, en grande largeur ou en pleine largeur.

Gutenberg - la Bible de l'utilisateur
Bloc bannière pleine largeur (rendu dans l’éditeur)

Les blocs de mise en page

Le bloc Colonnes

Pour des colonnes (de deux à six) avec largeur clas­sique, grande largeur comme ici ou pleine largeur, avec du texte, des images, ou ce que vous avez envie de présen­ter en colonnes.

Par contre, il s’agit d’un bloc assez simple, sans mise en page parti­cu­lière. Et le passage d’une colonne à l’autre, c’est à vous de le faire 😉

Le bloc Espacement

Pour créer un espa­ce­ment visuel, un bloc vide, dont vous ne pouvez régler que la hauteur. Mais c’est le but recher­ché, non ?

Le bloc Saut de page

Sans options… mais quelles options pourrait-il accepter ?

Le bloc Lire la suite

C’est un bloc sans options, qui permet de sépa­rer le texte visible en « extrait auto­ma­tique » du reste de l’article.

Ce bloc est moins souple dans son utili­sa­tion que la balise Lire la suite de l’édi­teur clas­sique, que l’on pouvait placer au beau milieu d’un para­graphe, et qui était donc réel­le­ment invisible.

Le bloc Séparateur

Ce bloc insère une balise <hr />, qui produit une ligne horizontale.

Le bloc Média & Texte

La Bible de Gutenberg

Aux origines de l’im­pres­sion avec la Bible de Gutenberg. Le titre de cet article est aussi un clin d’œil à cet homme, qui révo­lu­tionna l’imprimerie.

Par NYC Wanderer (Kevin Eng) — publié à l’ori­gine sur Flickr sous le nom de Bible de Gutenberg, CC BY-SA 2.0

Vous pouvez régler la taille des carac­tères de « petit » à « Énorme », en fonc­tion de la quan­tité de contenu que vous voulez affi­cher dans le bloc à côté de votre image. Sur mobile, il sera certai­ne­ment préfé­rable d’empiler les deux parties du bloc pour une meilleure visibilité.

Gutenberg - la Bible de l'utilisateur

Mais vous pour­rez aussi inter­ver­tir les posi­tions du texte et de l’image, et jouer sur la taille du texte. Ici en pleine largeur, et le texte réglé sur Grand (Énorme dans l’exemple précé­dent). Ce bloc n’existe pas en largeur dite « normale ».

Les blocs Widgets

Les blocs widgets permettent d’in­sé­rer des widgets WordPress dans votre docu­ment. C’est une des fonc­tion­na­li­tés de Gutenberg qui n’a pas son équi­valent dans l’édi­teur classique.

Vous pour­rez insé­rer un code court, une listes des derniers articles ou des catégories.

La présen­ta­tion est simple, mais elle permet de présen­ter une liste de un (mais ce n’est plus une liste) à cent articles – mais je n’en ai pas autant sur mon blog 😐

Les blocs Contenus embarqués

Grâce au format oEmbed, vous pouvez embar­quer des dizaines de conte­nus multi­mé­dia dans vos articles : Twitter, Facebook, Instagram, WordPress bien sûr, mais aussi Spotify, Vimeo, Flickr… la liste est longue.

Voila pour la liste des blocs par défaut de Gutenberg. J’en ai peut-être oublié en rédi­geant cet article, n’hé­si­tez pas à me les mention­ner dans les commentaires.

Les fonctionnalités avancées de Gutenberg

Le drag and drop

À la gauche de chaque bloc, vous avez deux flèches, poin­tant vers le haut ou vers le bas, sépa­rées par une double ellipse : deux [icon name=« ellipsis‑h »] posi­tion­nés l’un sur l’autre. Vous pouvez n’avoir que la flèche du haut, ou unique­ment celle du bas, si vous êtes sur le premier ou le dernier bloc du document.

Les flèches [icon name=« chevron-up »] et [icon name=« chevron-down »] permettent de faire monter ou descendre le bloc, pour le placer avant ou après le bloc précé­dent ou suivant. La double ellipse permet de dépla­cer le bloc direc­te­ment à l’écran, pour le placer plusieurs blocs avant par exemple, ou pour le posi­tion­ner dans une autre colonne.

Le fonc­tion­ne­ment n’est pas le plus intui­tif que j’ai rencon­tré, mais une fois que vous l’avez compris, l’uti­li­ser devient un jeu d’enfant.

Le bloc réutilisable

Je ne l’ai pas présenté dans les blocs, vous allez vite comprendre pour­quoi. Ce bloc n’est pas un bloc de contenu à propre­ment parler, voici d’ailleurs la défi­ni­tion qu’en donne WordPress :

Créez du contenu et enregistrez-le pour vous ou pour d’autres contri­bu­trices et contri­bu­teurs afin de le réuti­li­ser ailleurs sur votre site, et appli­quer les modi­fi­ca­tions partout où il est utilisé. 

WordPress, in Gutenberg

Alors, qu’est ce qu’un bloc réuti­li­sable et comment s’en servir ?

Pour ceux qui ont déjà utilisé des construc­teurs de pages (Elementor, Beaver Builder, WPBakery Page Builder…), c’est ni plus ni moins qu’un modèle, réuti­li­sable tel quel ou après modi­fi­ca­tion, dans la tota­lité des pages et articles de votre site.

Pour le défi­nir, rendez-vous dans le menu flot­tant, cliquez sur [icon name=« ellipsis‑v »]. Vous allez trou­ver, tout en bas, Ajouter aux blocs réuti­li­sables. Cliquez, vous obte­nez ce type de boîte de dialogue :

Gutenberg - la Bible de l'utilisateur
Enregistrement d’un bloc réutilisable

Donnez lui un nom, enregistrez-le, et vous avez un bloc réutilisable.

Pour l’uti­li­ser à nouveau (c’est le but), vous trou­ve­rez un nouvel onglet dans le + qui sert à défi­nir le type de bloc à utili­ser. Nommé, il va de soi, Réutilisables. Au pluriel, même si vous n’en avez qu’un. Il suffit de le sélec­tion­ner, et le tour est joué.

Vous pouvez le réuti­li­ser tel quel, ou le trans­for­mer en bloc normal, sur place, pour en modi­fier le contenu. Vous devrez pour cela aller dans le menu, cliquer à nouveau sur [icon name=« ellipsis‑v »] puis sur Convertir en bloc Gutenberg normal.

C’est ce que je viens de faire avec mon encart pour vous inci­ter à vous abon­ner à la lettre d’in­for­ma­tion du blog. Je l’ai converti en bloc normal, et j’en ai modi­fié le texte. Retournez en haut de l’ar­ticle, si vous n’êtes pas convaincu ?

[newsletter_signup_form id=1]

Les extensions indispensables à Gutenberg

Gutenberg fonc­tionne bien, mais il est possible d’amé­lio­rer son fonc­tion­ne­ment grâce à quelques exten­sions. La première, c’est Disable Gutenberg Autosave. Parce que Gutenberg a la fausse bonne idée de déclen­cher des enre­gis­tre­ments auto­ma­tiques qui ralen­tissent voire bloquent toute autre opération.

La seconde, qui n’est pas indis­pen­sable, permet de retrou­ver certaines mises en forme, dont vous aurez (ou non) besoin. Il s’agit de Advanced Rich Text Tools for Gutenberg. Vous y gagne­rez le formatage du code, des textes en expo­sant et en indice ainsi que la colo­ra­tion du texte et de son arrière-plan. Même si ce n’est pas aussi propre qu’une balise <mark> c’est une aide simple pour surli­gner une portion de texte à mettre en avant.

Pour en finir avec les exten­sions « indis­pen­sables », pour retrou­ver une des fonc­tion­na­li­tés de WordPress suppri­mée avec l’ar­ri­vée de Gutenberg, l’ex­ten­sion Custom Fields for Gutenberg permet d’ajou­ter des champs person­na­li­sés à vos articles et pages.

En conclusion

Johannes Gutenberg a révo­lu­tionné l’im­pri­me­rie. Ce n’est pas le premier à avoir imprimé des livre, c’est le premier à les avoir mis sous presse avec des carac­tères mobile en plomb.

WordPress, qui fait des clins d’œil au Jazz en nommant chacune de ses versions majeures du nom d’un.e artiste reconnu.e, fait égale­ment des clins d’œil à l’Histoire : avant Gutenberg, il y a eu le Codex.

La révo­lu­tion Gutenberg est à nouveau d’ac­tua­lité, plus de 400 ans après l’in­ven­tion de l’im­pri­me­rie moderne. Autant être au rendez-vous, cette fois. J’espère juste vous avoir donné envie d’y parti­ci­per, et de vous avoir fourni les armes pour.

Et vous, êtes-vous passé à Gutenberg ? Avez-vous rencon­tré certaines diffi­cul­tés lors de l’adop­tion de cet éditeur ? Où votre expé­rience est-elle plutôt posi­tive ? J’attends votre histoire, vos réflexions, vos ques­tions dans les commentaires…

9 réflexions sur “Gutenberg - la Bible de l'utilisateur”

  1. Effectivement il y a des « détails » visuels qui ne sont pas repro­duits à l’iden­tique… mais les CSS sont là pour gérer ces détails. Rendez-vous dans l’ou­til de person­na­li­sa­tion de WordPress, cliquez sur l’on­glet CSS addi­tion­nel et appli­quez les règles nécessaires.

  2. Bonjour,
    Merci pour cet article très complet. En revanche j’ai un problème. Les articles écrits avec Gutenberg avec image loca­li­sée, Lettrine, retrait de para­graphe, bref format élaboré ne sont pas repro­duits à l’iden­tique dans une page Elementor et perdent toutes leurs « fioritures » .…..!!!!
    Y‑a-t-il une astuce ?
    Merci de votre réponse

  3. C’est surpre­nant. J’ai pris la capture d’écran sur un site vierge, une instal­la­tion toute fraîche. C’est une fonc­tion­na­lité par défaut, alors si vous ne l’avez pas, il y a deux causes possibles :

    • une incom­pa­ti­bi­lité avec le thème
    • un conflit avec une extension
  4. merci pour votre réponse

    Mais l’af­fi­chage dans la bannière juste modi­fier l’ali­gne­ment : aligner à gauche, centrer et aligner à droite pas option pleine largeur ?
    Monique

  5. Bonjour,
    Merci pour cet article, mais pour moi impos­sible de trou­ver l’op­tion pleine largeur pour la bannière. Pouvez vous me dire comment affi­cher cette option.
    Monique

Les commentaires sont fermés.

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris