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 Guten­berg ? Mais non, pas le vieux mon­sieur à longue barbe des livres d’His­toire ! L’outil de com­po­si­tion par défaut de Word­Press !

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

Tout le monde n’est pas con­va­in­cu de son util­ité, et beau­coup refusent tout sim­ple­ment de l’u­tilis­er, que ce soit pour ne pas chang­er ses habi­tudes, ou parce qu’ils ne retrou­vent pas les fonc­tion­nal­ités dont ils ont besoin. Il n’y a qu’a voir l’en­goue­ment pour l’ex­ten­sion “clas­sic Edi­tor”, active sur plus de 3 mil­lions de sites.

Mais vu qu’il est désor­mais l’édi­teur par défaut, autant appren­dre à s’en servir et à en tir­er le meilleur par­ti.

Cet arti­cle n’est pas une ode à Guten­berg, pas plus qu’un bil­let assas­sin, et l’on ne revien­dra ni sur les orig­ines du nom ni sur celles du pro­jet. J’ai déjà don­né dans l’humeur dans l’ar­ti­cle Ghost — Une alter­na­tive à Word­Press ? et pour les orig­ines, vous les trou­verez dans l’ar­ti­cle J’ai essayé Guten­berg. Aujour­d’hui, nous allons juste décou­vrir plus en détail cet édi­teur et voir com­ment l’u­tilis­er au mieux.

Vous ver­rez, les capac­ités par défaut de Guten­berg 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 cer­taines sec­tions de cet arti­cle ne sont pas des plus heureuses, elles mon­trent la puis­sance et la flex­i­bil­ité de l’outil.

Et au fur et à mesure de mes décou­vertes, ou des évo­lu­tions de Guten­berg, je ne man­querai pas de met­tre cet arti­cle à jour.

C’est d’ailleurs une des raisons qui devraient vous inciter à vous abon­ner
– et c’est promis, je n’en­ver­rai jamais de let­tre à des fins pub­lic­i­taires.

[newsletter_signup_form id=1]

Je n’abor­derai pas dans cet arti­cle les exten­sions éten­dant les capac­ités de l’édi­teur via l’a­jout de nou­veaux blocs : dans le vaste monde des exten­sions Word­Press, cer­taines durent, d’autre pas.

Chaque exten­sion utile aura son petit arti­cle, his­toire de flat­ter son ego et de ne pas attein­dre le mien avec un arti­cle obsolète avant même sa pub­li­ca­tion 😉

Par con­tre, j’ai posé la ques­tion au sup­port, si en acti­vant l’ex­ten­sion Guten­berg dans Word­Press 5.x, on util­i­sait l’ex­ten­sion ou la ver­sion inté­grée dans le cœur de Word­Press.

La réponse est que c’est l’ex­ten­sion qui prend le dessus, per­me­t­tant ain­si de béné­fici­er des dernières mis­es à jour de Guten­berg, sans atten­dre la ver­sion suiv­ante de Word­Press.

When the plu­g­in is installed, it is what will be used over the core ver­sion. This is to ensure you get all the new fea­tures that get test­ed via the plu­g­in before they are released in core 🙂

Mar­ius L. J. (@clorith)

Si vous subis­sez des plan­tages inex­pliqués lors de l’édi­tion, ou si vous voulez vous aus­si prof­iter des dernières mis­es à jour, je vous recom­mande d’in­staller l’ex­ten­sion Guten­berg — c’est d’ailleurs ce que j’ai fait sur ce blog, ou plus exacte­ment, sur tous mes sites propul­sés par Word­Press.

Mais atten­tion ! Vous pou­vez aus­si remar­quer cer­tains com­porte­ments “bizarres” en instal­lant Guten­berg (l’ex­ten­sion) dans Word­Press 5.+ dont :

  • nom­bre de mots inopérant (1 mot, quel que soit le nom­bre réel)
  • bugs dans l’af­fichage de la liste des arti­cles dans l’in­ter­face d’ad­min­is­tra­tion

La manip­u­la­tion est donc à faire avec pré­cau­tion.

Prise en main de Gutenberg

Que vous vouliez écrire un nou­v­el arti­cle ou met­tre en ligne une nou­velle page, Guten­berg est l’in­ter­face par défaut, incon­tourn­able depuis Word­Press 5.0, dans sa con­fig­u­ra­tion d’o­rig­ine.

Pour les besoins de cet arti­cle, je me suis servi d’une instal­la­tion vierge de Word­Press (v. 5.0.3), sans exten­sion, sans rien d’autre que ce que nous offre l’in­stal­la­tion par défaut.

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

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

Mais vous n’êtes pas seul. Décou­vrons ensem­ble…

L’interface de l’éditeur

C’est un écran dépouil­lé, presque vierge, qui s’of­fre à vous. Il n’y a que la barre d’outils en haut de l’écran, la barre con­textuelle, à droite, et les indi­ca­teurs des pre­mières zones de saisie, pour le titre et le con­tenu.

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

Voyons point par point les élé­ments de cette inter­face. Pour com­mencer, intéres­sons-nous à…

La barre principale d’outils

La barre d’outils en haut de l’écran per­met de con­naitre tout de l’é­tat de votre pub­li­ca­tion, et d’ef­fectuer les actions essen­tielles.

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

Barre d'outils de Gutenberg
Barre d’outils de Guten­berg

La sec­tion 1, à gauche, con­cerne l’édi­tion du doc­u­ment en cours. La sec­tion 2, à droite, sert prin­ci­pale­ment pour enreg­istr­er le doc­u­ment, et pour les actions non usuelles.

Section de gauche

Blocs Gutenberg - vue par défaut
Blocs Guten­berg — vue par défaut
Blocs Gutenberg - box fermée
Blocs Guten­berg — box fer­mé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 courant (celui où votre curseur est posi­tion­né). Si vous cherchez un bloc par­ti­c­uli­er, vous pou­vez fer­mer les onglets internes avec le chevron ou effectuer une recherche dans le champ texte.

Gutenberg - Bloc option de bloc
Guten­berg — Bloc option de bloc

Vous remar­querez 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 util­isés.

Les flèch­es vers la gauche et vers la droite per­me­t­tent d’an­nuler ou de refaire une action (précédem­ment annulée).

Aperçu du document
Aperçu du doc­u­ment

Quant au bou­ton il per­met de tout savoir du doc­u­ment en cours : le nom­bre de mots, de titres, de para­graphes et de blocs, plus une table des matières per­me­t­tant une nav­i­ga­tion rapi­de au sein du doc­u­ment.

Intéres­sant quant on est dans un doc­u­ment rel­a­tive­ment long (et bien struc­turé), pour revenir à un para­graphe précé­dent par exem­ple, puis pour retourn­er en fin de doc­u­ment sans scroller à vue avec la souris.

Pour visu­alis­er le tra­vail rédac­tion­nel accom­pli. Ou pour con­naître le nom­bre de mots, quant on a par exem­ple une ligne à suiv­re : pas moins de / pas plus x mots.

Le bou­ton suiv­ant, per­met la nav­i­ga­tion dans les blocs. Mais vu que les blocs se nom­ment qua­si­ment tous para­graphe, ce n’est pas — à mon avis — très intu­itif. Mais ce “nav­i­ga­teur” peut se révéler utile pour retrou­ver une galerie par exem­ple.

Section de droite

À droite, vous avez tous les out­ils pour l’en­reg­istrement (Enreg­istr­er le brouil­lon et Pub­li­er ou Met­tre à jour), l’i­cone pour pass­er en vue large (utile pour la saisie au kilo­mètre, sans mise en forme par­ti­c­ulière) et l’i­cone pour accéder aux fonc­tions avancées. Nous revien­drons sur les fonc­tions avancées plus tard dans l’ar­ti­cle.

À not­er le com­porte­ment par défaut de Guten­berg pour la pub­li­ca­tion : il vous demande si vous voulez vrai­ment pub­li­er l’ar­ti­cle, ce qui évite les mis­es en lignes intem­pes­tives dues à une erreur de manip­u­la­tion.

La barre latérale contextuelle

Barre contextuelle - Onglet Bloc
Barre con­textuelle — Onglet Bloc
Barre latérale - Onglet Document
Barre latérale — Onglet Doc­u­ment

Dans cette barre latérale, vous trou­verez en per­ma­nence deux onglets : Doc­u­ment 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 Doc­u­ment, lui, con­tient en per­ma­nence les infor­ma­tions rel­a­tive… au doc­u­ment en cours.

Vous retrou­vez dans cet onglet (Doc­u­ment) l’essen­tiel des fonc­tion­nal­ités présentes dans la barre latérale de l’édi­teur clas­sique, et cer­tains élé­ments aupar­a­vant placés en-dessus ou en-dessous du doc­u­ment en cours d’édi­tion, comme par exem­ple le permalien ou l’ex­trait. Vous pou­vez égale­ment y trou­ver des options de réglage pour le thème (con­cer­nant la page en cours), mais ce n’est pas une général­ité. Ces élé­ments peu­vent aus­si se trou­ver en dessous de la zone de rédac­tion du doc­u­ment.

Dans l’on­glet Bloc, vous trou­verez l’ensem­ble des infor­ma­tions rel­a­tive au bloc en cours d’u­til­i­sa­tion. Dans la cap­ture d’écran ci-con­tre, vous avez un bloc Para­graphe, avec le réglage des couleurs de texte et de fond, la taille de la police ou encore l’ap­parence de la pre­mière let­tre, qui peut être une let­trine.

Nous ver­rons ultérieure­ment com­ment gér­er cer­tains élé­ments de cette barre con­textuelle, à tra­vers des exem­ples sim­ples — le but de l’ar­ti­cle n’é­tant pas d’ap­pren­dre à dévelop­per pour Guten­berg, mais d’ap­pren­dre à l’u­tilis­er de manière opti­male.

Après avoir vu les fonc­tions de la barre de menu, ou barre haute, et le fonc­tion­nement de la barre latérale con­textuelle, nous allons nous intéress­er aux dif­férents types de blocs que Guten­berg pro­pose par défaut.

Le mode Mise en lumière

Guten­berg est doté d’un mode “sans dis­trac­tion”, acces­si­ble depuis l’el­lipse ver­ti­cale 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 tra­vaillez :

Je ne l’u­tilise pas, mais vous y trou­verez éventuelle­ment un intérêt.

Les blocs de l’éditeur

Vous avez déjà eu un aperçu (très) rapi­de des blocs pro­posés, dans le “chapitre” précé­dent (La barre prin­ci­pale d’outils / Sec­tion de gauche).

Menu flot­tant — Élé­ments récur­rents

Tous les blocs ont un menu flot­tant, avec deux élé­ments sys­té­ma­tique­ment présents : le mod­ule de déplace­ment à gauche, externe au bloc, et l’icône tout à droite. Bon nom­bre d’en­tre eux ont égale­ment l’icône (pour les blocs de type texte, éventuelle­ment rem­placé par un icône dif­férent, lié au type de con­tenu) situé à gauche, pour pou­voir bas­culer d’un type de bloc à un autre.

Les trois blocs essen­tiels sont Titre, Para­graphe et Image. Ce sont d’ailleurs ceux que vous trou­verez le plus sou­vent à droite d’un nou­veau bloc (vierge donc) dont le con­tenu n’a pas été défi­ni.

Chaque bloc (ou du moins, la plu­part des blocs) a un ensem­ble de paramètres prédéfi­nis (paramètres d’u­sine) dont cer­tains peu­vent être mod­i­fiés via la barre latérale con­textuelle, à droite de la zone de saisie (voir la cap­ture d’écran Barre con­textuelle – Onglet Bloc).

Le bloc classique

Lorsque vous ouvrez pour la pre­mière fois un arti­cle précédem­ment rédigé avec l’an­cien édi­teur, tout le con­tenu sera dans un bloc dit clas­sique :

Bloc Guten­berg “clas­sique”

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

Con­ver­tir en bloc

Votre con­tenu soit automa­tique­ment trans­posé sous forme de blocs Guten­berg nat­ifs :

Blocs Guten­berg nat­ifs

Les blocs de texte

Menu flot­tant du bloc Para­graphe

Ces blocs (Titre, Para­graphe, Liste, Cita­tion…) béné­fi­cient d’un menu flot­tant, que vous pou­vez “coller” dans la barre haute, à la suite des icônes à gauche. Cette mini barre d’outils s’adapte en fonc­tion de la nature du bloc.

De plus, ces blocs sont “inter­change­ables” dans leur nature, c’est à dire que vous com­mencez à saisir votre texte dans un bloc par défaut (Para­graphe) et vous décidez d’en faire un titre en cli­quant sur l’icô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

Guten­berg lim­ite l’u­til­i­sa­tion des balis­es H, il ne descend pas jusqu’à H7 (qui n’ex­iste de toute façon pas) mais unique­ment jusqu’à H4, lais­sant de côté les niveaux de titre 5 et 6 (tou­jours acces­si­bles depuis la barre con­textuelle). Parce qu’ils ne sont pas très util­isés, et pas très utiles non plus dans un doc­u­ment courant.

Le bloc Paragraphe

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

Ce bloc sem­ble man­quer de corps par rap­port aux fonc­tion­nal­ités présentes dans la barre d’outils de l’édi­teur clas­sique, aux­quelles nous étions habitués. Mais hon­nête­ment, de quels élé­ments de mise en forme vous serviez-vous vrai­ment ? Pour la plu­part d’en­tre nous, du gras, de l’i­talique, de l’aligne­ment à droite ou cen­tré (en plus de l’aligne­ment par défaut, bien sûr) et des liens.

Ceux qui util­i­saient la jus­ti­fi­ca­tion, le texte bar­ré ou souligné ont été con­traints d’a­ban­don­ner ces mis­es en forme ou d’in­staller et d’ac­tiv­er une exten­sion pour gér­er à nou­veau cette fonc­tion­nal­ité.

En aparté, la jus­ti­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éprochable de ses colonnes. On s’est depuis aperçu que la lec­ture d’un texte aligné à gauche est plus aisée que la lec­ture d’un texte jus­ti­fié.

Ce qui per­son­nelle­ment me manque le plus, c’est l’icône Ω (omé­ga) qui ser­vait à insér­er un car­ac­tère que l’on ne trou­ve pas sur un clavier stan­dard : une let­tre grecque (le Ω en l’occurrence), un set de guillemets typographiques à la française, les graphèmes Æ, æ, Œ et œ que j’ai depuis trou­vés sur un clavier alter­natif, le clavier FrEl­rick. Que j’u­tilise dans Word­Press bien sûr, mais aus­si en dehors de Word­Press !

Clavier FrElrick
Clavier FrEl­rick

Comme quoi, en cher­chant bien, on trou­ve tou­jours une solu­tion 🙂 dans ce cas préférable à la fonc­tion­nal­ité d’o­rig­ine. Ceci-dit, faut pas trop pouss­er, je veux bien qu’il n’y ait pas trop de place pour met­tre une palan­quée d’icônes, mais quand même ! Lais­sez-nous en quelques uns !

Le bloc Liste

On ne choisit 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érieure­ment.

Les blocs de mise en forme

Le bloc Citation

Le nou­veau bloc cita­tion est prêt à l’emploi, avec un emplace­ment prévu par défaut pour ren­seign­er la source (de la cita­tion). Agréable, surtout quand on se sou­vient du for­matage des cita­tions dans l’édi­teur clas­sique.

Ce bloc peut être trans­for­mé en Cita­tion en exer­gue, qui donne plus de vol­ume à la cita­tion, comme vous le voyez sur la cap­ture d’écran suiv­ante.

Cita­tion en exer­gue — Vue dans l’édi­teur (thème Twen­ty Nine­teen)

En aparté, je n’ai pas mis cette illus­tra­tion pour affich­er 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­tr­er l’ar­ti­cle, 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 trou­ve mignonne. Sans doute, dirait un psy­ch­an­a­lyste, une madeleine de Proust 😉

Le bloc Couplet

Il s’ag­it d’un bloc para­graphe un peu spé­cial, prévu pour met­tre en valeur la poésie.
Con­traire­ment au texte de para­graphe tra­di­tion­nel, il laisse tous les espaces et les sauts de ligne intacts, en les affichant exacte­ment tels que vous les entrez.

Le bloc Tableau

Pour met­tre 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 respon­sive. Les solu­tions pour un tableau respon­sive sous Word­Press mérit­erait un arti­cle 😐 sauf que je n’ai pas vrai­ment trou­vé la solu­tion idéale — ni dans le gra­tu­it, ni dans le payant.

Les blocs d’images

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

Ajouter une image ou une galerie, dans Guten­berg

Mais vous pou­vez aus­si gliss­er une image (ou plusieurs) directe­ment dans l’édi­teur, qui fera le reste en créant un bloc image ou galerie que vous n’au­rez plus qu’à ajuster.

Le place­ment des images cor­re­spond à ce que vous aviez l’habi­tude d’avoir avec l’édi­teur clas­sique, avec en plus une présen­ta­tion grande largeur et une pleine largeur. À not­er que tous les thèmes ne per­me­t­tent pas d’u­tilis­er les deux derniers for­mats de manière opti­male, notam­ment lorsque vous affichez une barre latérale. Si vous souhaitez béné­fici­er de ces for­mats, effectuez des tests avant de vous décider.

Bloc Image cen­trée, clas­sique

La grande largeur et la pleine largeur sont égale­ment disponibles pour les galeries. Intéres­sant pour met­tre en valeur vos pho­tos, ou du moins cer­taines.

Le bloc Bannière

C’est un bloc image & texte en surim­pres­sion. Vous pou­vez vous en servir pour un call to action sim­ple par exem­ple. La barre d’outils texte est sim­ple, mais suff­isante.

Bloc ban­nière cen­tré

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

Bloc ban­nière pleine largeur (ren­du dans l’édi­teur)

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 con­tre, il s’ag­it d’un bloc assez sim­ple, sans mise en page par­ti­c­ulière. Et le pas­sage d’une colonne à l’autre, c’est à vous de le faire 😉

Le bloc Espacement

Pour créer un espace­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épar­er le texte vis­i­ble en “extrait automa­tique” du reste de l’ar­ti­cle.

Ce bloc est moins sou­ple dans son util­i­sa­tion que la balise Lire la suite de l’édi­teur clas­sique, que l’on pou­vait plac­er au beau milieu d’un para­graphe, et qui était donc réelle­ment invis­i­ble.

Le bloc Séparateur

Ce bloc insère une balise <hr />, qui pro­duit une ligne hor­i­zon­tale.

Le bloc Média & Texte

La Bible de Gutenberg

Aux orig­ines de l’im­pres­sion avec la Bible de Guten­berg. Le titre de cet arti­cle est aus­si un clin d’œil à cet homme, qui révo­lu­tion­na l’im­primerie.

Par NYC Wan­der­er (Kevin Eng) — pub­lié à l’o­rig­ine sur Flickr sous le nom de Bible de Guten­berg, CC BY-SA 2.0

Vous pou­vez régler la taille des car­ac­tères de “petit” à “Énorme”, en fonc­tion de la quan­tité de con­tenu que vous voulez affich­er dans le bloc à côté de votre image. Sur mobile, il sera cer­taine­ment préférable d’empiler les deux par­ties du bloc pour une meilleure vis­i­bil­ité.

Mais vous pour­rez aus­si inter­ver­tir les posi­tions du texte et de l’im­age, et jouer sur la taille du texte. Ici en pleine largeur, et le texte réglé sur Grand (Énorme dans l’ex­em­ple précé­dent). Ce bloc n’ex­iste pas en largeur dite “nor­male”.

Les blocs Widgets

Les blocs wid­gets per­me­t­tent d’in­sér­er des wid­gets Word­Press dans votre doc­u­ment. C’est une des fonc­tion­nal­ités de Guten­berg qui n’a pas son équiv­a­lent dans l’édi­teur clas­sique.

Vous pour­rez insér­er un code court, une listes des derniers arti­cles ou des caté­gories.

La présen­ta­tion est sim­ple, mais elle per­met de présen­ter une liste de un (mais ce n’est plus une liste) à cent arti­cles — mais je n’en ai pas autant sur mon blog 😐

Les blocs Contenus embarqués

Grâce au for­mat oEm­bed, vous pou­vez embar­quer des dizaines de con­tenus mul­ti­mé­dia dans vos arti­cles : Twit­ter, Face­book, Insta­gram, Word­Press bien sûr, mais aus­si Spo­ti­fy, Vimeo, Flickr… la liste est longue.

Voila pour la liste des blocs par défaut de Guten­berg. J’en ai peut-être oublié en rédi­geant cet arti­cle, n’hésitez pas à me les men­tion­ner dans les com­men­taires.

Les fonctionnalités avancées de Gutenberg

Le drag and drop

À la gauche de chaque bloc, vous avez deux flèch­es, pointant vers le haut ou vers le bas, séparées par une dou­ble ellipse : deux posi­tion­nés l’un sur l’autre. Vous pou­vez n’avoir que la flèche du haut, ou unique­ment celle du bas, si vous êtes sur le pre­mier ou le dernier bloc du doc­u­ment.

Les flèch­es et per­me­t­tent de faire mon­ter ou descen­dre le bloc, pour le plac­er avant ou après le bloc précé­dent ou suiv­ant. La dou­ble ellipse per­met de déplac­er le bloc directe­ment à l’écran, pour le plac­er plusieurs blocs avant par exem­ple, ou pour le posi­tion­ner dans une autre colonne.

Le fonc­tion­nement n’est pas le plus intu­itif que j’ai ren­con­tré, mais une fois que vous l’avez com­pris, l’u­tilis­er devient un jeu d’en­fant.

Le bloc réutilisable

Je ne l’ai pas présen­té dans les blocs, vous allez vite com­pren­dre pourquoi. Ce bloc n’est pas un bloc de con­tenu à pro­pre­ment par­ler, voici d’ailleurs la déf­i­ni­tion qu’en donne Word­Press :

Créez du con­tenu et enreg­istrez-le pour vous ou pour d’autres con­tributri­ces et con­tribu­teurs afin de le réu­tilis­er ailleurs sur votre site, et appli­quer les mod­i­fi­ca­tions partout où il est util­isé.

Word­Press, in Guten­berg

Alors, qu’est ce qu’un bloc réu­til­is­able et com­ment s’en servir ?

Pour ceux qui ont déjà util­isé des con­struc­teurs de pages (Ele­men­tor, Beaver Builder, WPBak­ery Page Builder…), c’est ni plus ni moins qu’un mod­èle, réu­til­is­able tel quel ou après mod­i­fi­ca­tion, dans la total­ité des pages et arti­cles de votre site.

Pour le définir, ren­dez-vous dans le menu flot­tant, cliquez sur . Vous allez trou­ver, tout en bas, Ajouter aux blocs réu­til­is­ables. Cliquez, vous obtenez ce type de boîte de dia­logue :

Enreg­istrement d’un bloc réu­til­is­able

Don­nez lui un nom, enreg­istrez-le, et vous avez un bloc réu­til­is­able.

Pour l’u­tilis­er à nou­veau (c’est le but), vous trou­verez un nou­v­el onglet dans le + qui sert à définir le type de bloc à utilis­er. Nom­mé, il va de soi, Réu­til­is­ables. Au pluriel, 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éu­tilis­er tel quel, ou le trans­former en bloc nor­mal, sur place, pour en mod­i­fi­er le con­tenu. Vous devrez pour cela aller dans le menu, cli­quer à nou­veau sur puis sur Con­ver­tir en bloc Guten­berg nor­mal.

C’est ce que je viens de faire avec mon encart pour vous inciter à vous abon­ner à la let­tre d’in­for­ma­tion du blog. Je l’ai con­ver­ti en bloc nor­mal, et j’en ai mod­i­fié le texte. Retournez en haut de l’ar­ti­cle, si vous n’êtes pas con­va­in­cu ?

[newsletter_signup_form id=1]

Les extensions indispensables à Gutenberg

Guten­berg fonc­tionne bien, mais il est pos­si­ble d’amélior­er son fonc­tion­nement grâce à quelques exten­sions. La pre­mière, c’est Dis­able Guten­berg Autosave. Parce que Guten­berg a la fausse bonne idée de déclencher des enreg­istrements automa­tiques qui ralen­tis­sent voire blo­quent toute autre opéra­tion.

La sec­onde, qui n’est pas indis­pens­able, per­met de retrou­ver cer­taines mis­es en forme, dont vous aurez (ou non) besoin. Il s’ag­it de Advanced Rich Text Tools for Guten­berg. Vous y gag­nerez le formatage du code, des textes en exposant et en indice ain­si que la col­oration du texte et de son arrière-plan. Même si ce n’est pas aus­si pro­pre qu’une balise <mark> c’est une aide sim­ple pour surlign­er une por­tion de texte à met­tre en avant.

Pour en finir avec les exten­sions “indis­pens­ables”, pour retrou­ver une des fonc­tion­nal­ités de Word­Press sup­primée avec l’ar­rivée de Guten­berg, l’ex­ten­sion Cus­tom Fields for Guten­berg per­met d’a­jouter des champs per­son­nal­isés à vos arti­cles et pages.

En conclusion

Johannes Guten­berg a révo­lu­tion­né l’im­primerie. Ce n’est pas le pre­mier à avoir imprimé des livre, c’est le pre­mier à les avoir mis sous presse avec des car­ac­tères mobile en plomb.

Word­Press, 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 égale­ment des clins d’œil à l’His­toire : avant Guten­berg, il y a eu le Codex.

La révo­lu­tion Guten­berg est à nou­veau d’ac­tu­al­ité, plus de 400 ans après l’in­ven­tion de l’im­primerie mod­erne. Autant être au ren­dez-vous, cette fois. J’e­spère juste vous avoir don­né envie d’y par­ticiper, et de vous avoir fourni les armes pour.

Et vous, êtes-vous passé à Guten­berg ? Avez-vous ren­con­tré cer­taines dif­fi­cultés lors de l’adop­tion de cet édi­teur ? Où votre expéri­ence est-elle plutôt pos­i­tive ? J’at­tends votre his­toire, vos réflex­ions, vos ques­tions dans les com­men­taires…

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

  1. Bon­jour,
    Mer­ci pour cet arti­cle, mais pour moi impos­si­ble de trou­ver l’op­tion pleine largeur pour la ban­nière. Pou­vez vous me dire com­ment affich­er cette option.
    Monique

  2. mer­ci pour votre réponse

    Mais l’af­fichage dans la ban­nière juste mod­i­fi­er l’aligne­ment : align­er à gauche, cen­tr­er et align­er à droite pas option pleine largeur ?
    Monique

        1. C’est sur­prenant. J’ai pris la cap­ture d’écran sur un site vierge, une instal­la­tion toute fraîche. C’est une fonc­tion­nal­ité par défaut, alors si vous ne l’avez pas, il y a deux caus­es pos­si­bles :

          • une incom­pat­i­bil­ité avec le thème
          • un con­flit avec une exten­sion
  3. Bon­jour,
    Mer­ci pour cet arti­cle très com­plet. En revanche j’ai un prob­lème. Les arti­cles écrits avec Guten­berg avec image local­isée, Let­trine, retrait de para­graphe, bref for­mat élaboré ne sont pas repro­duits à l’i­den­tique dans une page Ele­men­tor et per­dent toutes leurs “fior­i­t­ures” .…..!!!!
    Y‑a-t-il une astuce ?
    Mer­ci de votre réponse

    1. Effec­tive­ment il y a des “détails” visuels qui ne sont pas repro­duits à l’i­den­tique… mais les CSS sont là pour gér­er ces détails. Ren­dez-vous dans l’outil de per­son­nal­i­sa­tion de Word­Press, cliquez sur l’on­glet CSS addi­tion­nel et appliquez les règles néces­saires.

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