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à enten­du par­ler de Gutenberg ? Mais non, pas le vieux mon­sieur à longue barbe des livres d’Histoire ! L’outil de com­po­si­tion par défaut de WordPress !

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

Tout le monde n’est pas convain­cu de son uti­li­té, et beau­coup refusent tout sim­ple­ment de l’u­ti­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 mil­lions de sites.

Mais vu qu’il est désor­mais l’é­di­teur par défaut, autant apprendre à s’en ser­vir 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 ori­gines du nom ni sur celles du pro­jet. J’ai déjà don­né dans l’hu­meur dans l’ar­ticle Ghost — Une alter­na­tive à WordPress ? et pour les ori­gines, 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 édi­teur et voir com­ment l’u­ti­li­ser au mieux.

Vous ver­rez, 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’a­vais pas remar­qués, et même si la mise en page de cer­taines sec­tions de cet article ne sont pas des plus heu­reuses, elles montrent la puis­sance et la flexi­bi­li­té de l’outil.

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

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

[newsletter_signup_form id=1]

Je n’a­bor­de­rai pas dans cet article les exten­sions éten­dant les capa­ci­tés de l’é­di­teur via l’a­jout de nou­veaux blocs : dans le vaste monde des exten­sions WordPress, cer­taines durent, d’autre pas.

Chaque exten­sion utile aura son petit article, his­toire 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 sup­port, si en acti­vant l’ex­ten­sion Gutenberg dans WordPress 5.x, on uti­li­sait l’ex­ten­sion ou la ver­sion inté­grée dans le cœur de WordPress.

La réponse est que c’est l’ex­ten­sion qui prend le des­sus, per­met­tant ain­si de béné­fi­cier des der­nières mises à jour de Gutenberg, sans attendre la ver­sion sui­vante de WordPress.

When the plu­gin is ins­tal­led, it is what will be used over the core ver­sion. This is to ensure you get all the new fea­tures that get tes­ted via the plu­gin 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 vou­lez vous aus­si pro­fi­ter des der­niè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 pro­pul­sés par WordPress.

Mais atten­tion ! Vous pou­vez aus­si remar­quer cer­tains com­por­te­ments « bizarres » en ins­tal­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 vou­liez écrire un nou­vel article ou mettre en ligne une nou­velle 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 ser­vi d’une ins­tal­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 jus­qu’à ce que vous en ayez fait le tour et cli­qué sur J’ai com­pris.

Et main­te­nant, c’est à vous, vous êtes lâché comme un lion dans l’a­rè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 pre­mières zones de sai­sie, 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 com­men­cer, inté­res­sons-nous à…

La barre principale d’outils

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

Cette barre d’ou­tils com­porte deux sec­tions, une à gauche, une à droite.

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

La sec­tion 1, à gauche, concerne l’é­di­tion du docu­ment en cours. La sec­tion 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 bou­ton donne accès aux dif­fé­rents types de blocs, où qu’il soit situé dans l’é­di­teur, et l’in­sère à la suite du bloc cou­rant (celui où votre cur­seur est posi­tion­né). Si vous cher­chez un bloc par­ti­cu­lier, vous pou­vez fer­mer les onglets internes avec le che­vron ou effec­tuer une recherche dans le champ texte.

Gutenberg - Bloc option de bloc
Gutenberg — Bloc option de bloc

Vous remar­que­rez aus­si que lors de la créa­tion d’un nou­veau 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 per­mettent 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 bou­ton il per­met 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 per­met­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­tu­ré), 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 tra­vail 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 bou­ton sui­vant, per­met la navi­ga­tion dans les blocs. Mais vu que les blocs se nomment qua­si­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’i­cone pour pas­ser en vue large (utile pour la sai­sie au kilo­mètre, sans mise en forme par­ti­cu­lière) et l’i­cone 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 com­por­te­ment par défaut de Gutenberg pour la publi­ca­tion : il vous demande si vous vou­lez 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 per­ma­nence deux onglets : Document et Bloc. Si l’on­glet Bloc peut être vide (quand il n’y a pas de bloc sélec­tion­né) l’on­glet Document, lui, contient en per­ma­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 cer­tains élé­ments aupa­ra­vant pla­cés en-des­sus ou en-des­sous du docu­ment en cours d’é­di­tion, comme par exemple le per­ma­lien ou l’ex­trait. Vous pou­vez éga­le­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­li­té. Ces élé­ments peuvent aus­si se trou­ver en des­sous 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’u­ti­li­sa­tion. Dans la cap­ture d’é­cran ci-contre, vous avez un bloc Paragraphe, avec le réglage des cou­leurs de texte et de fond, la taille de la police ou encore l’ap­pa­rence de la pre­mière lettre, qui peut être une lettrine.

Nous ver­rons ulté­rieu­re­ment com­ment gérer cer­tains élé­ments de cette barre contex­tuelle, à tra­vers 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’u­ti­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 dif­fé­rents types de blocs que Gutenberg pro­pose par défaut.

Le mode Mise en lumière

Gutenberg est doté d’un mode « sans dis­trac­tion », acces­sible depuis l’el­lipse ver­ti­cale tout en haut à droite de l’é­di­teur, appe­lé mode Mise en lumière.

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

Je ne l’u­ti­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 pro­po­sés, dans le « cha­pitre » pré­cé­dent (La barre prin­ci­pale d’ou­tils / Section de gauche).

Menu flot­tant — Éléments récurrents

Tous les blocs ont un menu flot­tant, avec deux élé­ments sys­té­ma­ti­que­ment pré­sents : le module de dépla­ce­ment à gauche, externe au bloc, et l’icône tout à droite. Bon nombre d’entre eux ont éga­le­ment l’icône (pour les blocs de type texte, éven­tuel­le­ment rem­pla­cé par un icône dif­fé­rent, lié au type de conte­nu) situé à gauche, pour pou­voir bas­cu­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 sou­vent à droite d’un nou­veau bloc (vierge donc) dont le conte­nu n’a pas été défini.

Chaque bloc (ou du moins, la plu­part des blocs) a un ensemble de para­mètres pré­dé­fi­nis (para­mètres d’u­sine) dont cer­tains peuvent être modi­fiés via la barre laté­rale contex­tuelle, à droite de la zone de sai­sie (voir la cap­ture d’é­cran Barre contex­tuelle – Onglet Bloc).

Le bloc classique

Lorsque vous ouvrez pour la pre­mière fois un article pré­cé­dem­ment rédi­gé avec l’an­cien édi­teur, tout le conte­nu sera dans un bloc dit clas­sique :

Bloc Gutenberg « classique »

Il suf­fi­ra de cli­quer sur l’el­lipse ver­ti­cale puis sur Convertir en blocs.

Convertir en bloc

Votre conte­nu soit auto­ma­ti­que­ment trans­po­sé sous forme de blocs Gutenberg natifs :

Blocs Gutenberg natifs

Les blocs de texte

Menu flot­tant du bloc Paragraphe

Ces blocs (Titre, Paragraphe, Liste, Citation…) béné­fi­cient d’un menu flot­tant, que vous pou­vez « col­ler » 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 com­men­cez à sai­sir votre texte dans un bloc par défaut (Paragraphe) et vous déci­dez d’en faire un titre en cli­quant sur l’i­cône (qui elle, est tou­jours pré­sente à gauche du menu flot­tant) puis en sélec­tion­nant le nou­veau type de bloc.

Le bloc Titre

Gutenberg limite l’u­ti­li­sa­tion des balises H, il ne des­cend pas jus­qu’à H7 (qui n’existe de toute façon pas) mais uni­que­ment jus­qu’à H4, lais­sant de côté les niveaux de titre 5 et 6 (tou­jours acces­sibles depuis la barre contex­tuelle). Parce qu’ils ne sont pas très uti­li­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 cla­vier, un nou­veau bloc para­graphe est créé, à la suite du bloc pré­cé­dent, et ce, quel que soit son type.

Ce bloc semble man­quer de corps par rap­port aux fonc­tion­na­li­tés pré­sentes dans la barre d’ou­tils de l’é­di­teur clas­sique, aux­quelles nous étions habi­tués. Mais hon­nê­te­ment, de quels élé­ments de mise en forme vous ser­viez-vous vrai­ment ? Pour la plu­part d’entre nous, du gras, de l’i­ta­lique, de l’a­li­gne­ment à droite ou cen­tré (en plus de l’a­li­gne­ment par défaut, bien sûr) et des liens.

Ceux qui uti­li­saient la jus­ti­fi­ca­tion, le texte bar­ré ou sou­li­gné ont été contraints d’a­ban­don­ner ces mises en forme ou d’ins­tal­ler et d’ac­ti­ver une exten­sion pour gérer à nou­veau cette fonctionnalité.

En apar­té, la jus­ti­fi­ca­tion est une héré­sie créée pour les besoins de la presse écrite qui vou­lait une pré­sen­ta­tion irré­pro­chable de ses colonnes. On s’est depuis aper­çu que la lec­ture d’un texte ali­gné à gauche est plus aisée que la lec­ture d’un texte justifié.

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

Clavier FrElrick
Clavier FrElrick

Comme quoi, en cher­chant bien, on trouve tou­jours une solu­tion 🙂 dans ce cas pré­fé­rable à la fonc­tion­na­li­té d’o­ri­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’i­cô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 cli­quer 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 nou­veau bloc cita­tion est prêt à l’emploi, avec un empla­ce­ment pré­vu par défaut pour ren­sei­gner la source (de la cita­tion). Agréable, sur­tout quand on se sou­vient du for­ma­tage des cita­tions dans l’é­di­teur classique.

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

Citation en exergue — Vue dans l’é­di­teur (thème Twenty Nineteen)

En apar­té, je n’ai pas mis cette illus­tra­tion pour affi­cher une appar­te­nance à une reli­gion ou un mou­ve­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 pre­mière page du site où je me suis ren­du. Et, je ne le cache pas, je la trouve mignonne. Sans doute, dirait un psy­cha­na­lyste, une made­leine de Proust 😉

Le bloc Couplet

Il s’a­git d’un bloc para­graphe un peu spé­cial, pré­vu pour mettre en valeur la poé­sie.
Contrairement au texte de para­graphe tra­di­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 suf­fi­ra. Mais la mise en page en tableaux est un vrai casse-tête dès qu’on le veut res­pon­sive. Les solu­tions pour un tableau res­pon­sive sous WordPress méri­te­rait un article 😐 sauf que je n’ai pas vrai­ment trou­vé la solu­tion idéale — ni dans le gra­tuit, ni dans le payant.

Les blocs d’images

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

Ajouter une image ou une gale­rie, dans Gutenberg

Mais vous pou­vez aus­si glis­ser une image (ou plu­sieurs) 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 pla­ce­ment des images cor­res­pond à ce que vous aviez l’ha­bi­tude d’a­voir avec l’é­di­teur clas­sique, avec en plus une pré­sen­ta­tion grande lar­geur et une pleine lar­geur. À noter que tous les thèmes ne per­mettent pas d’u­ti­li­ser les deux der­niers for­mats de manière opti­male, notam­ment lorsque vous affi­chez une barre laté­rale. Si vous sou­hai­tez béné­fi­cier de ces for­mats, effec­tuez des tests avant de vous décider.

Bloc Image cen­trée, classique

La grande lar­geur et la pleine lar­geur sont éga­le­ment dis­po­nibles pour les gale­ries. Intéressant pour mettre en valeur vos pho­tos, ou du moins certaines.

Le bloc Bannière

C’est un bloc image & texte en sur­im­pres­sion. Vous pou­vez vous en ser­vir pour un call to action simple par exemple. La barre d’ou­tils texte est simple, mais suffisante.

Bloc ban­nière centré

Vous pou­vez le posi­tion­ner libre­ment, comme une image : cen­tré, à gauche, à droite, en grande lar­geur ou en pleine largeur.

Bloc ban­nière pleine lar­geur (ren­du dans l’éditeur)

Les blocs de mise en page

Le bloc Colonnes

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

Par contre, il s’a­git d’un bloc assez simple, sans mise en page par­ti­cu­lière. Et le pas­sage 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 pou­vez régler que la hau­teur. Mais c’est le but recher­ché, non ?

Le bloc Saut de page

Sans options… mais quelles options pour­rait-il accepter ?

Le bloc Lire la suite

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

Ce bloc est moins souple dans son uti­li­sa­tion que la balise Lire la suite de l’é­di­teur clas­sique, que l’on pou­vait pla­cer 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 pro­duit une ligne horizontale.

Le bloc Média & Texte

La Bible de Gutenberg

Aux ori­gines de l’im­pres­sion avec la Bible de Gutenberg. Le titre de cet article est aus­si un clin d’œil à cet homme, qui révo­lu­tion­na l’imprimerie.

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

Vous pou­vez régler la taille des carac­tères de « petit » à « Énorme », en fonc­tion de la quan­ti­té de conte­nu que vous vou­lez affi­cher dans le bloc à côté de votre image. Sur mobile, il sera cer­tai­ne­ment pré­fé­rable d’empiler les deux par­ties du bloc pour une meilleure visibilité.

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

Les blocs Widgets

Les blocs wid­gets per­mettent d’in­sé­rer des wid­gets 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 der­niers articles ou des catégories.

La pré­sen­ta­tion est simple, mais elle per­met 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 for­mat oEmbed, vous pou­vez embar­quer des dizaines de conte­nus mul­ti­mé­dia dans vos articles : Twitter, Facebook, Instagram, WordPress bien sûr, mais aus­si 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 men­tion­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 posi­tion­nés l’un sur l’autre. Vous pou­vez n’a­voir que la flèche du haut, ou uni­que­ment celle du bas, si vous êtes sur le pre­mier ou le der­nier bloc du document.

Les flèches et per­mettent de faire mon­ter ou des­cendre le bloc, pour le pla­cer avant ou après le bloc pré­cé­dent ou sui­vant. La double ellipse per­met de dépla­cer le bloc direc­te­ment à l’é­cran, pour le pla­cer plu­sieurs 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 ren­con­tré, mais une fois que vous l’a­vez com­pris, l’u­ti­li­ser devient un jeu d’enfant.

Le bloc réutilisable

Je ne l’ai pas pré­sen­té dans les blocs, vous allez vite com­prendre pour­quoi. Ce bloc n’est pas un bloc de conte­nu à pro­pre­ment par­ler, voi­ci d’ailleurs la défi­ni­tion qu’en donne WordPress :

Créez du conte­nu et enre­gis­trez-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 par­tout où il est utilisé. 

WordPress, in Gutenberg

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

Pour ceux qui ont déjà uti­li­sé 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­li­té des pages et articles de votre site.

Pour le défi­nir, ren­dez-vous dans le menu flot­tant, cli­quez sur . 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 :

Enregistrement d’un bloc réutilisable

Donnez lui un nom, enre­gis­trez-le, et vous avez un bloc réutilisable.

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

Vous pou­vez le réuti­li­ser tel quel, ou le trans­for­mer en bloc nor­mal, sur place, pour en modi­fier le conte­nu. Vous devrez pour cela aller dans le menu, cli­quer à nou­veau sur puis sur Convertir en bloc Gutenberg nor­mal.

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 conver­ti en bloc nor­mal, 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 pos­sible d’a­mé­lio­rer son fonc­tion­ne­ment grâce à quelques exten­sions. La pre­miè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, per­met de retrou­ver cer­taines mises en forme, dont vous aurez (ou non) besoin. Il s’a­git de Advanced Rich Text Tools for Gutenberg. Vous y gagne­rez le formatage du code, des textes en expo­sant et en indice ain­si que la colo­ra­tion du texte et de son arrière-plan. Même si ce n’est pas aus­si propre qu’une balise <mark> c’est une aide simple pour sur­li­gner une por­tion 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 sup­pri­mée avec l’ar­ri­vée de Gutenberg, l’ex­ten­sion Custom Fields for Gutenberg per­met d’a­jou­ter des champs per­son­na­li­sés à vos articles et pages.

En conclusion

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

WordPress, qui fait des clins d’œil au Jazz en nom­mant cha­cune de ses ver­sions majeures du nom d’un.e artiste reconnu.e, fait éga­le­ment des clins d’œil à l’Histoire : avant Gutenberg, il y a eu le Codex.

La révo­lu­tion Gutenberg est à nou­veau d’ac­tua­li­té, plus de 400 ans après l’in­ven­tion de l’im­pri­me­rie moderne. Autant être au ren­dez-vous, cette fois. J’espère juste vous avoir don­né envie d’y par­ti­ci­per, et de vous avoir four­ni les armes pour.

Et vous, êtes-vous pas­sé à Gutenberg ? Avez-vous ren­con­tré cer­taines dif­fi­cul­tés lors de l’a­dop­tion de cet édi­teur ? Où votre expé­rience est-elle plu­tôt posi­tive ? J’attends votre his­toire, vos réflexions, vos ques­tions dans les commentaires…

9 réflexions sur “Gutenberg — la Bible de l’utilisateur”

  1. Bonjour,
    Merci pour cet article, mais pour moi impos­sible de trou­ver l’op­tion pleine lar­geur pour la ban­nière. Pouvez vous me dire com­ment affi­cher cette option.
    Monique

  2. mer­ci pour votre réponse

    Mais l’af­fi­chage dans la ban­nière juste modi­fier l’a­li­gne­ment : ali­gner à gauche, cen­trer et ali­gner à droite pas option pleine largeur ?
    Monique

        1. C’est sur­pre­nant. J’ai pris la cap­ture d’é­cran sur un site vierge, une ins­tal­la­tion toute fraîche. C’est une fonc­tion­na­li­té par défaut, alors si vous ne l’a­vez pas, il y a deux causes possibles :

          • une incom­pa­ti­bi­li­té avec le thème
          • un conflit avec une extension
  3. Bonjour,
    Merci pour cet article très com­plet. En revanche j’ai un pro­blème. Les articles écrits avec Gutenberg avec image loca­li­sée, Lettrine, retrait de para­graphe, bref for­mat éla­bo­ré ne sont pas repro­duits à l’i­den­tique dans une page Elementor et perdent toutes leurs « fioritures » .…..!!!!
    Y‑a-t-il une astuce ?
    Merci de votre réponse

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

Les commentaires sont fermés.

Retour en haut
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept