{"id":70312,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70312"},"modified":"2025-05-26T07:52:18","modified_gmt":"2025-05-26T14:52:18","slug":"comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/","title":{"rendered":"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!)"},"content":{"rendered":"\n<p>Serait-ce un endroit \u00e9trange pour mentionner comment ma femme conserve un kit Lego Star Wars BB-8 en \u00e9dition limit\u00e9e, en parfait \u00e9tat et non ouvert ?<\/p>\n\n\n<p>Ces choses se vendent comme des petits pains \u00e0 environ 500 $ !<\/p>\n\n\n<p>D&#8217;accord. Ce serait \u00e9trange. Compris, haut et fort&#8230; Mais tout cela aura un peu plus de sens dans un instant.<\/p>\n\n\n<p>Dans cet article, nous allons couvrir tout ce que tu dois savoir sur les blocs WordPress. Si tu es un utilisateur de WP \u00e0 l&#8217;ancienne comme moi, alors tu penses probablement toujours que les blocs sont \u00ab nouveaux \u00bb <a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> parce que tu as commenc\u00e9 par utiliser l&#8217;\u00e9diteur classique.<\/p>\n\n\n<p>\u00c7a fait plus de cinq ans que WordPress a introduit les blocs, mais ils restent l&#8217;une des fonctionnalit\u00e9s de CMS les plus mal comprises et sous-utilis\u00e9es.<\/p>\n\n\n<p>Les blocs WordPress sont un peu comme des Legos \u2014vois, je <i>t&#8217;avais dit<\/i> que \u00e7a se rattacherait \u2014 ils te permettent de construire et de personnaliser ton site web d&#8217;une mani\u00e8re qui aurait n\u00e9cessit\u00e9 l&#8217;embauche d&#8217;un designer et d\u00e9veloppeur web professionnel il y a seulement quelques ann\u00e9es.<\/p>\n\n\n<p>Et c\u2019est l\u2019une des raisons pour lesquelles les gens les aiment tant. Une fois qu&#8217;ils les comprennent, c&#8217;est-\u00e0-dire.<\/p>\n\n\n<p>Apr\u00e8s t&#8217;avoir expliqu\u00e9 comment elles fonctionnent, il ne fait aucun doute que tu les adoreras aussi.<\/p>\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Quels Sont Les Blocs WordPress ?<\/h2>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Blocs WordPress\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n<p>Les blocs WordPress sont, comme le nom l&#8217;indique, comme des <i>blocs de construction<\/i> empilables que tu peux ajouter aux pages et aux articles sur ton site WordPress.<\/p>\n\n\n<p>Ils ont \u00e9t\u00e9 ajout\u00e9s \u00e0 WordPress 5.0 en m\u00eame temps que l&#8217;int\u00e9gration de l&#8217;\u00e9diteur Gutenberg que la plupart d&#8217;entre nous connaissent maintenant. Les blocs sont d\u00e9sormais le moyen standard de personnaliser votre site WordPress \u2014 et vous pouvez utiliser des blocs sur l&#8217;ensemble de votre site, pas seulement dans les articles.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg est le nom du projet d&#8217;\u00c9diteur de Blocs dans WordPress. De nombreux d\u00e9veloppeurs et passionn\u00e9s de WordPress utilisent les termes \u00c9diteur Gutenberg et \u00c9diteur de Blocs de mani\u00e8re interchangeable.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            En savoir plus                    <\/a>\n\n<\/div>\n\n\n<p>Pense-y un peu comme \u00e0 un cr\u00e9ateur de site ou de page. Tu peux cliquer sur le bouton \u201c+\u201d pour ajouter un bloc \u00e0 une page ou un article, puis choisir parmi diverses options de blocs. La version actuelle de WordPress est livr\u00e9e avec plus de 90 options directement disponibles.<\/p>\n\n\n<p>Chaque bloc est essentiellement un widget. Ils peuvent faire diverses choses, comme int\u00e9grer du contenu provenant d&#8217;un autre site ou service, ajouter de nouvelles fonctionnalit\u00e9s comme des calendriers ou des formulaires de contact \u00e0 la page, ou m\u00eame ajouter du contenu sp\u00e9cifique avec un formatage pr\u00e9d\u00e9fini.<\/p>\n\n\n<p>De plus, la plupart des blocs disposent d&#8217;options de personnalisation qui te permettent de modifier leur affichage ou leur fonctionnement sur ton site.<\/p>\n\n\n<p>L&#8217;\u00e9diteur de blocs WordPress est une am\u00e9lioration consid\u00e9rable par rapport \u00e0 l&#8217;\u00e9diteur classique. Avant l&#8217;\u00e8re Gutenberg, les utilisateurs de WordPress pouvaient seulement ajouter du texte et des images \u00e0 un article avant de devoir plonger dans le code personnalis\u00e9.<\/p>\n\n\n<p><b>Note de nerd:<\/b> Si pour une raison quelconque, tu n&#8217;as pas acc\u00e8s aux blocs de l&#8217;\u00e9diteur WordPress, cela pourrait \u00eatre pour l&#8217;une des deux raisons: La premi\u00e8re est que ton <a href=\"https:\/\/www.dreamhost.com\/wordpress\/\" target=\"_blank\" rel=\"noopener\">installation WordPress<\/a> pourrait \u00eatre terriblement obsol\u00e8te (comme vieille de plusieurs ann\u00e9es). Deuxi\u00e8mement, il est possible que l&#8217;\u00e9diteur de blocs ait \u00e9t\u00e9 d\u00e9sactiv\u00e9 par le plugin Classic Editor. Lorsqu&#8217;il est activ\u00e9 sur un site WordPress, ce plugin te ram\u00e8ne \u00e0 l&#8217;exp\u00e9rience de l&#8217;\u00e9diteur classique. V\u00e9rifie ta page de plugins depuis wp-admin pour d\u00e9terminer si c&#8217;est le cas pour toi.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">Quels Blocs WordPress Poss\u00e8de-t-il D\u00e9j\u00e0 ?<\/h2>\n\n\n<p>Par d\u00e9faut, l&#8217;\u00e9diteur de blocs offre un <i>\u00e9norme <\/i>nombre de <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">blocs disponibles<\/a>. Tu peux utiliser ces blocs pour personnaliser ton th\u00e8me WordPress, permettre aux \u00e9crivains et blogueurs d&#8217;ajouter du contenu enrichi \u00e0 leurs articles, int\u00e9grer du contenu des r\u00e9seaux sociaux, et bien plus encore.<\/p>\n\n\n<p>Examinons certains des blocs Gutenberg par d\u00e9faut les plus populaires et utiles.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Blocs Les Plus Communs<\/h3>\n\n\n<p>Ajouter n&#8217;importe quel type de texte ou d&#8217;image se fait en utilisant un bloc. Cela signifie que les blocs les plus courants sont g\u00e9n\u00e9ralement les diff\u00e9rents styles et types d&#8217;\u00e9l\u00e9ments de texte ou d&#8217;image que tu pourrais ajouter \u00e0 une page.<\/p>\n\n\n<p>Des choses comme :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Bloc De Texte \u2014 Chaque paragraphe que tu r\u00e9diges dans l&#8217;\u00e9diteur de blocs se trouve dans son propre bloc de texte, mais les blocs de texte ne se limitent pas aux paragraphes. \u00c9cris un peu ou beaucoup.<\/li>\n\n\n\n<li>Bloc D&#8217;Image \u2014 Pour quand tu veux montrer autant que raconter, ajoute une image pour un peu plus de style.<\/li>\n\n\n\n<li>Bloc De Liste \u2014 Besoin de r\u00e9diger un plan ? Que dirais-tu d&#8217;une liste ordonn\u00e9e ? Tu peux tout faire avec le bloc de liste !<\/li>\n\n\n\n<li>Bloc Galerie D&#8217;Images \u2014 Partager des photos de vacances ou des photos de produits n&#8217;a jamais \u00e9t\u00e9 aussi beau.<\/li>\n\n\n\n<li>Bloc Tableau \u2014 Cr\u00e9e une table de tarification ou partage des donn\u00e9es de feuille de calcul facilement.<\/li>\n\n\n\n<li>Bloc De Citation \u2014 Tu veux attirer l&#8217;attention sur une observation particuli\u00e8re ? Inspir\u00e9 par une citation pertinente pour l&#8217;article que tu \u00e9cris ? Mets-la en \u00e9vidence avec le bloc de citation !<\/li>\n\n\n<\/ul>\n\n\n<p>Chacun de ces \u00e9l\u00e9ments peut \u00eatre ajout\u00e9 \u00e0 ton site web avec l&#8217;\u00e9diteur de blocs. Ensuite, tu peux les positionner et les styliser dans la section de contenu de la page.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Blocs de Contenu Int\u00e9gr\u00e9s<\/h3>\n\n\n<p>Les blocs rendent extr\u00eamement facile l&#8217;int\u00e9gration de contenu externe et de widgets dans ton site web WordPress sans avoir \u00e0 ajouter un nouveau plugin ou un module compl\u00e9mentaire tiers.<\/p>\n\n\n<p>Certains des types de blocs incorpor\u00e9s les plus populaires pour int\u00e9grer du contenu externe :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Bloc Calendly<\/li>\n\n\n\n<li>Bloc HTML personnalis\u00e9<\/li>\n\n\n\n<li>Bloc Twitter<\/li>\n\n\n\n<li>Bloc YouTube<\/li>\n\n\n\n<li>T\u00e9moignages<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Formulaires de contact<\/li>\n\n\n\n<li>FAQ<\/li>\n\n\n<\/ul>\n\n\n<p>En utilisant ces types de blocs, tu peux aller au-del\u00e0 de l&#8217;\u00e9diteur de texte de base et cr\u00e9er du contenu interactif qui propose toutes sortes de fonctionnalit\u00e9s et de caract\u00e9ristiques.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Blocs Sp\u00e9cialis\u00e9s<\/h3>\n\n\n<p>Voici o\u00f9 les choses deviennent vraiment piquantes.<\/p>\n\n\n<p>Au-del\u00e0 des bases et du contenu int\u00e9gr\u00e9, il existe \u00e9galement un grand nombre de blocs avanc\u00e9s que tu peux utiliser pour des cas particuliers. Comme peut-\u00eatre que tu souhaites am\u00e9liorer la navigation et l&#8217;UX de ton site, ou utiliser WordPress comme un cr\u00e9ateur de site complet.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navigation<\/h3>\n    <p>Sur le web, le terme &#8216;navigation&#8217; repr\u00e9sente le fait de passer d&#8217;un site web ou d&#8217;une page \u00e0 une autre. La navigation est \u00e9galement un terme courant dans le d\u00e9veloppement et le design web. Il y a un accent sur la facilit\u00e9 pour les utilisateurs de trouver les pages dont ils ont besoin.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<p>Voici quelques \u00e9l\u00e9ments \u00e0 v\u00e9rifier :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Bloc de boutons<\/li>\n\n\n\n<li>Bloc de colonnes<\/li>\n\n\n\n<li>Bloc de groupe<\/li>\n\n\n\n<li>Bloc de carrousel de publications<\/li>\n\n\n\n<li>Bloc de contenu de publication<\/li>\n\n\n\n<li>Bloc de boucle de requ\u00eate<\/li>\n\n\n\n<li>Bloc r\u00e9utilisable<\/li>\n\n\n\n<li>Bloc de shortcode<\/li>\n\n\n\n<li>Bloc de table des mati\u00e8res<\/li>\n\n\n<\/ul>\n\n\n<p>Avec ces blocs, tu peux importer du contenu personnalis\u00e9 directement depuis la base de donn\u00e9es WordPress ou personnaliser int\u00e9gralement la disposition, l&#8217;espacement et l&#8217;encha\u00eenement de chaque page ou article sur ton site web.<\/p>\n\n\n<p>C&#8217;est tr\u00e8s bien et charmant.<\/p>\n\n\n<p><i>Mais que faire si tu as besoin d&#8217;un bloc qui n&#8217;est pas inclus par d\u00e9faut dans WordPress ?&nbsp;<\/i><\/p>\n\n\n<p>Heureusement, les blocs sont \u00e9galement personnalisables. Tout comme les widgets, tu peux ajouter de nouveaux blocs et m\u00eame cr\u00e9er les tiens pour r\u00e9pondre aux besoins de la conception de ton site web et de ton mod\u00e8le.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>Les widgets WordPress peuvent ajouter des fonctionnalit\u00e9s aux barres lat\u00e9rales, pieds de page ou autres zones de votre site web. Certains widgets WordPress par d\u00e9faut sont Cat\u00e9gories, Nuage de Tags, Recherche, Menu de Navigation, Calendrier et Articles R\u00e9cents.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Comment Cr\u00e9er Des Blocs Personnalis\u00e9s Avec Un Plugin WordPress<\/h2>\n\n\n<p>De loin, la mani\u00e8re la plus simple de cr\u00e9er un bloc personnalis\u00e9 est d&#8217;utiliser un plugin.<\/p>\n\n\n<p>Le <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">plugin Genesis Custom Blocks<\/a> rend la construction et le lancement de tes propres blocs personnalis\u00e9s assez simples. Tu devras avoir une compr\u00e9hension de base de <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> et de <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> pour cr\u00e9er et styliser le bloc selon tes besoins.<\/p>\n\n\n<p>Avec ces comp\u00e9tences de base, le plugin prend en charge toute la configuration et la mise en place difficiles pour impl\u00e9menter un nouveau bloc.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 1 : Installer le Plugin Genesis Block<\/h3>\n\n\n<p>Tout d&#8217;abord : Rends-toi dans le r\u00e9pertoire de Plugins WordPress et installe le <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Plugin Genesis Custom Block<\/a>.<\/p>\n\n\n<p>(N&#8217;oublie pas d&#8217;aller dans l&#8217;onglet Plugins et de l&#8217;activer.)<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 2 : Ajouter Un Nouveau Bloc<\/h3>\n\n\n<p>Une fois install\u00e9 et activ\u00e9, tu devrais voir une nouvelle option dans le panneau d&#8217;administration WP dans la navigation de gauche.<\/p>\n\n\n<p>Cliquez sur Blocs personnalis\u00e9s &gt; Ajouter Nouveau.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 3 : Personnaliser Les Champs De L&#8217;\u00e9diteur<\/h3>\n\n\n<p>Maintenant, nous sommes pr\u00eats \u00e0 commencer la construction du bloc personnalis\u00e9.<\/p>\n\n\n<p>La premi\u00e8re \u00e9tape consistera \u00e0 configurer les champs et les options de personnalisation qui appara\u00eetront lorsque tu utiliseras le bloc sur ton site web.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Capture d\u2019\u00e9cran montrant l\u2019\u00e9cran de configuration du Plugin Genesis Custom Blocks\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n<p>Tu peux consid\u00e9rer cela comme une sorte de mini version de l&#8217;\u00e9diteur de blocs lui-m\u00eame. Tu ajouteras des champs personnalis\u00e9s et des donn\u00e9es qui seront soit pr\u00e9-remplies par le bloc lui-m\u00eame, soit collect\u00e9es par l&#8217;\u00e9diteur ou l&#8217;utilisateur qui ajoute le bloc \u00e0 une page ou un article.<\/p>\n\n\n<p>Par exemple, si tu construis un bloc d&#8217;appel \u00e0 l&#8217;action (CTA) personnalis\u00e9, tu pourrais ajouter des champs comme :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Texte du Titre<\/li>\n\n\n\n<li>Texte du Sous-Titre<\/li>\n\n\n\n<li>Texte du Bouton<\/li>\n\n\n\n<li>URL du Bouton d&#8217;Appel \u00e0 l&#8217;Action<\/li>\n\n\n<\/ul>\n\n\n<p>Chaque champ aura une \u00e9tiquette, un nom et un type. Tu peux m\u00eame personnaliser la largeur ou ajouter du texte d&#8217;aide pour faciliter l&#8217;utilisation par d&#8217;autres \u00e9diteurs ou r\u00e9dacteurs.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 4 : Personnalise Le Markup Et Le CSS<\/h3>\n\n\n<p>Maintenant que nous avons configur\u00e9 le backend du bloc, nous devons expliquer \u00e0 WordPress comment afficher r\u00e9ellement le contenu qui est ajout\u00e9.<\/p>\n\n\n<p>Voici o\u00f9 toutes les connaissances pr\u00e9alables en HTML ou CSS que tu pourrais avoir seront utiles.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Personnaliser le balisage et le CSS\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n<p>Dans cette prochaine \u00e9tape, tu vas essentiellement \u00e9crire le bloc de code qui sera g\u00e9n\u00e9r\u00e9 dynamiquement \u00e0 partir des entr\u00e9es configur\u00e9es pour l&#8217;\u00e9diteur de blocs.<\/p>\n\n\n<p>Tu peux \u00e9crire ceci en HTML et CSS vanille.<\/p>\n\n\n<p>Tu peux \u00e9galement importer les variables de l&#8217;\u00e9diteur de blocs en utilisant des doubles accolades et le nom du champ (slug) depuis l&#8217;\u00e9diteur. (Ex.,\u201d{{button-text}}\u201d)<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 5 : Ajouter Le Bloc<\/h3>\n\n\n<p>Une fois que tu as configur\u00e9 le bloc \u00e0 l&#8217;aide du plugin Genesis, il devrait appara\u00eetre dans la liste des blocs disponibles dans l&#8217;\u00e9diteur Gutenberg de WordPress.<\/p>\n\n\n<p>Il suffit de cliquer sur le \u00ab + \u00bb puis de trouver le nouveau bloc par son nom.<\/p>\n\n\n<p>Une fois ajout\u00e9, tu devrais voir l&#8217;\u00e9cran de l&#8217;\u00e9diteur de blocs Gutenberg avec les champs et les options que tu as configur\u00e9s.<\/p>\n\n\n<p>C&#8217;est tout !<\/p>\n\n\n<p>Tu peux maintenant utiliser ton bloc personnalis\u00e9, en l&#8217;ajoutant \u00e0 des pages, des articles, des barres lat\u00e9rales, ou l\u00e0 o\u00f9 tu en as besoin.<\/p>\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">Comment Cr\u00e9er Des Blocs WordPress Personnalis\u00e9s Sans Un Plugin<\/h2>\n\n\n<p>Si tu veux te plonger plus profond\u00e9ment et vraiment apprendre \u00e0 cr\u00e9er de nouveaux blocs \u00e0 partir de z\u00e9ro, tu auras besoin de connaissances un peu plus avanc\u00e9es.<\/p>\n\n\n<p>Dans ce tutoriel, nous allons parcourir les \u00e9tapes de base pour utiliser l\u2019outil <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">create-block<\/a> qui te permettra de cr\u00e9er des blocs enti\u00e8rement personnalis\u00e9s sans avoir \u00e0 utiliser un plugin.<\/p>\n\n\n<p>Avertissement : Ceci est un flux de travail avanc\u00e9. Il te faudra plonger dans la ligne de commande.<\/p>\n\n\n<p>Tu devras comprendre le PHP, JavaScript, HTML et CSS.<\/p>\n\n\n<p>Ne dis pas qu&#8217;on ne t&#8217;a pas pr\u00e9venu !<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape #1 : Configurer Node.js, NPM et l&#8217;installation locale de WordPress<\/h3>\n\n\n<p>Avant de pouvoir utiliser create-block, nous devons avoir la configuration et l&#8217;acc\u00e8s appropri\u00e9s.<\/p>\n\n\n<p>Voici les pr\u00e9requis :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">Une installation locale de WordPress<\/a><\/li>\n\n\n\n<li>Configuration du terminal ou de la ligne de commande<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js et npm<\/a><\/li>\n\n\n<\/ul>\n\n\n<p>Tu pourrais \u00e9galement vouloir utiliser <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (gestionnaire de versions Node) pour installer ou mettre \u00e0 jour une version compatible de Node.js<\/p>\n\n\n<p>Avec cette configuration, nous utiliserons la commande NPM \u00ab npx \u00bb pour ex\u00e9cuter le paquet create-block directement depuis son r\u00e9pertoire h\u00e9berg\u00e9 dans le cloud.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape #2 : Ex\u00e9cute Le Package create-block<\/h3>\n\n\n<p>Maintenant, l&#8217;\u00e9tape facile.<\/p>\n\n\n<p>Depuis le terminal, navigue vers le r\u00e9pertoire \/wp-content\/plugins de ton site web sur ta machine locale.<\/p>\n\n\n<p>Ensuite, ex\u00e9cute le package create-block en utilisant NPX :<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Ex\u00e9cuter le package create-block\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n<p>Ce paquet ex\u00e9cutera le processus de configuration de ce qu&#8217;on appelle le &#8220;block scaffolding&#8221;. Il enregistrera tous les \u00e9l\u00e9ments pertinents, lancera la structure de fichiers et de r\u00e9pertoires correcte, et g\u00e9n\u00e9rera le code par d\u00e9faut pour que tout le bloc soit \u00e0 la fois modifiable et utilisable.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape #3 : Activer Le Plugin<\/h3>\n\n\n<p>Le nouveau bloc prendra la forme d&#8217;un plugin.<\/p>\n\n\n<p>Une fois le paquet create-block termin\u00e9, tu devras te rendre dans l&#8217;admin WP.<\/p>\n\n\n<p>Rends-toi \u00e0 la page des Plugins et active le nouveau plugin qu&#8217;il a cr\u00e9\u00e9, qui devrait porter le nom du bloc que tu as utilis\u00e9 dans ta commande npx.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape #4 : Personnaliser Le Code Du Bloc<\/h3>\n\n\n<p>Tu personnaliseras le contenu et les fonctionnalit\u00e9s du bloc dans le dossier <b>\/src\/<\/b> \u00e0 l&#8217;int\u00e9rieur du r\u00e9pertoire du plugin.<\/p>\n\n\n<p><b>Index.js<\/b> est l&#8217;endroit o\u00f9 tu enregistreras le bloc et coderas la sortie principale :<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Personnaliser le Code du Bloc\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n<p>Remarque que la fonction registerBlockType est configur\u00e9e pour g\u00e9rer \u00e0 la fois les entr\u00e9es de l&#8217;\u00e9diteur de blocs (\u00ab edit \u00bb) et l&#8217;affichage c\u00f4t\u00e9 frontend (\u00ab save \u00bb).<\/p>\n\n\n<p>Ceci n\u2019est que le d\u00e9but de la construction d\u2019un bloc fonctionnel.<\/p>\n\n\n<p>Tu voudras probablement consulter la documentation compl\u00e8te pour \u00e9crire des blocs fonctionnels en utilisant l&#8217;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">API de Bloc WordPress<\/a>.<\/p>\n\n\n<p>Une fois que tu ma\u00eetrises les bases, tu peux int\u00e9grer des d\u00e9pendances suppl\u00e9mentaires, exploiter des sources de donn\u00e9es externes, et \u00e0 peu pr\u00e8s tout ce que ton c\u0153ur d\u00e9sire.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape #5 : Ajouter Le Bloc Depuis L&#8217;\u00c9diteur Gutenberg<\/h3>\n\n\n<p>Avec le plugin activ\u00e9, tu peux ajouter ton bloc \u00e0 n&#8217;importe quelle page ou publication depuis l&#8217;\u00e9diteur Gutenberg.<\/p>\n\n\n<p>Acc\u00e8de-y en utilisant le bouton \u201c+\u201d ou la commande \u201c\/\u201d, tout comme n&#8217;importe quel autre bloc.<\/p>\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Le Ciel Est La Limite<\/h2>\n\n\n<p>Bon, nous sommes pass\u00e9s des bases \u00e0 l&#8217;avanc\u00e9 avec celui-ci, mais la bonne nouvelle, c&#8217;est que maintenant tu es inarr\u00eatable.<\/p>\n\n\n<p>Entre les options de bloc par d\u00e9faut, le plugin Genesis et la possibilit\u00e9 de construire tes propres blocs \u00e0 partir de z\u00e9ro \u2014 il n&#8217;y a rien que tu ne puisses pas faire !<\/p>\n\n\n<p>Et parce que les blocs sont incroyablement puissants et flexibles, il n&#8217;y a pratiquement rien que tu ne puisses construire. Ton site WordPress dispose maintenant d&#8217;une fonctionnalit\u00e9 presque infinie, et tu peux r\u00e9aliser le site, l&#8217;application ou le projet de tes r\u00eaves.<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nos mises \u00e0 jour automatiques et nos solides d\u00e9fenses de s\u00e9curit\u00e9 retirent la gestion du serveur de tes mains afin que tu puisses te concentrer sur la cr\u00e9ation d\u2019un excellent site web.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            D\u00e9couvrir Les Offres                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Serait-ce un endroit \u00e9trange pour mentionner comment ma femme garde un kit Lego Star Wars BB-8 en \u00e9dition limit\u00e9e, en parfait \u00e9tat et non ouvert ? Ces choses se vendent \u00e0 environ 500 $ ! D&#8217;accord. Ce serait \u00e9trange. Compris, haut et fort&#8230; Mais tout cela aura un peu plus de sens dans une seconde. Dans ce post, [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Les blocs WordPress sont l\u2019un des changements les plus significatifs jamais apport\u00e9s au CMS. Apprends comment ils fonctionnent et comment tu peux les personnaliser selon tes besoins exacts.","toc_headlines":"[[\"definition\",\"Quels Sont Les Blocs WordPress ?\"],[\"blocks\",\"Quels Blocs WordPress Poss\u00e8de-t-il D\u00e9j\u00e0 ?\"],[\"create\",\"Comment Cr\u00e9er Des Blocs Personnalis\u00e9s Avec Un Plugin WordPress\"],[\"custom\",\"Comment Cr\u00e9er Des Blocs WordPress Personnalis\u00e9s Sans Un Plugin\"],[\"summary\",\"Le Ciel Est La Limite\"]]","hide_toc":false,"footnotes":""},"categories":[15017,15005,15009],"tags":[],"class_list":["post-70312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-getting-started-fr","category-website-design-fr","category-wordpress-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!) - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Les blocs WordPress sont l\u2019un des changements les plus significatifs jamais apport\u00e9s au CMS. Apprends comment ils fonctionnent et comment tu peux les personnaliser selon tes besoins exacts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!)\" \/>\n<meta property=\"og:description\" content=\"Les blocs WordPress sont l\u2019un des changements les plus significatifs jamais apport\u00e9s au CMS. Apprends comment ils fonctionnent et comment tu peux les personnaliser selon tes besoins exacts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:52:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!) - DreamHost Blog","description":"Les blocs WordPress sont l\u2019un des changements les plus significatifs jamais apport\u00e9s au CMS. Apprends comment ils fonctionnent et comment tu peux les personnaliser selon tes besoins exacts.","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:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/","og_locale":"en_US","og_type":"article","og_title":"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!)","og_description":"Les blocs WordPress sont l\u2019un des changements les plus significatifs jamais apport\u00e9s au CMS. Apprends comment ils fonctionnent et comment tu peux les personnaliser selon tes besoins exacts.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-05-26T14:52:18+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T14:52:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/"},"wordCount":2418,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Commencer","Design de Site Web","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/","name":"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T14:52:18+00:00","description":"Les blocs WordPress sont l\u2019un des changements les plus significatifs jamais apport\u00e9s au CMS. Apprends comment ils fonctionnent et comment tu peux les personnaliser selon tes besoins exacts.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/comment-utiliser-les-blocs-wordpress-comment-crer-les-tiens-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Comment Utiliser Les Blocs WordPress (+ Comment Cr\u00e9er Les Tiens!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"fr","translations":{"fr":70312,"es":41465,"en":41438,"de":52846,"pt":54873,"pl":54880,"ru":54916,"uk":54919,"it":68363,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70312"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70312\/revisions"}],"predecessor-version":[{"id":70314,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70312\/revisions\/70314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}