Il a remplac\u00e9 l \u00ab \u00e9diteur original (aujourd’hui appel\u00e9 \u201cclassique\u201d) en tant qu \u00bb \u00e9diteur par d\u00e9faut sur WordPress en 2018 avec la sortie de WordPress 5.0.<\/p>\n\n
Notez que l’\u00e9diteur classique est parfois incorrectement appel\u00e9 \u00e9diteur TinyMCE<\/a>. En fait, l’\u00e9diteur classique est bas\u00e9 sur TinyMCE, et Gutenberg utilise toujours TinyMCE pour l’\u00e9dition de texte riche. <\/p>\n\n La diff\u00e9rence entre l \u00ab \u00e9diteur classique et l \u00bb \u00e9diteur de blocs de WordPress concerne – comme vous l’avez peut-\u00eatre devin\u00e9 – l’utilisation des blocs.<\/p>\n\n Alors que l \u00ab \u00e9diteur classique ressemble \u00e0 un \u00e9diteur de texte vierge, l \u00bb \u00e9diteur de blocs se pr\u00e9sente et fonctionne comme un \u00e9diteur par glisser-d\u00e9poser.<\/p>\n\n Les principaux \u00e9l\u00e9ments de l \u00ab \u00e9diteur de blocs sont l’inserteur (pour l’insertion de blocs), le canevas de contenu (pour l \u00bb \u00e9dition du contenu) et la barre lat\u00e9rale des param\u00e8tres (pour la modification des param\u00e8tres des blocs).<\/p>\n\n Diff\u00e9rents types de blocs sont disponibles, les plus importants \u00e9tant les blocs de texte\/contenu (par exemple, les blocs de paragraphes et les listes). Vous pouvez \u00e9galement utiliser les blocs de m\u00e9dia (par exemple, images), de conception (par exemple, boutons), de widget (par exemple, calendrier), de th\u00e8me (par exemple, logo du site) et d’int\u00e9gration (par exemple, YouTube). <\/p>\n\n Gutenberg pr\u00e9sente de nombreux avantages pour ceux qui sont pr\u00eats \u00e0 abandonner l \u00ab \u00e9diteur classique et \u00e0 adopter la modularit\u00e9. Tout d’abord, il continue d \u00bb \u00eatre r\u00e9guli\u00e8rement mis \u00e0 jour et d\u00e9velopp\u00e9, avec pour objectif principal de d\u00e9mocratiser davantage la publication sur le web. <\/p>\n\n \u00c0 l’heure o\u00f9 nous \u00e9crivons ces lignes, le plugin Classic Editor<\/a>, qui est officiellement maintenu par WordPress, sera pris en charge jusqu’en 2024, bien qu’il ne s’agisse probablement pas d’une date butoir.<\/p>\n\n Au-del\u00e0 de la p\u00e9rennit\u00e9 de votre site, voici les principales raisons pour lesquelles vous devriez passer \u00e0 l’utilisation de l’\u00e9diteur de blocs.<\/p>\n\n Comme son pr\u00e9d\u00e9cesseur, Gutenberg est enti\u00e8rement gratuit et open-source – ce qui signifie que vous n’avez pas besoin d’un abonnement payant pour d\u00e9bloquer toutes ses fonctions.<\/p>\n\n D’autres constructeurs de pages proposent \u00e9galement des versions gratuites, mais les fonctionnalit\u00e9s de ces versions sont souvent limit\u00e9es afin de vous inciter \u00e0 passer \u00e0 un plan premium.<\/p>\n\n Bien que de nombreux blogueurs aient r\u00e9sist\u00e9 au changement parce qu’ils pr\u00e9f\u00e8rent l’\u00e9diteur classique, Gutenberg est consid\u00e9r\u00e9 comme convivial. Aucune comp\u00e9tence en mati\u00e8re de codage (par exemple, HTML, CSS) n’est n\u00e9cessaire, et les diff\u00e9rents types de blocs disposent d’options de personnalisation faciles \u00e0 utiliser. <\/p>\n\n Gr\u00e2ce au format bloc de Gutenberg, vous aurez plus de facilit\u00e9 \u00e0 mettre en \u0153uvre des mises en page complexes pour que votre site web se d\u00e9marque de ses concurrents.<\/p>\n\n Si vous pr\u00e9f\u00e9rez toujours l \u00ab \u00e9diteur classique \u00e0 Gutenberg, ce n’est pas grave. Vous pouvez utiliser le bloc et la barre d’outils classiques<\/a> pour modifier votre page web comme vous le feriez dans l \u00bb \u00e9diteur original. <\/p>\n\n L’un des avantages de l \u00ab \u00e9diteur Gutenberg est qu’il offre une meilleure exp\u00e9rience utilisateur que l \u00bb \u00e9diteur classique.<\/p>\n\n Par exemple, vous pouvez choisir entre diff\u00e9rentes options d’affichage, ce qui vous permet de simuler l’apparence de votre site web sur diff\u00e9rentes tailles d’\u00e9cran. Cela facilite grandement la cr\u00e9ation d’un site web WordPress adapt\u00e9 aux mobiles<\/a>. <\/p>\n\n De plus, Gutenberg propose des fonctionnalit\u00e9s plus avanc\u00e9es, comme des blocs personnalis\u00e9s et une int\u00e9gration plus facile. Et comme si cela ne suffisait pas, la disposition du menu est pratique et intuitive. <\/p>\n\n En 2022, l \u00ab \u00e9quipe de WordPress a \u00e9tendu Gutenberg pour permettre l \u00bb \u00e9dition compl\u00e8te du site, ce qui signifie que vous pouvez utiliser cet \u00e9diteur WordPress pour modifier toutes les parties de votre site web plut\u00f4t que seulement les articles et les pages.<\/p>\n\n Comme il s’agit de l \u00ab \u00e9diteur par d\u00e9faut de WordPress, l \u00bb \u00e9diteur de blocs ne devrait pas avoir de probl\u00e8mes de compatibilit\u00e9 avec la majorit\u00e9 des modules compl\u00e9mentaires de sites web tels que les th\u00e8mes et les plugins de WordPress.<\/p>\n\n Cela dit, une fois que vous aurez pris en main Gutenberg, vous ne devriez de toute fa\u00e7on pas avoir besoin d’autant de th\u00e8mes et de plugins par rapport \u00e0 l’\u00e9diteur classique.<\/p>\n\n Toutefois, certaines t\u00e2ches comme l’optimisation des moteurs de recherche (SEO) peuvent n\u00e9cessiter l’utilisation d’un plugin, comme Yoast SEO<\/a>.<\/p>\n\n Yoast a rapidement assur\u00e9 l \u00ab int\u00e9gration avec les blocs Gutenberg<\/a>. Ses blocs de sch\u00e9ma (par exemple, les blocs FAQ et comment faire) capitalisent sur les capacit\u00e9s de Gutenberg – ces sch\u00e9mas ne peuvent pas \u00eatre pleinement mis en \u0153uvre dans l \u00bb \u00e9diteur classique. <\/p>\n\n Sur la base de ces avanc\u00e9es, il est facile de voir pourquoi nous avons class\u00e9 Yoast comme le meilleur outil SEO pour WordPress en 2023<\/a>.<\/p>\n\n Parce qu’il s’agit d’un \u00e9diteur int\u00e9gr\u00e9 au tableau de bord de WordPress aux fonctionnalit\u00e9s \u00e9tendues, Gutenberg pourrait r\u00e9duire votre utilisation de plugins et de th\u00e8mes WordPress, dont le trop grand nombre peut ralentir votre site web.<\/p>\n\n Pour optimiser la vitesse de votre site web, utilisez la derni\u00e8re version de WordPress<\/a> et choisissez un h\u00e9bergeur qui propose ces 10 fonctionnalit\u00e9s essentielles.<\/a><\/p>\n\n Vous n’avez toujours pas compris les avantages de l’\u00e9diteur Gutenberg ?<\/p>\n\n Vous n’\u00eates certainement pas le seul.<\/p>\n\n La biblioth\u00e8que de plugins WordPress montre que le plugin Classic Editor, qui restaure l’\u00e9diteur classique, compte plus de cinq millions d’installations actives.<\/p>\n\n Si les fonctions toujours plus \u00e9tendues de l’\u00e9diteur Gutenberg ne conviennent pas \u00e0 tout le monde, elles peuvent faire de certaines t\u00e2ches plus d\u00e9licates sur WordPress une v\u00e9ritable promenade de sant\u00e9.<\/p>\n\n Apr\u00e8s avoir lu notre introduction \u00e0 l \u00ab utilisation de l \u00bb \u00e9diteur de blocs Gutenberg<\/a>, essayez ces conseils pour am\u00e9liorer l’efficacit\u00e9 de votre flux de travail.<\/p>\n\n Parmi les blocs les plus utilis\u00e9s, on trouve les blocs de paragraphes et d’en-t\u00eates. Pour commencer, ouvrez votre tableau de bord WordPress et naviguez jusqu’\u00e0 Posts<\/strong>. Cliquez sur Ajouter un nouvel article<\/strong>. <\/p>\n\n Si vous \u00eates photographe, le bloc \u00ab galerie \u00bb vous sera utile. Et si vous interviewez des experts en la mati\u00e8re dans le cadre de votre site de blog, le bloc de citation peut s’av\u00e9rer utile. <\/p>\n\n Les auteurs de po\u00e9sie et les paroliers peuvent utiliser le bloc de vers, tandis que le bloc audio est id\u00e9al pour les musiciens qui souhaitent partager leur travail en ligne.<\/p>\n\n Les mod\u00e8les de blocs pr\u00e9fabriqu\u00e9s sont utiles si vous avez besoin d’inspiration. Au lieu de partir d’une toile vierge, vous pouvez gagner du temps en choisissant parmi diff\u00e9rentes cat\u00e9gories de blocs, telles que posts, textes, galeries, appels \u00e0 l’action et banni\u00e8res. <\/p>\n\n Les blocs r\u00e9utilisables personnalis\u00e9s permettent de gagner du temps et de maintenir une conception coh\u00e9rente du site web. Pour rendre un bloc r\u00e9utilisable, acc\u00e9dez \u00e0 la barre d’outils situ\u00e9e au-dessus des blocs et s\u00e9lectionnez l’ic\u00f4ne de param\u00e9trage \u00e0 trois points. <\/p>\n\n Cliquez ensuite sur Cr\u00e9er un bloc r\u00e9utilisable<\/strong>.<\/p>\n\n Si vous tapez la barre oblique (\/), vous aurez la possibilit\u00e9 d’utiliser diff\u00e9rents types de blocs sans passer par l’inserteur de blocs.<\/p>\n\n Si vous cliquez sur les trois points verticaux dans le coin sup\u00e9rieur droit de l’\u00e9diteur, vous pouvez faire d\u00e9filer vers le bas pour voir tous les raccourcis clavier pour Gutenberg.<\/p>\n\n Vous pouvez \u00e9galement taper Shift+Alt+H si vous utilisez une machine Windows (ou Ctrl+Opt+H sur un Mac). <\/p>\n\n Vous verrez une liste de raccourcis qui peuvent rationaliser vos t\u00e2ches d’\u00e9dition de contenu, comme basculer entre l’\u00e9diteur visuel et l’\u00e9diteur de code.<\/p>\n\n Si vous cliquez sur les trois points verticaux situ\u00e9s dans le coin sup\u00e9rieur droit du tableau de bord de votre \u00e9diteur de blocs, vous verrez diff\u00e9rentes options d’affichage, telles que le mode plein \u00e9cran et le mode sans distraction.<\/p>\n\n Essayez de trouver la vue la plus efficace pour vous, car cela peut d\u00e9pendre de la t\u00e2che \u00e0 accomplir.<\/p>\n\n Un shortcode est un code WordPress de base plac\u00e9 entre crochets. De nombreux plugins ont leurs propres shortcodes WordPress que vous pouvez saisir sur votre page web pour ajouter facilement des \u00e9l\u00e9ments tels que des boutons et des formulaires. <\/p>\n\n Ces shortcodes vous permettent de gagner du temps sur le codage. De plus, ils sont personnalisables, ce qui vous permet de les adapter aux besoins de votre entreprise et de votre site web. <\/p>\n\n Si vous tapez \u00ab \/ \u00bb et que vous saisissez \u00ab shortcode \u00bb, vous pouvez directement coller le shortcode<\/a> que vous avez choisi dans la bo\u00eete qui appara\u00eet ci-dessous.<\/p>\n\n L’un des avantages de Gutenberg est la possibilit\u00e9 de glisser-d\u00e9poser des images directement depuis votre machine. Lorsque vous faites cela, Gutenberg cr\u00e9e automatiquement un bloc d’image, ce qui vous permet d \u00ab \u00e9conomiser le temps que vous auriez normalement pass\u00e9 \u00e0 t\u00e9l\u00e9charger une image et \u00e0 essayer de l’ins\u00e9rer dans l \u00bb \u00e9diteur classique. <\/p>\n\n Pour ajouter une image avec Gutenberg, il suffit de faire glisser l’image vers l’\u00e9diteur et de la d\u00e9poser lorsqu’une ligne bleue horizontale appara\u00eet. De plus, si vous faites glisser et d\u00e9posez plusieurs images \u00e0 la fois, Gutenberg les ajoutera automatiquement \u00e0 un bloc de galerie. <\/p>\n\n En verrouillant un bloc, en particulier sur certaines pages ou certains messages \u00e0 fort impact, vous communiquez facilement aux membres de votre \u00e9quipe qu’un certain bloc ne doit pas \u00eatre d\u00e9plac\u00e9 ou supprim\u00e9. Cela garantit la coh\u00e9rence des blocs et vous \u00e9vite de perdre du temps \u00e0 refaire les modifications qu’un membre de l’\u00e9quipe a apport\u00e9es \u00e0 des blocs essentiels. <\/p>\n\n S\u00e9lectionnez l’ic\u00f4ne \u00e0 trois points au-dessus du bloc que vous souhaitez verrouiller. S\u00e9lectionnez ensuite Verrouiller<\/strong>. <\/p>\n\n Ensuite, il vous sera demand\u00e9 si vous souhaitez simplement d\u00e9sactiver le mouvement du bloc, emp\u00eacher son retrait ou les deux (verrouiller tout).<\/p>\n\n Apr\u00e8s avoir s\u00e9lectionn\u00e9 l’ic\u00f4ne \u00e0 trois points dans le coin sup\u00e9rieur droit, faites d\u00e9filer vers le bas jusqu’\u00e0 Pr\u00e9f\u00e9rences<\/strong>.<\/p>\n\n Vous pouvez d\u00e9sormais modifier vos pr\u00e9f\u00e9rences g\u00e9n\u00e9rales, de bloc et de panneau.<\/p>\n\n Ici, nous avons activ\u00e9 l’option Afficher les blocs les plus utilis\u00e9s<\/strong> afin que les blocs les plus fr\u00e9quemment utilis\u00e9s apparaissent en premier. Cela vous permet de gagner du temps, car vous n’avez pas \u00e0 faire d\u00e9filer des blocs qui ne sont pas pertinents pour votre site web chaque fois que vous voulez en trouver un en particulier. <\/p>\n\n Apr\u00e8s avoir ma\u00eetris\u00e9 les blocs de base, il est temps de commencer \u00e0 utiliser des structures de pages web complexes. Pour \u00e9viter que les choses ne deviennent trop compliqu\u00e9es, vous pouvez opter pour un aper\u00e7u de votre document qui soit facile \u00e0 regarder. <\/p>\n\n C’est l\u00e0 qu’interviennent les vues en liste et en contour. Naviguez jusqu’\u00e0 l’ic\u00f4ne \u00e0 trois lignes situ\u00e9e \u00e0 droite du bouton \u00ab\u00a0R\u00e9tablir\u00a0\u00bb dans la barre d’outils sup\u00e9rieure. Vous verrez que le raccourci est Maj+Alt+O. <\/p>\n\n Dans l’onglet \u00ab Aper\u00e7u \u00bb, vous pouvez facilement parcourir la structure de longs articles de blog et rep\u00e9rer les erreurs d’en-t\u00eate.<\/p>\n\n Maintenant que vous avez appris \u00e0 exploiter les avantages de Gutenberg pour am\u00e9liorer l’efficacit\u00e9 de votre flux de travail, vous pensez peut-\u00eatre \u00e0 d’autres moyens d’am\u00e9liorer votre site Web, comme plonger dans ses analyses ou chercher des moyens d’augmenter sa vitesse.<\/p>\n\n Chez Bluehost, nous proposons diff\u00e9rents plans d’h\u00e9bergement WordPress<\/a> qui vous donnent les outils dont vous avez besoin pour y parvenir, ainsi que plusieurs autres options comme un certificat SSL gratuit et des sauvegardes quotidiennes du site web pendant la premi\u00e8re ann\u00e9e.<\/p>\n\n Et maintenant, la conception d’un site Web accrocheur est encore plus facile avec WonderSuite<\/a>. Chacun de nos plans WordPress est accompagn\u00e9 d’une foule de fonctionnalit\u00e9s suppl\u00e9mentaires qui aideront votre site Web \u00e0 briller. <\/p>\n\nAvantages de Gutenberg<\/h2>\n\n
![\"Avantages](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Gutenberg-block-benefits.png\")
<\/figure>\n\n<\/a>Utilisation gratuite<\/h3>\n\n
<\/a>Pour les d\u00e9butants<\/h3>\n\n
<\/a>Am\u00e9lioration de l’exp\u00e9rience d’\u00e9dition<\/h3>\n\n
<\/a>Compatible<\/h3>\n\n
<\/a>Chargement plus rapide des pages<\/h3>\n\n
<\/a>Comment am\u00e9liorer l’efficacit\u00e9 de votre flux de travail
<\/a>Tirer parti de tous les blocs diff\u00e9rents<\/h3>\n\n
![\"Cliquez](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Add-new-post.png\")
![\"Une](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Text-blocks-list.png\")
<\/a>Augmentation de l’efficacit\u00e9 gr\u00e2ce \u00e0 des mod\u00e8les et des sch\u00e9mas pr\u00e9\u00e9tablis<\/h3>\n\n
![\"Les](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Gutenberg-premade-patterns.png\")
Cr\u00e9er un bloc r\u00e9utilisable<\/h3>\n\n
![\"Comment](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Create-reusable-block.png\")
Utiliser les raccourcis clavier de l’\u00e9diteur de blocs<\/h3>\n\n
![\"Le](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Gutenberg-tools-menu.png\")
![\"Raccourcis](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Keyboard-shortcuts.png\")
Trouvez votre type d’affichage pr\u00e9f\u00e9r\u00e9 pour augmenter votre productivit\u00e9<\/h3>\n\n
![\"Différentes](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Gutenberg-various-views.png\")
Gagnez du temps en utilisant les shortcodes WordPress<\/h3>\n\n
![\"Comment](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Add-shortcodes.png\")
Glisser-d\u00e9poser des images \u00e0 partir de votre ordinateur<\/h3>\n\n
![\"Glissez-déposez](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Drag-drop-images.png\")
Verrouiller un bloc pour emp\u00eacher quiconque de le modifier<\/h3>\n\n
![\"Comment](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Lock-a-block.png\")
![\"Options](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Lock-block-options.png\")
Modifiez vos pr\u00e9f\u00e9rences pour nettoyer le tableau de bord de votre bloc<\/h3>\n\n
![\"Réglage](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Gutenberg-setting-preferences.png\")
![\"Préférences](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Block-preferences.png\")
Utiliser les vues en liste et les vues d’ensemble<\/h3>\n\n
![\"Bouton](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Document-overview-button.png\")
![\"Vue](\"https:\/\/bluehost.com\/fr\/blog\/wp-content\/uploads\/2023\/09\/Outline-view.png\")
Derni\u00e8res r\u00e9flexions : Comment am\u00e9liorer l’efficacit\u00e9 du flux de travail \u00e0 l’aide de l’\u00e9diteur de blocs<\/h2>\n\n