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 & texteen 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 exposantet 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
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