{"id":20070,"date":"2018-08-04T02:07:10","date_gmt":"2018-08-04T02:07:10","guid":{"rendered":"https:\/\/kinsta.com\/?p=11648"},"modified":"2024-09-18T09:24:16","modified_gmt":"2024-09-18T08:24:16","slug":"editeur-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/","title":{"rendered":"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)"},"content":{"rendered":"<p>Lorsque l&rsquo;\u00e9diteur de blocs WordPress, ou Gutenberg, a <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/\">\u00e9t\u00e9 lanc\u00e9 en d\u00e9cembre 2018<\/a>, nous ne savions pas \u00e0 quoi nous attendre. Bien s\u00fbr, nous avions eu beaucoup de temps pour jouer avec sa version b\u00eata, mais nous ne pouvions pas pr\u00e9dire \u00e0 quel point le lancement r\u00e9el se d\u00e9roulerait en douceur ou \u00e0 quel point les utilisateurs et les d\u00e9veloppeurs seraient impatients d&rsquo;adopter le nouvel \u00e9diteur.<\/p>\n<p>Nous avons vu l&rsquo;\u00e9diteur Gutenberg conna\u00eetre une croissance \u00e9norme au cours des plus de deux ans qui se sont \u00e9coul\u00e9s depuis la premi\u00e8re publication de cet article. Il est pass\u00e9 du lancement d&rsquo;un produit minimum viable (MVP) \u00e0 un projet plus mature qui se rapproche de l&rsquo;objectif de cr\u00e9er une exp\u00e9rience unifi\u00e9e de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#full-site-editing-features-in-wordpress-58\">Full Site Editing<\/a> pour WordPress.<\/p>\n<p>Pour tenir compte de ces changements, nous avons revisit\u00e9 l&rsquo;\u00e9diteur Gutenberg pour vous faire d\u00e9couvrir son nouveau visage, y compris sa prochaine \u00e9volution.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce que l&rsquo;\u00e9diteur de blocs Gutenberg ?<\/h2>\n<p>Gutenberg, alternativement appel\u00e9 \u00ab\u00a0\u00e9diteur de blocs WordPress\u00a0\u00bb ou simplement \u00ab\u00a0\u00e9diteur WordPress\u00a0\u00bb, est l&rsquo;\u00e9diteur de contenu WordPress introduit dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/\">WordPress 5.0<\/a>, publi\u00e9 le 6 d\u00e9cembre 2018.<\/p>\n<p>Si vous n&rsquo;avez pas entendu ce terme, il s&rsquo;agit de l&rsquo;\u00e9diteur par d\u00e9faut que tous les sites WordPress utilisent, sauf si vous l&rsquo;avez sp\u00e9cifiquement d\u00e9sactiv\u00e9. Il ressemble \u00e0 quelque chose comme ceci :<\/p>\n<figure id=\"attachment_100519\" aria-describedby=\"caption-attachment-100519\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100519 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-editor-interface-1024x880.png\" alt=\"L'\u00e9diteur WordPress Gutenberg.\" width=\"1024\" height=\"880\"><figcaption id=\"caption-attachment-100519\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur WordPress Gutenberg.<\/figcaption><\/figure>\n<p>La grande diff\u00e9rence entre l&rsquo;\u00e9diteur WordPress Gutenberg et l&rsquo;\u00e9diteur WordPress pr\u00e9c\u00e9dent (d\u00e9sormais appel\u00e9 \u00ab\u00a0\u00e9diteur classique\u00a0\u00bb ou \u00ab\u00a0\u00e9diteur TinyMCE\u00a0\u00bb) est une nouvelle approche de la cr\u00e9ation de contenu bas\u00e9e sur les blocs.<\/p>\n<p>Avec Gutenberg, chaque \u00e9l\u00e9ment de votre contenu est un bloc, ce qui permet une manipulation facile du contenu. Chaque paragraphe est un bloc, chaque image est un bloc, chaque bouton est un bloc &#8211; vous avez compris !<\/p>\n<p>Les d\u00e9veloppeurs tiers peuvent \u00e9galement cr\u00e9er des blocs personnalis\u00e9s, ce qui contribue \u00e0 mettre fin \u00e0 l&rsquo;engouement de WordPress <a href=\"https:\/\/kinsta.com\/fr\/blog\/shortcodes-wordpress\/\">pour les codes<\/a> courts. Disons que vous voulez <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-formulaire-de-contact-wordpress\/\">int\u00e9grer un formulaire de contact<\/a>. Au lieu d&rsquo;avoir \u00e0 ajouter un code court (par exemple [your-form-shortcode]) comme vous le faisiez dans le pass\u00e9, vous pouvez maintenant simplement d\u00e9poser le bloc de votre extension de formulaire.<\/p>\n<p>En outre, vous pouvez \u00e9galement utiliser les blocs pour cr\u00e9er des mises en page plus complexes, par exemple pour mettre en place un design \u00e0 plusieurs colonnes ou regrouper des blocs pour cr\u00e9er une section coh\u00e9rente.<\/p>\n<p>Au fur et \u00e0 mesure que nous vous montrerons comment utiliser l&rsquo;\u00e9diteur de blocs, vous aurez une meilleure id\u00e9e de la fa\u00e7on dont vous pouvez utiliser les blocs pour am\u00e9liorer la cr\u00e9ation de contenu.<\/p>\n\n<h3>Consultez ce guide mis \u00e0 jour pour en savoir plus<\/h3>\n<p>Une chose importante \u00e0 comprendre est que le projet Gutenberg vise \u00e0 \u00eatre plus qu&rsquo;un simple \u00e9diteur de contenu.<\/p>\n<p>En juillet 2021, Gutenberg n&rsquo;est encore qu&rsquo;un \u00e9diteur de contenu (pour l&rsquo;essentiel). Mais l&rsquo;objectif \u00e0 long terme pour Gutenberg est de le faire \u00e9voluer vers quelque chose appel\u00e9 <strong>Full Site Editing<\/strong>.<\/p>\n<p>L&rsquo;id\u00e9e avec le Full Site Editing est que vous serez en mesure de concevoir 100\u00a0% de votre site web en utilisant l&rsquo;\u00e9diteur Gutenberg. Par exemple, au lieu d&rsquo;\u00eatre limit\u00e9 aux options d&rsquo;en-t\u00eate fournies avec votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\">th\u00e8me WordPress<\/a>, vous pourrez utiliser Gutenberg pour concevoir des en-t\u00eates personnalis\u00e9s \u00e0 l&rsquo;aide de l&rsquo;\u00e9diteur de blocs.<\/p>\n<p>Ce type de fonctionnalit\u00e9 n&rsquo;est pas <em>encore <\/em>disponible, mais c&rsquo;est en passe de l&rsquo;\u00eatre, et nous avons quelques projets de \u00ab\u00a0preuve de concept\u00a0\u00bb que nous vous pr\u00e9senterons vers la fin de cet article.<\/p>\n<h2>Avantages et inconv\u00e9nients de Gutenberg par rapport aux alternatives populaires<\/h2>\n<p>Maintenant que nous avons pu utiliser l&rsquo;\u00e9diteur de blocs de WordPress pendant plus de deux ans, nous avons une bonne id\u00e9e de certains des avantages et inconv\u00e9nients de Gutenberg par rapport aux autres solutions.<\/p>\n<p>Il y a deux possibilit\u00e9s principales pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/contenu-evergreen\/\">cr\u00e9er du contenu<\/a> sur WordPress :<\/p>\n<ul>\n<li>L&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\">\u00e9diteur TinyMCE de WordPress<\/a> : C&rsquo;est l&rsquo;\u00e9diteur classique que WordPress utilisait avant WordPress 5.0.<\/li>\n<li>Les extensions<a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\"> de construction de pages<\/a> : Il s&rsquo;agit d\u2019extensions tierces qui ajoutent \u00e0 WordPress une conception visuelle, en glisser-d\u00e9poser.<\/li>\n<\/ul>\n<p>En g\u00e9n\u00e9ral, l&rsquo;\u00e9diteur classique TinyMCE offre une exp\u00e9rience plus d\u00e9pouill\u00e9e, semblable \u00e0 celle d&rsquo;un traitement de texte, tandis que les constructeurs de pages offrent une exp\u00e9rience visuelle beaucoup plus souple, en glisser-d\u00e9poser.<\/p>\n<p>Si nous devions classer les trois \u00e9diteurs en fonction de leur souplesse de conception, cela donnerait quelque chose comme ceci:<\/p>\n<p><strong>\u00c9diteur classique TinyMCE (le moins flexible) &lt; Gutenberg &lt; Constructeurs de pages (le plus flexible)<\/strong><\/p>\n<p>Maintenant, parlons des avantages et des inconv\u00e9nients de l&rsquo;\u00e9diteur de blocs Gutenberg par rapport aux alternatives.<\/p>\n<h3>Gutenberg vs \u00c9diteur classique : Avantages et inconv\u00e9nients<\/h3>\n<p>Comparons d&rsquo;abord Gutenberg \u00e0 l&rsquo;\u00e9diteur classique TinyMCE.<\/p>\n<p><strong>Pour :<\/strong><\/p>\n<ul>\n<li>Gutenberg offre un arri\u00e8re-plan de conception plus visuel<\/li>\n<li>Vous n&rsquo;avez pas besoin d&rsquo;utiliser des codes courts pour int\u00e9grer du contenu : vous disposez d&rsquo;un syst\u00e8me de blocs unifi\u00e9.<\/li>\n<\/ul>\n<p><strong>Contre :<\/strong><\/p>\n<ul>\n<li>Certaines personnes trouvent que la r\u00e9daction dans Gutenberg est un peu lourde car chaque paragraphe est un bloc s\u00e9par\u00e9. Pour les longs articles, il peut \u00eatre difficile de manipuler le texte. Vous pouvez pr\u00e9f\u00e9rer \u00e9crire dans un autre \u00e9diteur et coller le texte dans Gutenberg lorsque vous avez termin\u00e9.<\/li>\n<li>Si les performances de Gutenberg se sont nettement am\u00e9lior\u00e9es, il peut encore \u00eatre \u00e0 la tra\u00eene sur les articles massifs, ce qui est moins susceptible de se produire avec l&rsquo;\u00e9diteur classique.<\/li>\n<\/ul>\n<p>Si vous pensez que l&rsquo;\u00e9diteur classique TinyMCE correspond mieux \u00e0 vos besoins, vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/blog\/desactiver-editeur-gutenberg-wordpress\/\">d\u00e9sactiver compl\u00e8tement<\/a> <a href=\"https:\/\/kinsta.com\/fr\/blog\/desactiver-editeur-gutenberg-wordpress\/\">l&rsquo;\u00e9diteur Gutenberg<\/a>.<\/p>\n<h3>Gutenberg et les constructeurs de pages : Avantages et inconv\u00e9nients<\/h3>\n<p>Voyons maintenant comment Gutenberg se positionne par rapport aux extensions tierces de construction de pages.<\/p>\n<p><strong>Pour :<\/strong><\/p>\n<ul>\n<li>Gutenberg est une fonctionnalit\u00e9 du c\u0153ur, ce qui signifie que vous n&rsquo;avez pas \u00e0 vous soucier des probl\u00e8mes de compatibilit\u00e9.<\/li>\n<li>Comme il s&rsquo;agit d&rsquo;une fonctionnalit\u00e9 du c\u0153ur, tous les d\u00e9veloppeurs peuvent int\u00e9grer la prise en charge de Gutenberg dans leurs extensions, ce qui am\u00e9liore la compatibilit\u00e9.<\/li>\n<li>Gutenberg produit un code plus propre et plus l\u00e9ger. Toutes choses \u00e9gales par ailleurs, un design construit avec Gutenberg se chargera g\u00e9n\u00e9ralement plus rapidement que le m\u00eame design r\u00e9alis\u00e9 avec un constructeur de pages.<\/li>\n<\/ul>\n<p><strong>Contre :<\/strong><\/p>\n<ul>\n<li>Gutenberg n&rsquo;offre pas une \u00e9dition visuelle correcte comme un constructeur de pages. Il est plus accessible que l&rsquo;\u00e9diteur classique, mais pas encore 100\u00a0% transparent comme un constructeur de pages.<\/li>\n<li>Les constructeurs de pages vous offrent toujours des options de conception et de mise en page plus souples.<\/li>\n<li>La plupart des constructeurs de pages offrent un mouvement en glisser-d\u00e9poser beaucoup plus fluide et flexible.<\/li>\n<\/ul>\n<h3>R\u00e9flexions sur la comparaison<\/h3>\n<p>Pour la majorit\u00e9 des utilisateurs, Gutenberg est la solution id\u00e9ale en termes de flexibilit\u00e9.<\/p>\n<p>La plupart des gens n&rsquo;ont pas besoin de la flexibilit\u00e9 d&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeur de pages <\/a>pour leur contenu, surtout pour les articles de blog. Mais en m\u00eame temps, il est agr\u00e9able de mettre en place rapidement un design \u00e0 plusieurs colonnes ou d&rsquo;ins\u00e9rer un bouton, ce que l&rsquo;\u00e9diteur classique ne facilite pas.<\/p>\n<p>Avec cela en t\u00eate, voyons comment vous pouvez commencer \u00e0 utiliser Gutenberg.<\/p>\n<h2>Comment utiliser l&rsquo;\u00e9diteur de blocs WordPress Gutenberg ?<\/h2>\n<p>Maintenant que vous en savez un peu plus sur l&rsquo;\u00e9diteur de blocs Gutenberg, creusons la fa\u00e7on dont vous pouvez l&rsquo;utiliser pour commencer \u00e0 cr\u00e9er du contenu.<\/p>\n<p>Nous commencerons par une introduction \u00e0 l&rsquo;interface et d\u00e9velopperons progressivement des m\u00e9thodes plus avanc\u00e9es pour utiliser l&rsquo;\u00e9diteur et am\u00e9liorer vos flux de travail.<\/p>\n<h3>L&rsquo;interface de l&rsquo;\u00e9diteur de blocs Gutenberg<\/h3>\n<p>Lorsque vous ouvrez l&rsquo;\u00e9diteur, il masque la colonne lat\u00e9rale du tableau de bord de WordPress et vous offre une exp\u00e9rience en plein \u00e9cran :<\/p>\n<figure id=\"attachment_100519\" aria-describedby=\"caption-attachment-100519\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100519 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-editor-interface-1024x880.png\" alt=\"L'interface de l'\u00e9diteur de blocs Gutenberg de WordPress.\" width=\"1024\" height=\"880\"><figcaption id=\"caption-attachment-100519\" class=\"wp-caption-text\">L&rsquo;interface de l&rsquo;\u00e9diteur de blocs Gutenberg de WordPress.<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9diteur se compose de trois parties principales :<\/p>\n<ul>\n<li><strong>Contenu :<\/strong> Votre contenu occupe la majeure partie de l&rsquo;\u00e9cran. Vous verrez un aper\u00e7u visuel de ce \u00e0 quoi il ressemblera sur l\u2019interface publique de votre site. Ce n&rsquo;est pas tout \u00e0 fait exact, mais vous devriez avoir une assez bonne id\u00e9e de la conception finale.<\/li>\n<li><strong>Barre haute d&rsquo;outils :<\/strong> La barre d&rsquo;outils du haut vous aide \u00e0 ins\u00e9rer de nouveaux blocs, \u00e0 annuler\/r\u00e9tablir et \u00e0 acc\u00e9der \u00e0 d&rsquo;autres r\u00e9glages essentiels.<\/li>\n<li><strong>Colonne lat\u00e9rale :<\/strong> la colonne lat\u00e9rale contient deux onglets. L&rsquo;onglet <strong>Article<\/strong> vous permet de configurer les r\u00e9glages de l&rsquo;article, comme ses cat\u00e9gories, ses \u00e9tiquettes, son <a href=\"https:\/\/kinsta.com\/fr\/blog\/image-mise-en-avant-wordpress-non-affichee\/\">image mise en avant<\/a>, etc. L&rsquo;onglet <strong>Bloc<\/strong> affiche les r\u00e9glages du bloc que vous avez s\u00e9lectionn\u00e9 &#8211; nous y reviendrons plus tard.<\/li>\n<\/ul>\n<p>Pour cr\u00e9er une exp\u00e9rience d&rsquo;\u00e9criture plus immersive, vous pouvez masquer la colonne lat\u00e9rale en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0engrenage\u00a0\u00bb dans le coin sup\u00e9rieur droit. Pour faire r\u00e9appara\u00eetre la colonne lat\u00e9rale, il vous suffit de cliquer \u00e0 nouveau sur l&rsquo;ic\u00f4ne \u00ab\u00a0engrenage\u00a0\u00bb :<\/p>\n<figure id=\"attachment_100496\" aria-describedby=\"caption-attachment-100496\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100496 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/hide-sidebar-1024x665.png\" alt=\"En cliquant sur l'ic\u00f4ne \u00ab engrenage \u00bb, vous afficherez\/masquerez la barre lat\u00e9rale.\" width=\"1024\" height=\"665\"><figcaption id=\"caption-attachment-100496\" class=\"wp-caption-text\">En cliquant sur l&rsquo;ic\u00f4ne \u00ab engrenage \u00bb, vous afficherez\/masquerez la barre lat\u00e9rale.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><\/p>\n<p>Votre \u00e9diteur peut avoir un aspect l\u00e9g\u00e8rement diff\u00e9rent car les d\u00e9veloppeurs de th\u00e8mes ont la possibilit\u00e9 d&rsquo;ajouter leurs styles \u00e0 l&rsquo;\u00e9diteur pour cr\u00e9er une exp\u00e9rience plus visuelle. En fonction de votre th\u00e8me, vous pouvez voir des polices ou des <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-wordpress\/\">couleurs diff\u00e9rentes<\/a>.<\/p>\n<\/aside>\n\n<p>Par exemple, voici \u00e0 quoi ressemble l&rsquo;interface de l&rsquo;\u00e9diteur si vous utilisez <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\">le nouveau th\u00e8me par d\u00e9faut Twenty Twenty-One<\/a> :<\/p>\n<figure id=\"attachment_100518\" aria-describedby=\"caption-attachment-100518\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100518 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/basic-tutorial-3-interface-themed-1024x686.png\" alt=\"Un exemple du th\u00e8me Twenty Twenty-One qui applique ses styles \u00e0 l'\u00e9diteur de blocs.\" width=\"1024\" height=\"686\"><figcaption id=\"caption-attachment-100518\" class=\"wp-caption-text\">Un exemple du th\u00e8me Twenty Twenty-One qui applique ses styles \u00e0 l&rsquo;\u00e9diteur de blocs.<\/figcaption><\/figure>\n<h3>Ajouter des blocs<\/h3>\n<p>Pour ajouter un texte de paragraphe ordinaire \u00e0 votre article, vous pouvez simplement cliquer et saisir. Chaque fois que vous appuyez sur la touche Entr\u00e9e, l&rsquo;\u00e9diteur cr\u00e9e automatiquement un nouveau bloc de paragraphe.<\/p>\n<p>Pour les autres types de contenu, vous devrez ins\u00e9rer un nouveau bloc. Vous utiliserez des blocs pour les images, les boutons, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/embarquer-videos-youtube-wordpress\/\">vid\u00e9os<\/a>, etc.<\/p>\n<p>Pour ajouter un nouveau bloc, vous pouvez cliquer sur l&rsquo;une des ic\u00f4nes \u00ab\u00a0plus\u00a0\u00bb de l&rsquo;interface. Il s&rsquo;agit de l&rsquo;ic\u00f4ne principale d&rsquo;insertion de bloc dans le coin sup\u00e9rieur gauche, mais vous verrez \u00e9galement d&rsquo;autres ic\u00f4nes \u00e0 l&rsquo;int\u00e9rieur de l&rsquo;interface qui ouvrent une interface d&rsquo;insertion de bloc plus petite :<\/p>\n<figure id=\"attachment_100497\" aria-describedby=\"caption-attachment-100497\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100497 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-block-options-1024x785.png\" alt=\"Les ic\u00f4nes \u00ab plus \u00bb vous permettent d'ins\u00e9rer un nouveau bloc.\" width=\"1024\" height=\"785\"><figcaption id=\"caption-attachment-100497\" class=\"wp-caption-text\">Les ic\u00f4nes \u00ab plus \u00bb vous permettent d&rsquo;ins\u00e9rer un nouveau bloc.<\/figcaption><\/figure>\n<p>Pour commencer, placez le curseur de votre souris \u00e0 l&rsquo;endroit o\u00f9 vous souhaitez ins\u00e9rer le nouveau bloc. Par exemple, pour ajouter un nouveau bloc sous le bouton, vous pouvez cliquer sous le bouton, puis sur l&rsquo;ic\u00f4ne <strong>+<\/strong>.<\/p>\n<p>Vous devriez voir un panneau lat\u00e9ral qui affiche tous les blocs disponibles, divis\u00e9s en diff\u00e9rentes cat\u00e9gories. Vous pouvez soit rechercher un bloc sp\u00e9cifique, soit choisir une option dans la liste. Lorsque vous passez la souris sur un bloc, vous verrez une description de ce qu&rsquo;il fait et un aper\u00e7u.<\/p>\n<p>Pour ins\u00e9rer le bloc, il suffit de cliquer dessus. Par exemple, pour ins\u00e9rer une <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\">image<\/a> ordinaire, il suffit de cliquer sur le bloc image :<\/p>\n<figure id=\"attachment_100503\" aria-describedby=\"caption-attachment-100503\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100503 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/main-block-inserter-1024x849.png\" alt=\"Cliquez sur le type de bloc que vous souhaitez ins\u00e9rer.\" width=\"1024\" height=\"849\"><figcaption id=\"caption-attachment-100503\" class=\"wp-caption-text\">Cliquez sur le type de bloc que vous souhaitez ins\u00e9rer.<\/figcaption><\/figure>\n<p>Vous pouvez ensuite suivre les instructions pour t\u00e9l\u00e9verser ou choisir une image existante dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\">m\u00e9diath\u00e8que<\/a>.<\/p>\n<h3>Options de formatage essentielles<\/h3>\n<p>Pour effectuer des choix de formatage de base pour vos blocs, vous disposez d&rsquo;une barre d&rsquo;outils flottante qui appara\u00eet lorsque vous cliquez sur un bloc.<\/p>\n<p>Si vous mettez en forme du texte ordinaire, c&rsquo;est ici que vous pouvez :<\/p>\n<ul>\n<li>Ajouter des caract\u00e8res gras ou italiques<\/li>\n<li>Ins\u00e9rer des liens<\/li>\n<li>Modifier les alignements<\/li>\n<li>Ajouter des \u00e9l\u00e9ments de mise en forme, comme le code en ligne, le texte barr\u00e9 et l&rsquo;abonnement.<\/li>\n<\/ul>\n<figure id=\"attachment_100528\" aria-describedby=\"caption-attachment-100528\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100528 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/floating-formatting-toolbar-1024x650.png\" alt=\"La barre d'outils flottante vous permet de faire des choix de formatage de base.\" width=\"1024\" height=\"650\"><figcaption id=\"caption-attachment-100528\" class=\"wp-caption-text\">La barre d&rsquo;outils flottante vous permet de faire des choix de formatage de base.<\/figcaption><\/figure>\n<p>Par exemple, disons que vous souhaitez ins\u00e9rer un lien dans votre contenu. Vous devez d&rsquo;abord s\u00e9lectionner le texte sp\u00e9cifique que vous souhaitez lier &#8211; dans notre exemple, il s&rsquo;agit de \u00ab\u00a0For other types of content\u00a0\u00bb. Ensuite, vous pouvez cliquer sur l&rsquo;ic\u00f4ne de lien dans la barre d&rsquo;outils pour ouvrir les options d&rsquo;insertion de lien :<\/p>\n<figure id=\"attachment_100500\" aria-describedby=\"caption-attachment-100500\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100500 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-link-1024x608.png\" alt=\"Insertion d'un lien dans l'\u00e9diteur de blocs WordPress Gutenberg.\" width=\"1024\" height=\"608\"><figcaption id=\"caption-attachment-100500\" class=\"wp-caption-text\">Insertion d&rsquo;un lien dans l&rsquo;\u00e9diteur de blocs WordPress Gutenberg.<\/figcaption><\/figure>\n<h3>Configuration des r\u00e9glages avanc\u00e9s de bloc<\/h3>\n<p>Tous les blocs que vous ins\u00e9rez sont accompagn\u00e9s de r\u00e9glages suppl\u00e9mentaires dans la colonne lat\u00e9rale. Certains blocs ne vous offrent que quelques r\u00e9glages, tandis que d&rsquo;autres vous offrent plusieurs options pour contr\u00f4ler le <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\">design<\/a>, la mise en page, les fonctionnalit\u00e9s, etc.<\/p>\n<p>Pour ouvrir les r\u00e9glages d&rsquo;un bloc, cliquez sur le bloc dans l&rsquo;\u00e9diteur pour le s\u00e9lectionner. Ensuite, allez dans l&rsquo;onglet <strong>Bloc<\/strong> dans la colonne lat\u00e9rale pour voir ses r\u00e9glages.<\/p>\n<p>Ci-dessous, vous pouvez voir les r\u00e9glages du bloc de boutons, qui est l&rsquo;un des blocs les plus flexibles. Vous pouvez en changer la couleur, le rendre plus large, et bien d&rsquo;autres choses encore.<\/p>\n<p>Lorsque vous modifiez les r\u00e9glages d&rsquo;un bloc, vous voyez instantan\u00e9ment ces changements se refl\u00e9ter dans l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_100521\" aria-describedby=\"caption-attachment-100521\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100521 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-settings-button-1024x982.png\" alt=\"Vous pouvez acc\u00e9der aux r\u00e9glages d'un bloc dans la colonne lat\u00e9rale.\" width=\"1024\" height=\"982\"><figcaption id=\"caption-attachment-100521\" class=\"wp-caption-text\">Vous pouvez acc\u00e9der aux r\u00e9glages d&rsquo;un bloc dans la colonne lat\u00e9rale.<\/figcaption><\/figure>\n<p>L\u00e0 encore, chaque bloc poss\u00e8de des r\u00e9glages qui lui sont propres. Par exemple, si vous ouvrez les r\u00e9glages du texte d&rsquo;un paragraphe ordinaire, vous obtenez seulement quelques options basiques de <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-modernes\/\">typographie<\/a> et de couleur. Ci-dessous, vous pouvez voir que nous avons pu appliquer un arri\u00e8re-plan de couleur pour mettre en \u00e9vidence certains textes :<\/p>\n<figure id=\"attachment_100507\" aria-describedby=\"caption-attachment-100507\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100507 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/paragraph-text-settings-1024x877.png\" alt=\"Les r\u00e9glages de bloc pour un texte de paragraphe ordinaire.\" width=\"1024\" height=\"877\"><figcaption id=\"caption-attachment-100507\" class=\"wp-caption-text\">Les r\u00e9glages de bloc pour un texte de paragraphe ordinaire.<\/figcaption><\/figure>\n<h3>R\u00e9organiser les blocs<\/h3>\n<p>En plus d&rsquo;utiliser le copier-coller (ce que vous pouvez faire pour le texte comme dans n&rsquo;importe quel autre \u00e9diteur), Gutenberg vous offre deux fa\u00e7ons principales de r\u00e9organiser les blocs.<\/p>\n<p>Tout d&rsquo;abord, si vous souhaitez d\u00e9placer un bloc de quelques positions vers le haut ou vers le bas, vous pouvez utiliser les fl\u00e8ches haut et bas de la barre d&rsquo;outils flottante.<\/p>\n<p>Pour les d\u00e9placements plus importants, vous pouvez utiliser le glisser-d\u00e9poser. Pour faire glisser et d\u00e9poser un bloc, vous devez cliquer sur l&rsquo;ic\u00f4ne \u00ab\u00a0six points\u00a0\u00bb \u00e0 gauche des fl\u00e8ches.<\/p>\n<p>Une fois que vous avez cliqu\u00e9 et maintenu votre souris sur cette ic\u00f4ne, vous pouvez faire glisser le bloc n&rsquo;importe o\u00f9 sur la page:<\/p>\n<figure id=\"attachment_100511\" aria-describedby=\"caption-attachment-100511\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100511 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/rearrange-blocks-1024x622.png\" alt=\"Vous pouvez r\u00e9organiser les blocs \u00e0 l'aide des fl\u00e8ches ou par glisser-d\u00e9poser.\" width=\"1024\" height=\"622\"><figcaption id=\"caption-attachment-100511\" class=\"wp-caption-text\">Vous pouvez r\u00e9organiser les blocs \u00e0 l&rsquo;aide des fl\u00e8ches ou par glisser-d\u00e9poser.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Le copier-coller peut s&rsquo;av\u00e9rer d\u00e9licat pour le contenu non textuel. Un peu plus loin dans cet article, nous vous montrerons comment copier et coller des blocs entiers tout en pr\u00e9servant leurs styles.<\/p>\n<\/aside>\n\n<h3>Incorporation de contenu provenant d&rsquo;autres sources<\/h3>\n<p>Gutenberg est livr\u00e9 avec des blocs d\u00e9di\u00e9s pour int\u00e9grer du contenu provenant de sources tierces comme YouTube, Vimeo, Soundcloud, etc. Vous pouvez trouver toutes ces options dans la section <strong>Contenus embarqu\u00e9s<\/strong> de l&rsquo;outil d\u2019insertion de blocs.<\/p>\n<p>Par exemple, pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/embarquer-videos-youtube-wordpress\/\">int\u00e9grer une vid\u00e9o YouTube<\/a>, vous avez juste \u00e0 :<\/p>\n<ol>\n<li>Ajouter le bloc d\u00e9di\u00e9 YouTube<\/li>\n<li>Coller l&rsquo;URL directe de la vid\u00e9o.<\/li>\n<li>Cliquer sur <strong>Int\u00e9grer.<\/strong><\/li>\n<\/ol>\n<figure id=\"attachment_100527\" aria-describedby=\"caption-attachment-100527\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100527 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/embed-youtube-video-1024x821.png\" alt=\"Int\u00e9grer une vid\u00e9o YouTube dans Gutenberg.\" width=\"1024\" height=\"821\"><figcaption id=\"caption-attachment-100527\" class=\"wp-caption-text\">Int\u00e9grer une vid\u00e9o YouTube dans Gutenberg.<\/figcaption><\/figure>\n<p>Vous devriez alors voir un aper\u00e7u de la vid\u00e9o int\u00e9gr\u00e9e dans l&rsquo;\u00e9diteur.<\/p>\n<h3>Cr\u00e9ation de mises en page multi-colonnes ou group\u00e9es<\/h3>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 pr\u00e9c\u00e9demment, l&rsquo;un des principaux avantages de l&rsquo;\u00e9diteur de blocs par rapport \u00e0 l&rsquo;ancien \u00e9diteur TinyMCE est que vous pouvez cr\u00e9er des mises en page plus complexes sans avoir besoin de recourir \u00e0 du <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/#css\">code personnalis\u00e9<\/a> ou \u00e0 des codes courts.<\/p>\n<p>L&rsquo;\u00e9diteur de blocs est livr\u00e9 avec deux blocs par d\u00e9faut pour vous aider \u00e0 le faire :<\/p>\n<ul>\n<li><strong>Colonnes :<\/strong> Cr\u00e9ez une mise en page \u00e0 plusieurs colonnes.<\/li>\n<li><strong style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Groupes :<\/strong> Regroupez plusieurs blocs. Par exemple, vous pouvez l&rsquo;utiliser pour d\u00e9finir une couleur d&rsquo;arri\u00e8re-plan pour une section enti\u00e8re qui s&rsquo;affiche derri\u00e8re de nombreux blocs.<\/li>\n<\/ul>\n<p>Ces deux blocs fonctionnent sur le principe de \u00ab\u00a0l\u2019imbrication\u00a0\u00bb des blocs, ce qui signifie que vous placerez un ou plusieurs blocs <em>\u00e0 l&rsquo;int\u00e9rieur <\/em>d&rsquo;un autre bloc.<\/p>\n<p>Nous allons vous montrer un exemple utilisant le bloc colonnes, mais le m\u00eame principe de base s&rsquo;applique au bloc groupe.<\/p>\n<p>Supposons que vous souhaitiez cr\u00e9er une mise en page en deux colonnes, la colonne de gauche contenant un paragraphe de texte normal et la colonne de droite un bouton.<\/p>\n<p>Pour commencer, vous pouvez utiliser l&rsquo;outil d\u2019insertion de blocs pour ajouter le bloc colonnes. Une invite s&rsquo;affichera pour vous permettre de choisir la mise en page que vous pr\u00e9f\u00e9rez :<\/p>\n<figure id=\"attachment_100523\" aria-describedby=\"caption-attachment-100523\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100523 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/choose-columns-layout-1024x631.png\" alt=\"Choisissez la structure et le ratio des colonnes.\" width=\"1024\" height=\"631\"><figcaption id=\"caption-attachment-100523\" class=\"wp-caption-text\">Choisissez la structure et le ratio des colonnes.<\/figcaption><\/figure>\n<p>Nous allons choisir une mise en page 50\/50 sur deux colonnes pour cet exemple. Vous verrez alors deux cases de taille \u00e9gale avec des ic\u00f4nes <strong>+<\/strong> \u00e0 l&rsquo;int\u00e9rieur. Pour ins\u00e9rer du contenu, vous pouvez cliquer sur cette ic\u00f4ne <strong>+<\/strong> pour ouvrir l&rsquo;interface d&rsquo;insertion de blocs :<\/p>\n<figure id=\"attachment_100498\" aria-describedby=\"caption-attachment-100498\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100498 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-content-in-columns-1024x685.png\" alt=\"Comment ajouter du contenu aux colonnes.\" width=\"1024\" height=\"685\"><figcaption id=\"caption-attachment-100498\" class=\"wp-caption-text\">Comment ajouter du contenu aux colonnes.<\/figcaption><\/figure>\n<p>Une fois que vous avez ajout\u00e9 le premier bloc \u00e0 une colonne, vous pouvez cliquer sur l&rsquo;ic\u00f4ne <strong>+<\/strong> pour ins\u00e9rer des blocs suppl\u00e9mentaires. Vous pouvez \u00e9galement faire glisser et d\u00e9poser dans la colonne un bloc situ\u00e9 en dehors de la structure de la colonne.<\/p>\n<h2>10 astuces utiles de Gutenberg pour travailler de mani\u00e8re plus productive<\/h2>\n<p>Maintenant que vous avez une compr\u00e9hension basique du fonctionnement de Gutenberg, passons en revue quelques pr\u00e9cieux conseils et astuces qui vous aideront \u00e0 utiliser l&rsquo;\u00e9diteur de blocs plus efficacement.<\/p>\n<h3><strong>1. Utilisez <\/strong><code><strong>\/<\/strong><\/code> <strong>(barre oblique) pour ins\u00e9rer rapidement des blocs.<\/strong><\/h3>\n<p>Si vous devez ins\u00e9rer de nombreux blocs, ouvrir manuellement l&rsquo;outil d\u2019insertion de blocs peut devenir un peu fastidieux. Heureusement, une fois que vous commencez \u00e0 apprendre les noms des blocs courants que vous devez utiliser, il existe un moyen beaucoup plus rapide d&rsquo;ins\u00e9rer des blocs en utilisant uniquement votre clavier : <code>\/<\/code> (barre oblique).<\/p>\n<p>Si vous appuyez sur \u00ab\u00a0Entr\u00e9e\u00a0\u00bb pour commencer un nouveau bloc de paragraphe, vous pouvez ins\u00e9rer rapidement un bloc en saisissant une barre oblique ( \/ ), suivie du nom du bloc que vous voulez ins\u00e9rer.<\/p>\n<p>Lorsque vous commencerez \u00e0 saisir, vous verrez appara\u00eetre une liste de tous les blocs qui correspondent \u00e0 votre requ\u00eate. Vous pouvez alors utiliser les fl\u00e8ches de votre clavier pour naviguer dans les blocs et appuyer sur \u00ab\u00a0Entr\u00e9e\u00a0\u00bb pour s\u00e9lectionner le bloc que vous souhaitez ins\u00e9rer.<\/p>\n<p>Voici un exemple d&rsquo;utilisation de l&rsquo;insertion rapide pour ajouter un bloc d&rsquo;images :<\/p>\n<figure id=\"attachment_100510\" aria-describedby=\"caption-attachment-100510\" style=\"width: 1760px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100510 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/quick-insert-block.gif\" alt=\"Comment utiliser la barre oblique pour ins\u00e9rer rapidement des blocs.\" width=\"1760\" height=\"1205\"><figcaption id=\"caption-attachment-100510\" class=\"wp-caption-text\">Comment utiliser la barre oblique pour ins\u00e9rer rapidement des blocs.<\/figcaption><\/figure>\n<h3>2. Ins\u00e9rer des images en les faisant glisser depuis votre bureau<\/h3>\n<p>Si vous ins\u00e9rez de nombreuses images, l&rsquo;\u00e9diteur de blocs comprend une autre fonctionnalit\u00e9 qui vous permet de gagner du temps : vous n&rsquo;avez plus besoin d&rsquo;ajouter un bloc d&rsquo;images avant de <a href=\"https:\/\/kinsta.com\/fr\/blog\/televerser-fichiers-masse-ftp\/\">t\u00e9l\u00e9verser une image<\/a>.<\/p>\n<p>Au lieu de cela, vous pouvez faire glisser le fichier image directement depuis votre bureau vers l&#8217;emplacement o\u00f9 vous souhaitez l&rsquo;ajouter \u00e0 votre article. Lorsque vous faites glisser le fichier image sur le contenu de votre site, vous verrez une ligne bleue indiquant l&#8217;emplacement de l&rsquo;image.<\/p>\n<p>Une fois que vous aurez publi\u00e9 le fichier, WordPress le t\u00e9l\u00e9versera automatiquement et ins\u00e9rera un bloc d&rsquo;images \u00e0 l&#8217;emplacement appropri\u00e9:<\/p>\n<figure id=\"attachment_100515\" aria-describedby=\"caption-attachment-100515\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100515 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/upload-images-drag-from-desktop-1024x595.png\" alt=\"Vous pouvez ins\u00e9rer des images en faisant glisser le fichier depuis votre bureau.\" width=\"1024\" height=\"595\"><figcaption id=\"caption-attachment-100515\" class=\"wp-caption-text\">Vous pouvez ins\u00e9rer des images en faisant glisser le fichier depuis votre bureau.<\/figcaption><\/figure>\n<h3>3. Utiliser le formatage Markdown<\/h3>\n<p>Si vous \u00eates un adepte de la syntaxe Markdown pour la cr\u00e9ation de contenu, vous serez heureux d&rsquo;apprendre que l&rsquo;\u00e9diteur de blocs prend en charge une utilisation limit\u00e9e de <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-markdown\/\">cette syntaxe<\/a>, principalement pour les titres.<\/p>\n<p>Par exemple, si vous voulez ins\u00e9rer un bloc d&rsquo;en-t\u00eate avec une balise H3, vous pouvez saisir trois hashtags (`###`) puis appuyer sur la barre d&rsquo;espace. L&rsquo;\u00e9diteur les convertira automatiquement en H3, et vous pourrez continuer \u00e0 saisir l&rsquo;en-t\u00eate :<\/p>\n<figure id=\"attachment_100504\" aria-describedby=\"caption-attachment-100504\" style=\"width: 1749px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100504 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/markdown-support.gif\" alt=\"L'\u00e9diteur de blocs prend en charge la syntaxe Markdown basique pour les tit\" width=\"1749\" height=\"1008\"><figcaption id=\"caption-attachment-100504\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur de blocs prend en charge la syntaxe Markdown basique pour les titres<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>Supposons que vous vouliez un support Markdown encore plus avanc\u00e9. Dans ce cas, vous pouvez installer une extension gratuite comme EditorsKit, qui vous permet \u00e9galement d&rsquo;utiliser Markdown pour le gras, l&rsquo;italique et le texte barr\u00e9 &#8211; nous parlerons plus en d\u00e9tail des extensions Gutenberg un peu plus loin dans cet article.<\/p>\n<h3>4. \u00c9pingler la barre d&rsquo;outils de formatage en haut de l&rsquo;\u00e9diteur<\/h3>\n<p>Si vous n&rsquo;aimez pas la fa\u00e7on dont l&rsquo;outil de formatage \u00ab flotte \u00bb au-dessus d&rsquo;un bloc, l&rsquo;\u00e9diteur de blocs comprend une fonction qui vous permet de l&rsquo;\u00e9pingler sous la barre d&rsquo;outils sup\u00e9rieure :<\/p>\n<figure id=\"attachment_100508\" aria-describedby=\"caption-attachment-100508\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100508 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/pin-top-toolbar-1024x769.png\" alt=\"Vous pouvez \u00e9pingler la barre d'outils de formatage en haut.\" width=\"1024\" height=\"769\"><figcaption id=\"caption-attachment-100508\" class=\"wp-caption-text\">Vous pouvez \u00e9pingler la barre d&rsquo;outils de formatage en haut.<\/figcaption><\/figure>\n<h3>5. Copier un bloc et tous ses r\u00e9glages<\/h3>\n<p>L&rsquo;\u00e9diteur de blocs vous permet de copier et de coller du texte comme vous le feriez dans n&rsquo;importe quel \u00e9diteur &#8211; \u00ab\u00a0<strong>Ctrl + C<\/strong>\u00a0\u00bb ou en cliquant avec le bouton droit de la souris et en choisissant <strong>Copier<\/strong>.<\/p>\n<p>Cependant, vous ne pouvez pas utiliser cette m\u00e9thode pour copier et coller un bloc entier tout en pr\u00e9servant ses r\u00e9glages. \u00c0 la place, vous devrez :<\/p>\n<ol>\n<li>S\u00e9lectionner le bloc.<\/li>\n<li>Cliquer sur l&rsquo;ic\u00f4ne des trois points dans la barre d&rsquo;outils du bloc.<\/li>\n<li>S\u00e9lectionner <strong>Copier<\/strong>.<\/li>\n<\/ol>\n<figure id=\"attachment_100524\" aria-describedby=\"caption-attachment-100524\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100524 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/copy-block-settings-1024x860.png\" alt=\"Comment copier un bloc avec tous ses r\u00e9glages.\" width=\"1024\" height=\"860\"><figcaption id=\"caption-attachment-100524\" class=\"wp-caption-text\">Comment copier un bloc avec tous ses r\u00e9glages.<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>Une fois que vous avez copi\u00e9 le bloc de cette mani\u00e8re, vous pouvez le coller comme vous le feriez habituellement, c&rsquo;est-\u00e0-dire en faisant \u00ab <strong>Ctrl + V<\/strong> \u00bb ou en cliquant avec le bouton droit de la souris et en choisissant \u00ab <strong>Coller<\/strong> \u00bb.<\/p>\n<h3>6. S\u00e9lectionner rapidement le bon bloc \u00e0 l&rsquo;aide de la vue Liste des blocs<\/h3>\n<p>Pour la plupart des blocs, vous pouvez simplement cliquer sur l&rsquo;\u00e9diteur pour s\u00e9lectionner le bloc. Cependant, cela peut devenir d\u00e9licat si vous commencez \u00e0 utiliser des blocs \u00ab\u00a0imbriqu\u00e9s\u00a0\u00bb, comme l&rsquo;insertion de blocs \u00e0 l&rsquo;int\u00e9rieur des colonnes ou des blocs de groupe.<\/p>\n<p>L&rsquo;\u00e9diteur comprend une option de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#persistent-list-view-in-the-post-editor\">vue en liste<\/a>, que vous pouvez ouvrir \u00e0 partir de la barre d&rsquo;outils sup\u00e9rieure pour tenir compte de cela. La vue en liste vous montrera chaque bloc, y compris les blocs imbriqu\u00e9s.<\/p>\n<p>Vous pouvez s\u00e9lectionner un bloc en cliquant dessus dans la liste, et l&rsquo;\u00e9diteur le mettra \u00e9galement en \u00e9vidence lorsque vous le survolerez dans la liste.<\/p>\n<p>Dans l&rsquo;exemple ci-dessous, vous pouvez voir :<\/p>\n<ul>\n<li>Le bloc primaire de colonnes parent<\/li>\n<li>Les blocs imbriqu\u00e9s pour chaque colonne<\/li>\n<li>Un bloc de groupe imbriqu\u00e9 dans une colonne<\/li>\n<li>Un bloc d&rsquo;en-t\u00eate imbriqu\u00e9 \u00e0 l&rsquo;int\u00e9rieur du bloc Groupe<\/li>\n<\/ul>\n<p>Pour s\u00e9lectionner le bloc parent principal, vous pouvez simplement ouvrir la vue en liste et le s\u00e9lectionner dans la liste:<\/p>\n<figure id=\"attachment_100502\" aria-describedby=\"caption-attachment-100502\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100502 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/list-view-1024x712.png\" alt=\"L'ouverture de la vue en liste vous aide \u00e0 naviguer dans les blocs imbriqu\u00e9s.\" width=\"1024\" height=\"712\"><figcaption id=\"caption-attachment-100502\" class=\"wp-caption-text\">L&rsquo;ouverture de la vue en liste vous aide \u00e0 naviguer dans les blocs imbriqu\u00e9s.<\/figcaption><\/figure>\n<h3>7. Ouvrir l&rsquo;\u00e9diteur de code (pour les blocs individuels ou les articles complets)<\/h3>\n<p>L&rsquo;un des avantages de l&rsquo;\u00e9diteur de blocs Gutenberg est qu&rsquo;il vous permet de configurer de nombreux styles et options de mise en page sans recourir au code. Cependant, vous pouvez toujours avoir certaines situations o\u00f9 vous souhaitez <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/\">acc\u00e9der directement au code<\/a> pour les utilisateurs plus avanc\u00e9s.<\/p>\n<p>Pour vous aider \u00e0 le faire, l&rsquo;\u00e9diteur Gutenberg est livr\u00e9 avec quelques options diff\u00e9rentes.<\/p>\n<p>Tout d&rsquo;abord, vous pouvez modifier le code d&rsquo;un bloc individuel, ce qui est utile pour les petites modifications comme l&rsquo;insertion d&rsquo;une classe CSS. Pour cela, ouvrez le menu d\u00e9roulant de la barre d&rsquo;outils du bloc et s\u00e9lectionnez <strong>Modifier en HTML<\/strong>:<\/p>\n<figure id=\"attachment_100505\" aria-describedby=\"caption-attachment-100505\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100505 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/open-html-editor-1024x762.png\" alt=\"Comment modifier un seul bloc en HTML.\" width=\"1024\" height=\"762\"><figcaption id=\"caption-attachment-100505\" class=\"wp-caption-text\">Comment modifier un seul bloc en HTML.<\/figcaption><\/figure>\n<p>En s\u00e9lectionnant cette option, l&rsquo;aper\u00e7u visuel se transforme en \u00e9diteur de code pour ce bloc uniquement, sans affecter les aper\u00e7us visuels des autres blocs :<\/p>\n<figure id=\"attachment_100506\" aria-describedby=\"caption-attachment-100506\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100506 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/open-html-editor-2-1024x513.png\" alt=\"L'\u00e9diteur HTML pour un seul bloc.\" width=\"1024\" height=\"513\"><figcaption id=\"caption-attachment-100506\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur HTML pour un seul bloc.<\/figcaption><\/figure>\n<p>Deuxi\u00e8mement, l&rsquo;\u00e9diteur comprend un bloc <a href=\"https:\/\/kinsta.com\/fr\/blog\/html-vs-html5\/\">HTML<\/a> personnalis\u00e9 que vous pouvez utiliser pour int\u00e9grer des extraits HTML complets. Il vous suffit d&rsquo;ajouter le bloc et de coller votre code.<\/p>\n<p>Enfin, vous pouvez \u00e9galement ouvrir l&rsquo;\u00e9diteur de code complet pour l&rsquo;ensemble du document en utilisant la liste d\u00e9roulante dans le coin sup\u00e9rieur droit ou un raccourci clavier : <strong>Ctrl + Shift + Alt + M<\/strong>.<\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que, lorsque vous ouvrez l&rsquo;\u00e9diteur de code complet, vous verrez \u00e9galement le balisage du formatage des blocs de Gutenberg, de sorte qu&rsquo;il peut \u00eatre un peu d\u00e9licat de naviguer :<\/p>\n<figure id=\"attachment_100529\" aria-describedby=\"caption-attachment-100529\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100529 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-code-editor-1024x974.png\" alt=\"L'\u00e9diteur de code complet, qui inclut le balisage du bloc.\" width=\"1024\" height=\"974\"><figcaption id=\"caption-attachment-100529\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur de code complet, qui inclut le balisage du bloc.<\/figcaption><\/figure>\n<h3>8. Apprendre les raccourcis clavier<\/h3>\n<p>L&rsquo;\u00e9diteur de blocs comprend de nombreux <a href=\"https:\/\/kinsta.com\/fr\/blog\/raccourcis-clavier-wordpress\/\">raccourcis clavier<\/a> qui vous permettent d&rsquo;effectuer des actions courantes. Cela vaut la peine de prendre le temps de les apprendre car ils vous rendront plus productif et vous \u00e9viteront de nombreux clics de souris r\u00e9p\u00e9titifs.<\/p>\n<p>Voici quelques-uns des raccourcis les plus courants &#8211; si vous \u00eates sur un Mac, vous voudrez remplacer \u00ab\u00a0Ctrl\u00a0\u00bb par \u00ab\u00a0Commande (\u2318)\u00a0\u00bb :<\/p>\n<ul>\n<li>Ouvrir la vue en liste de bloc &#8211; <strong>Shift + Alt + O<\/strong><\/li>\n<li>Enregistrer vos modifications &#8211; <strong>Ctrl + S<\/strong><\/li>\n<li>Annuler votre ou vos derni\u00e8res modifications &#8211; <strong>Ctrl + Z<\/strong><\/li>\n<li>R\u00e9tablir votre derni\u00e8re annulation &#8211; <strong>Ctrl + Shift + Z<\/strong><\/li>\n<li>Dupliquer le ou les blocs s\u00e9lectionn\u00e9s &#8211; <strong>Ctrl + Shift + D<\/strong><\/li>\n<li>Supprimer le ou les blocs s\u00e9lectionn\u00e9s &#8211; <strong>Shift + Alt + Z<\/strong><\/li>\n<li>Ins\u00e9rer un nouveau bloc avant le ou les blocs s\u00e9lectionn\u00e9s &#8211; <strong>Ctrl + Alt + T<\/strong><\/li>\n<li>Ins\u00e9rer un nouveau bloc apr\u00e8s le ou les blocs s\u00e9lectionn\u00e9s &#8211; <strong>Ctrl + Alt + Y<\/strong><\/li>\n<\/ul>\n<p>Vous pouvez \u00e9galement ouvrir un aide-m\u00e9moire complet de tous les raccourcis clavier lorsque vous \u00eates dans l&rsquo;\u00e9diteur. Pour cela, vous pouvez soit utiliser un raccourci clavier &#8211; <strong>Shift + Alt + H<\/strong> &#8211; soit cliquer sur l&rsquo;ic\u00f4ne de menu \u00ab\u00a0trois points verticaux\u00a0\u00bb (<strong>\u22ee<\/strong>) dans le coin sup\u00e9rieur droit de l&rsquo;\u00e9diteur et choisir <strong>Raccourcis clavier<\/strong> dans la liste d\u00e9roulante.<\/p>\n<h3>9. Nettoyer votre interface en masquant les blocs<\/h3>\n<p>L&rsquo;\u00e9diteur de blocs ajoute de nombreux blocs par d\u00e9faut, mais vous ne les utiliserez probablement pas tous. Pour vous aider \u00e0 nettoyer l&rsquo;interface, l&rsquo;\u00e9diteur comprend une fonction appel\u00e9e <strong>Gestionnaire de blocs<\/strong> qui vous permet de d\u00e9sactiver et de masquer les blocs que vous n&rsquo;utilisez pas :<\/p>\n<figure id=\"attachment_100520\" aria-describedby=\"caption-attachment-100520\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100520 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-manager-1024x962.png\" alt=\"Vous pouvez d\u00e9cocher les blocs pour les masquer de l'outil d\u2019insertion de blocs.\" width=\"1024\" height=\"962\"><figcaption id=\"caption-attachment-100520\" class=\"wp-caption-text\">Vous pouvez d\u00e9cocher les blocs pour les masquer de l&rsquo;outil d\u2019insertion de blocs.<\/figcaption><\/figure>\n<h3>10. Ajouter des ancres pour les liens de saut<\/h3>\n<p>Enfin, notre derni\u00e8re astuce utile est la fonction de lien d&rsquo;ancrage HTML de l&rsquo;\u00e9diteur de blocs, qui vous permet de <a href=\"https:\/\/kinsta.com\/fr\/blog\/liens-ancrage\/\">cr\u00e9er des liens directs vers des sections sp\u00e9cifiques de votre contenu<\/a> (par exemple, pour une table des mati\u00e8res).<\/p>\n<p>Dans l&rsquo;\u00e9diteur classique, vous deviez ajouter des ancres HTML en utilisant du code manuellement. Avec Gutenberg, il suffit de saisir le texte de votre lien de saut dans le champ <strong>ancre HTML<\/strong> dans la zone <strong>avanc\u00e9e<\/strong> des r\u00e9glages de chaque bloc :<\/p>\n<figure id=\"attachment_100517\" aria-describedby=\"caption-attachment-100517\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100517 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/anchor-text-1024x758.png\" alt=\"Comment d\u00e9finir un texte d'ancre personnalis\u00e9.\" width=\"1024\" height=\"758\"><figcaption id=\"caption-attachment-100517\" class=\"wp-caption-text\">Comment d\u00e9finir un texte d&rsquo;ancre personnalis\u00e9.<\/figcaption><\/figure>\n<h2>Approfondir les concepts plus avanc\u00e9s de l&rsquo;\u00e9diteur de blocs<\/h2>\n<p>\u00c0 ce stade, nous avons couvert une bonne partie du fonctionnement de l&rsquo;\u00e9diteur et quelques astuces pour travailler plus efficacement. Maintenant que vous avez acquis ces connaissances de base, nous allons passer en revue deux tactiques l\u00e9g\u00e8rement plus avanc\u00e9es :<\/p>\n<ul>\n<li>Compositions de blocs<\/li>\n<li>Blocs r\u00e9utilisables<\/li>\n<\/ul>\n<h3>Compositions de blocs<\/h3>\n<p>Une <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-5\/#block-patterns\">composition de bloc<\/a> est essentiellement un mod\u00e8le. Il s&rsquo;agit d&rsquo;une collection de blocs dispos\u00e9s selon une mise en page. Il peut s&rsquo;agir d&rsquo;un \u00e9l\u00e9ment mineur, comme une disposition de boutons. Il peut m\u00eame s&rsquo;agir d&rsquo;un mod\u00e8le pour une section enti\u00e8re, voire une page enti\u00e8re.<\/p>\n<p>WordPress est livr\u00e9 avec ses propres compositions de blocs int\u00e9gr\u00e9es, et les d\u00e9veloppeurs d\u2019extensions tierces peuvent \u00e9galement ajouter les leurs.<\/p>\n<p>Vous pouvez ins\u00e9rer de nouvelles compositions \u00e0 partir de l&rsquo;onglet <strong>Compositions<\/strong> du module d&rsquo;insertion de blocs principal:<\/p>\n<figure id=\"attachment_100516\" aria-describedby=\"caption-attachment-100516\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100516 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/add-block-patterns-1024x898.png\" alt=\"Comment ins\u00e9rer une composition de bloc.\" width=\"1024\" height=\"898\"><figcaption id=\"caption-attachment-100516\" class=\"wp-caption-text\">Comment ins\u00e9rer une composition de bloc.<\/figcaption><\/figure>\n<p>Une fois que vous avez ins\u00e9r\u00e9 la composition de bloc, vous pouvez modifier enti\u00e8rement tous les blocs qui composent celle-ci, comme si vous aviez ajout\u00e9 les blocs manuellement.<\/p>\n<p>Actuellement, l&rsquo;\u00e9diteur Gutenberg de base ne vous permet pas de cr\u00e9er vos compositions de blocs (\u00e0 moins que vous ne sachiez coder). Cependant, vous pouvez r\u00e9soudre ce probl\u00e8me avec l\u2019extension gratuite <a href=\"https:\/\/wordpress.org\/plugins\/block-pattern-builder\/\">Block Pattern Builder<\/a> de Justin Tadlock. Avec l\u2019extension activ\u00e9e, vous pouvez cr\u00e9er vos designs \u00e0 l&rsquo;aide de Gutenberg, puis enregistrer ce design en tant que composition.<\/p>\n<p>Pour commencer, allez dans <strong>Compositions de bloc<\/strong> &gt; <strong>Ajouter<\/strong> pour cr\u00e9er une nouvelle composition \u00e0 l&rsquo;aide de l&rsquo;\u00e9diteur. Veillez \u00e0 la publier lorsque vous avez termin\u00e9 :<\/p>\n<figure id=\"attachment_100525\" aria-describedby=\"caption-attachment-100525\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100525 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-block-pattern-1024x593.png\" alt=\"Cr\u00e9ation de votre composition de bloc personnalis\u00e9.\" width=\"1024\" height=\"593\"><figcaption id=\"caption-attachment-100525\" class=\"wp-caption-text\">Cr\u00e9ation de votre composition de bloc personnalis\u00e9.<\/figcaption><\/figure>\n<p>Une fois que vous aurez fait cela, vous pourrez ins\u00e9rer votre composition de bloc comme n&rsquo;importe quelle autre &#8211; cherchez-la dans la section <strong>Non class\u00e9<\/strong> :<\/p>\n<figure id=\"attachment_100499\" aria-describedby=\"caption-attachment-100499\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100499 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/inserting-custom-block-pattern-1024x621.png\" alt=\"Insertion de la composition de bloc personnalis\u00e9 que vous avez cr\u00e9\u00e9.\" width=\"1024\" height=\"621\"><figcaption id=\"caption-attachment-100499\" class=\"wp-caption-text\">Insertion de la composition de bloc personnalis\u00e9 que vous avez cr\u00e9\u00e9.<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9quipe centrale de WordPress a \u00e9galement lanc\u00e9 une <a href=\"https:\/\/wordpress.org\/patterns\/\">biblioth\u00e8que officielle de compositions de blocs sur WordPress.org<\/a>. Vous pouvez les ins\u00e9rer dans l&rsquo;\u00e9diteur en utilisant le copier-coller. Il suffit de cliquer sur le bouton <strong>Copier<\/strong> sur le site web de la biblioth\u00e8que de compositions de blocs, puis de la coller dans l&rsquo;\u00e9diteur.<\/p>\n<h3>Blocs r\u00e9utilisables<\/h3>\n<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\">blocs r\u00e9utilisables<\/a> sont une collection d&rsquo;un ou plusieurs blocs que vous pouvez ins\u00e9rer en tant que groupe. Ils sont similaires aux compositions de blocs, mais avec une diff\u00e9rence essentielle :<\/p>\n<p>Alors qu&rsquo;une composition de bloc est un mod\u00e8le de d\u00e9part que vous modifiez dans chaque cas, un bloc r\u00e9utilisable sera le m\u00eame dans chaque cas o\u00f9 vous l&rsquo;incluez.<\/p>\n<p>Si vous mettez \u00e0 jour le bloc r\u00e9utilisable, ces modifications s&rsquo;appliqueront automatiquement \u00e0 toutes les instances existantes.<\/p>\n<p>Par exemple, vous pouvez utiliser un bloc r\u00e9utilisable pour cr\u00e9er un appel \u00e0 l&rsquo;action (CTA) que vous souhaitez voir identique dans tout votre contenu. Ensuite, si vous souhaitez mettre \u00e0 jour l&rsquo;appel \u00e0 l&rsquo;action, il vous suffit de mettre \u00e0 jour le bloc r\u00e9utilisable une fois pour le modifier sur l&rsquo;ensemble du site.<\/p>\n<p>Pour cr\u00e9er un bloc r\u00e9utilisable dans l&rsquo;\u00e9diteur WordPress Gutenberg, cliquez et faites glisser pour s\u00e9lectionner un ou plusieurs blocs. Ensuite, cliquez sur l&rsquo;option <strong>Ajouter aux blocs r\u00e9utilisables<\/strong>. (L\u2019extension que nous avons mentionn\u00e9e ci-dessus vous permet \u00e9galement de cr\u00e9er une composition de bloc de cette fa\u00e7on).<\/p>\n<figure id=\"attachment_100526\" aria-describedby=\"caption-attachment-100526\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100526 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-reusable-block-1024x703.png\" alt=\"Comment cr\u00e9er un bloc r\u00e9utilisable.\" width=\"1024\" height=\"703\"><figcaption id=\"caption-attachment-100526\" class=\"wp-caption-text\">Comment cr\u00e9er un bloc r\u00e9utilisable.<\/figcaption><\/figure>\n<p>Vos blocs seront alors regroup\u00e9s &#8211; vous pouvez donner un nom \u00e0 votre bloc r\u00e9utilisable dans les r\u00e9glages du bloc r\u00e9utilisable dans la colonne lat\u00e9rale.<\/p>\n<p>Maintenant, vous pourrez ins\u00e9rer ce bloc r\u00e9utilisable en recherchant son nom. Vous pouvez utiliser \u00ab \/ \u00bb pour ins\u00e9rer rapidement le bloc :<\/p>\n<figure id=\"attachment_100501\" aria-describedby=\"caption-attachment-100501\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100501 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-reusable-block-1024x527.png\" alt=\"Comment ins\u00e9rer un bloc r\u00e9utilisable.\" width=\"1024\" height=\"527\"><figcaption id=\"caption-attachment-100501\" class=\"wp-caption-text\">Comment ins\u00e9rer un bloc r\u00e9utilisable.<\/figcaption><\/figure>\n<p>Si vous modifiez le bloc r\u00e9utilisable, vous aurez la possibilit\u00e9 de publier ces modifications lorsque vous mettrez \u00e0 jour l&rsquo;article. Et si vous d\u00e9cidez de publier les modifications du bloc r\u00e9utilisable, ces modifications s&rsquo;appliqueront automatiquement \u00e0 chaque instance du bloc r\u00e9utilisable :<\/p>\n<figure id=\"attachment_100514\" aria-describedby=\"caption-attachment-100514\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100514 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/update-reusable-block-1024x568.png\" alt=\"Comment mettre \u00e0 jour un bloc r\u00e9utilisable.\" width=\"1024\" height=\"568\"><figcaption id=\"caption-attachment-100514\" class=\"wp-caption-text\">Comment mettre \u00e0 jour un bloc r\u00e9utilisable.<\/figcaption><\/figure>\n<h2>\u00c9tendre de l&rsquo;\u00e9diteur de blocs avec des extensions<\/h2>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous nous sommes concentr\u00e9s sur les fonctions de base de l&rsquo;\u00e9diteur de blocs, \u00e0 quelques exceptions pr\u00e8s.<\/p>\n<p>L&rsquo;un des avantages de l&rsquo;\u00e9diteur de blocs, cependant, est que vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/sujets\/extensions-wordpress\/\">utiliser des extensions<\/a> pour l&rsquo;\u00e9tendre, tout comme vous pouvez le faire avec le reste de votre site WordPress.<\/p>\n<p>Vous pouvez utiliser les extensions pour plusieurs choses diff\u00e9rentes :<\/p>\n<ul>\n<li><strong>Ajouter de nouveaux blocs de contenu :<\/strong> Les extensions peuvent ajouter de nouveaux blocs que vous pouvez utiliser dans vos cr\u00e9ations. C&rsquo;est le cas d&rsquo;utilisation le plus courant des extensions Gutenberg pour le moment.<\/li>\n<li><strong>Ajouter de nouveaux mod\u00e8les ou compositions de blocs :<\/strong> Certaines extensions utilisent le syst\u00e8me de compositions de blocs de base, tandis que d&rsquo;autres ont cr\u00e9\u00e9 leurs propres syst\u00e8mes de mod\u00e8les.<\/li>\n<li><strong>Modifier l&rsquo;interface ou les fonctionnalit\u00e9s de l&rsquo;\u00e9diteur :<\/strong> Vous pouvez utiliser des extensions pour modifier l&rsquo;\u00e9diteur lui-m\u00eame. Par exemple, vous pouvez ajouter une meilleure prise en charge de Markdown.<\/li>\n<\/ul>\n<p>Au-del\u00e0 des extensions sp\u00e9cifiquement construites pour Gutenberg, de nombreuses autres extensions WordPress peuvent \u00e9galement utiliser l&rsquo;\u00e9diteur de blocs.<\/p>\n<p>Par exemple, si vous utilisez <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-formulaire-de-contact-wordpress\/\">une extension de formulaire de contact<\/a>, cette derni\u00e8re peut vous fournir un bloc d\u00e9di\u00e9 que vous pouvez utiliser pour int\u00e9grer vos formulaires. Il en va de m\u00eame pour de nombreux autres types d\u2019extensions.<\/p>\n<p>Une fois que vous ma\u00eetrisez les bases de l&rsquo;\u00e9diteur, il est int\u00e9ressant d&rsquo;explorer ces extensions pour voir si vous en trouvez qui peuvent am\u00e9liorer votre exp\u00e9rience.<\/p>\n<p>Voici quelques-unes des options les plus populaires au moment o\u00f9 nous \u00e9crivons cet article :<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\">Ultimate Addons for Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/kadence-blocks\/\">Kadence Blocks<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/generateblocks\/\">GenerateBlocks<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">Stackable<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/getwid\/\">Getwid<\/a><\/li>\n<\/ul>\n<p>Vous pouvez en voir plus dans la <a href=\"https:\/\/wordpress.org\/plugins\/browse\/blocks\/\">section WordPress.org consacr\u00e9e aux extensions compatibles avec les blocs<\/a>.<\/p>\n<h2>\u00c9diteur WordPress Gutenberg et Full Site Editing.<\/h2>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 au d\u00e9but de cet article, le projet Gutenberg vise \u00e0 \u00eatre bien plus qu&rsquo;un simple \u00e9diteur de contenu.<\/p>\n<p>Le plan \u00e0 long terme est de faire en sorte que WordPress passe au <strong>Full Site Editing<\/strong>. Cela signifie exactement ce que cela dit &#8211; l&rsquo;objectif est que vous puissiez \u00e9ventuellement modifier toutes les parties de votre site en utilisant l&rsquo;\u00e9diteur Gutenberg. Et cela inclut l&rsquo;en-t\u00eate, le pied de page, les colonnes lat\u00e9rales, etc. de votre site.<\/p>\n<p>Contrairement au lancement de l&rsquo;\u00e9diteur de blocs dans WordPress 5.0, Full Site Editing adopte une approche it\u00e9rative. Il s&rsquo;agira d&rsquo;un ajout progressif de fonctionnalit\u00e9s, o\u00f9 chaque nouvelle version s&rsquo;appuie sur les pr\u00e9c\u00e9dentes.<\/p>\n<p>Par exemple, <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\">\u00e0 partir de WordPress 5.8<\/a>, vous utiliserez d\u00e9sormais l&rsquo;\u00e9diteur de blocs pour g\u00e9rer les widgets de votre site. Vous aurez \u00e9galement acc\u00e8s \u00e0 de nouveaux blocs de th\u00e8mes tels que Logo du site, Navigation, Requ\u00eate de boucle (qui vous permet de cr\u00e9er des mod\u00e8les de listes d&rsquo;articles), et plus encore.<\/p>\n<p>Mais si le Full Site Editing est encore en cours, certains d\u00e9veloppeurs de th\u00e8mes intr\u00e9pides ont d\u00e9j\u00e0 commenc\u00e9 \u00e0 publier des th\u00e8mes bas\u00e9s sur des blocs, qui nous donnent quelques bons exemples de la fa\u00e7on dont le Full Site Editing pourrait fonctionner.<\/p>\n<p>En outre, vous pouvez acc\u00e9der \u00e0 certaines des fonctionnalit\u00e9s exp\u00e9rimentales d&rsquo;\u00e9dition du Full Site Editing dans la <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">version extension de Gutenberg<\/a>.<\/p>\n<p>Alors, regardons deux choses :<\/p>\n<ol>\n<li>Les fonctions de base du Full Site Editing que nous avons maintenant depuis WordPress 5.8<\/li>\n<li>Comment le Full Site Editing pourrait fonctionner sur la base de fonctionnalit\u00e9s exp\u00e9rimentales.<\/li>\n<\/ol>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p><strong>Tout cela pourrait changer de mani\u00e8re plus ou moins importante au moment o\u00f9 le Full Site Editing sera g\u00e9n\u00e9ralis\u00e9<\/strong>. C&rsquo;est juste pour vous donner une id\u00e9e de ce que cela pourrait \u00eatre.<\/p>\n<\/aside>\n\n<h3>Utiliser des blocs au lieu des widgets<\/h3>\n<p>\u00c0 partir de WordPress 5.8, vous utiliserez d\u00e9sormais des blocs pour contr\u00f4ler vos <a href=\"https:\/\/kinsta.com\/fr\/blog\/utiliser-fonction-wordpress-enregistrement-sidebar\/\">colonnes lat\u00e9rales<\/a> et vos pieds de page au lieu de widgets (par d\u00e9faut &#8211; vous pouvez d\u00e9sactiver cette fonction si vous le souhaitez).<\/p>\n<p>Lorsque vous acc\u00e9dez \u00e0 <strong>Apparence<\/strong> &gt; <strong>Widgets<\/strong>, vous pourrez g\u00e9rer le contenu de chaque zone de widgets \u00e0 l&rsquo;aide de l&rsquo;\u00e9diteur de blocs.<\/p>\n<p>Vous pouvez constater que chaque zone de widget dispose d&rsquo;un \u00e9diteur distinct, que vous pouvez ouvrir en cliquant sur les boutons en accord\u00e9on. Vous pouvez \u00e9galement d\u00e9placer des blocs entre les diff\u00e9rentes zones de widgets en cliquant sur les ic\u00f4nes en forme de fl\u00e8che situ\u00e9es en haut:<\/p>\n<figure id=\"attachment_100522\" aria-describedby=\"caption-attachment-100522\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100522 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-widget-areas-1024x887.png\" alt=\"Utilisation de blocs pour modifier les zones de widgets.\" width=\"1024\" height=\"887\"><figcaption id=\"caption-attachment-100522\" class=\"wp-caption-text\">Utilisation de blocs pour modifier les zones de widgets.<\/figcaption><\/figure>\n<h3>Utilisation des nouveaux blocs de th\u00e8me<\/h3>\n<p>WordPress 5.8 ajoute \u00e9galement de nouveaux blocs de th\u00e8me d\u00e9di\u00e9s qui vous permettent d&rsquo;ins\u00e9rer du contenu dynamique dans votre site. Ces blocs joueront \u00e9galement un r\u00f4le essentiel lors de la conception de mod\u00e8les pour votre th\u00e8me dans les prochaines versions.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Par exemple, disons que vous souhaitez int\u00e9grer une liste de vos contenus les plus r\u00e9cents sur une page. Il vous suffit d&rsquo;ajouter le bloc Requ\u00eate de boucle pour pouvoir ins\u00e9rer de mani\u00e8re dynamique du contenu provenant d&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">type de publication<\/a> particulier (par exemple, des articles de blog), y compris le filtrage par cat\u00e9gories, auteurs, \u00e9tiquettes, etc :<\/span><\/p>\n<figure id=\"attachment_100509\" aria-describedby=\"caption-attachment-100509\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100509 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-block-1024x945.png\" alt=\"Utilisation du bloc Requ\u00eate de boucle pour afficher du contenu dynamique.\" width=\"1024\" height=\"945\"><figcaption id=\"caption-attachment-100509\" class=\"wp-caption-text\">Utilisation du bloc Requ\u00eate de boucle pour afficher du contenu dynamique.<\/figcaption><\/figure>\n<p>\u00c0 l&rsquo;int\u00e9rieur du bloc Requ\u00eate de bloc, vous pouvez imbriquer les autres blocs de th\u00e8me pour contr\u00f4ler le mod\u00e8le du contenu qui y est affich\u00e9. Par exemple, vous pouvez afficher la date de chaque article en ajoutant le bloc Date de publication \u00e0 votre mod\u00e8le.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Avec le bloc Requ\u00eate de boucle de WordPress 5.8, vous pouvez essentiellement concevoir votre propre page de liste de blogs personnalis\u00e9e. Le Full Site Editing permet d&rsquo;\u00e9tendre cette fonctionnalit\u00e9 \u00e0 l&rsquo;ensemble de votre th\u00e8me, ce que nous allons examiner maintenant.<\/span><\/p>\n<h3>Conception de mod\u00e8les de contenu<\/h3>\n<p>Le mode d&rsquo;\u00e9dition des mod\u00e8les est une autre nouvelle fonctionnalit\u00e9 de WordPress 5.8. Il vous permet d&rsquo;utiliser Gutenberg pour concevoir les mod\u00e8les de vos articles et pages \u00e0 l&rsquo;aide de blocs.<\/p>\n<p>Actuellement, cette fonctionnalit\u00e9 n&rsquo;est disponible que si le d\u00e9veloppeur de votre th\u00e8me l&rsquo;a sp\u00e9cifiquement activ\u00e9e. Il se peut donc que vous ne la voyiez pas si le d\u00e9veloppeur de votre th\u00e8me ne l&rsquo;a pas encore fait.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Si vous utilisez un th\u00e8me qui prend en charge le mode d&rsquo;\u00e9dition des mod\u00e8les dans WordPress 5.8, vous verrez une nouvelle section <strong>Mod\u00e8le<\/strong> dans l&rsquo;onglet <strong>Article\/Page<\/strong> de la colonne lat\u00e9rale lorsque vous modifiez un article ou une page. Vous pouvez cr\u00e9er un nouveau mod\u00e8le ou choisir l&rsquo;un de vos mod\u00e8les existants :<\/span><\/p>\n<figure id=\"attachment_100512\" aria-describedby=\"caption-attachment-100512\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100512 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/template-editing-mode-1024x853.png\" alt=\"Cr\u00e9ation d'un nouveau mod\u00e8le dans les th\u00e8mes prenant en charge le mode Mod\u00e8le.\" width=\"1024\" height=\"853\"><figcaption id=\"caption-attachment-100512\" class=\"wp-caption-text\">Cr\u00e9ation d&rsquo;un nouveau mod\u00e8le dans les th\u00e8mes prenant en charge le mode Mod\u00e8le.<\/figcaption><\/figure>\n<p>Si vous cr\u00e9ez un nouveau mod\u00e8le, vous pourrez lui donner un nom pour vous aider \u00e0 le m\u00e9moriser. Ensuite, vous pouvez concevoir le mod\u00e8le en utilisant le mode sp\u00e9cial de l&rsquo;\u00e9diteur de mod\u00e8les, ainsi que les nouveaux blocs de th\u00e8me que nous avons d\u00e9taill\u00e9s dans la section pr\u00e9c\u00e9dente :<\/p>\n<figure id=\"attachment_100513\" aria-describedby=\"caption-attachment-100513\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100513 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/template-editor-1024x875.png\" alt=\"Le nouvel \u00e9diteur de mod\u00e8les dans WordPress 5.8.\" width=\"1024\" height=\"875\"><figcaption id=\"caption-attachment-100513\" class=\"wp-caption-text\">Le nouvel \u00e9diteur de mod\u00e8les dans WordPress 5.8.<\/figcaption><\/figure>\n<h3>Blockbase : Exemple de Full Site Editing<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/themes\/blockbase\/\">Blockbase<\/a> est un th\u00e8me d&rsquo;Automattic qui fonctionne comme une sorte de \u00ab\u00a0preuve de concept\u00a0\u00bb et de terrain de jeu pour le Full Site Editing. Il s&rsquo;agit d&rsquo;un th\u00e8me encore exp\u00e9rimental, qui pourrait donc \u00eatre modifi\u00e9 avant que ces fonctionnalit\u00e9s ne soient int\u00e9gr\u00e9es au logiciel principal de WordPress. Mais il donne une id\u00e9e du Full Site Editing.<\/p>\n<p>Lorsque le th\u00e8me et la version extension de Gutenberg sont install\u00e9s, vous disposez d&rsquo;une nouvelle zone d&rsquo;<strong>\u00e9dition du site<\/strong> qui vous permet de \u00ab\u00a0construire\u00a0\u00bb votre th\u00e8me \u00e0 l&rsquo;aide du m\u00eame \u00e9diteur que celui que vous avez vu ci-dessus.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">La diff\u00e9rence essentielle, cependant, est que vous ne construisez pas seulement un seul article ou une seule page. Au lieu de cela, vous utilisez l&rsquo;\u00e9diteur de blocs WordPress Gutenberg pour cr\u00e9er les mod\u00e8les r\u00e9els que tout le contenu de votre site utilisera &#8211; par exemple, le mod\u00e8le de votre en-t\u00eate.<\/span><\/p>\n<figure id=\"attachment_100530\" aria-describedby=\"caption-attachment-100530\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100530 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-1-1024x689.png\" alt=\"Un exemple pr\u00e9coce de Full Site Editing.\" width=\"1024\" height=\"689\"><figcaption id=\"caption-attachment-100530\" class=\"wp-caption-text\">Un exemple pr\u00e9coce de Full Site Editing.<\/figcaption><\/figure>\n<p>Pour vous aider \u00e0 accomplir cette t\u00e2che, vous disposerez d&rsquo;une s\u00e9rie de nouveaux blocs de design, dont certains des blocs de th\u00e8me que vous avez vus plus haut :<\/p>\n<figure id=\"attachment_100531\" aria-describedby=\"caption-attachment-100531\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100531 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-new-blocks-1024x985.png\" alt=\"Les nouveaux blocs de design avec le Full Site Editing\" width=\"1024\" height=\"985\"><figcaption id=\"caption-attachment-100531\" class=\"wp-caption-text\">Les nouveaux blocs de design avec le Full Site Editing<\/figcaption><\/figure>\n<p>Pour naviguer entre les diff\u00e9rents mod\u00e8les, vous pouvez cliquer sur le logo WordPress dans le coin sup\u00e9rieur gauche pour modifier les autres mod\u00e8les et en cr\u00e9er de nouveaux :<\/p>\n<figure id=\"attachment_100532\" aria-describedby=\"caption-attachment-100532\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100532 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-templates-1024x809.png\" alt=\"Modification de diff\u00e9rents mod\u00e8les de th\u00e8mes.\" width=\"1024\" height=\"809\"><figcaption id=\"caption-attachment-100532\" class=\"wp-caption-text\">Modification de diff\u00e9rents mod\u00e8les de th\u00e8mes.<\/figcaption><\/figure>\n<p>Encore une fois, l&rsquo;id\u00e9e est que vous serez <em>finalement <\/em>en mesure d&rsquo;utiliser l&rsquo;\u00e9diteur Gutenberg pour contr\u00f4ler tous les mod\u00e8les et les mises en page de votre th\u00e8me. Et lorsque cela se produira, la cr\u00e9ation d&rsquo;un site WordPress sera assez diff\u00e9rente de ce que nous consid\u00e9rons comme \u00ab normal \u00bb en 2021.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Depuis 2018, l&rsquo;\u00e9diteur de blocs Gutenberg a fait beaucoup de progr\u00e8s. Avec le passage prochain au Full Site Editing, l&rsquo;\u00e9diteur de blocs ne fera que devenir une partie encore plus importante de <a href=\"https:\/\/kinsta.com\/fr\/blog\/statistiques-wordpress\/\">WordPress<\/a>.<\/p>\n<p>Dans cet article, nous avons abord\u00e9 tous les sujets, des bases de l&rsquo;\u00e9diteur de blocs aux astuces et fonctionnalit\u00e9s avanc\u00e9es. Nous avons \u00e9galement examin\u00e9 ce \u00e0 quoi pourrait ressembler le Full Site Editing \u00e0 l&rsquo;avenir.<\/p>\n<p>Si vous n&rsquo;\u00eates pas encore pr\u00eat \u00e0 l&rsquo;essayer, vous pouvez d\u00e9sactiver d\u00e9finitivement Gutenberg et utiliser l&rsquo;\u00e9diteur classique. Cependant, Gutenberg va continuer \u00e0 se d\u00e9velopper, ce n&rsquo;est donc pas quelque chose que vous voudrez ignorer pour toujours.<\/p>\n<p><em>Avez-vous encore des questions ou des r\u00e9flexions sur l&rsquo;\u00e9diteur ? Si oui, nous aimerions entendre vos commentaires, qu&rsquo;ils soient bons ou mauvais.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque l&rsquo;\u00e9diteur de blocs WordPress, ou Gutenberg, a \u00e9t\u00e9 lanc\u00e9 en d\u00e9cembre 2018, nous ne savions pas \u00e0 quoi nous attendre. Bien s\u00fbr, nous avions eu &#8230;<\/p>\n","protected":false},"author":117,"featured_media":47564,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[527,72],"topic":[1028],"class_list":["post-20070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-gutenberg","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)<\/title>\n<meta name=\"description\" content=\"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l&#039;\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l&#039;avenir de WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)\" \/>\n<meta property=\"og:description\" content=\"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l&#039;\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l&#039;avenir de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-04T02:07:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T08:24:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l&#039;\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l&#039;avenir de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)\",\"datePublished\":\"2018-08-04T02:07:10+00:00\",\"dateModified\":\"2024-09-18T08:24:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\"},\"wordCount\":7342,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg\",\"keywords\":[\"Block Editor\",\"Gutenberg\"],\"articleSection\":[\"Meilleurs Tutoriels WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\",\"name\":\"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg\",\"datePublished\":\"2018-08-04T02:07:10+00:00\",\"dateModified\":\"2024-09-18T08:24:16+00:00\",\"description\":\"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l'\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l'avenir de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2024)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)","description":"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l'\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l'avenir de WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/","og_locale":"fr_FR","og_type":"article","og_title":"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)","og_description":"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l'\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l'avenir de WordPress.","og_url":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2018-08-04T02:07:10+00:00","article_modified_time":"2024-09-18T08:24:16+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l'\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l'avenir de WordPress.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Salman Ravoof","Dur\u00e9e de lecture estim\u00e9e":"36 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)","datePublished":"2018-08-04T02:07:10+00:00","dateModified":"2024-09-18T08:24:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/"},"wordCount":7342,"commentCount":8,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg","keywords":["Block Editor","Gutenberg"],"articleSection":["Meilleurs Tutoriels WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/","url":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/","name":"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2026)","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg","datePublished":"2018-08-04T02:07:10+00:00","dateModified":"2024-09-18T08:24:16+00:00","description":"Apprenez tout sur le dernier \u00e9diteur WordPress Gutenberg, alias l'\u00e9diteur de blocs. D\u00e9couvrez pourquoi son Full Site Editing est l'avenir de WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/editeur-wordpress-gutenberg.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Plong\u00e9e dans le dernier \u00e9diteur Gutenberg de WordPress (2024)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/20070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=20070"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/20070\/revisions"}],"predecessor-version":[{"id":60600,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/20070\/revisions\/60600"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20070\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/47564"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=20070"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=20070"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=20070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}