{"id":234250,"date":"2023-02-21T13:38:00","date_gmt":"2023-02-21T10:38:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234250"},"modified":"2022-11-12T02:09:08","modified_gmt":"2022-11-11T23:09:08","slug":"comment-ajouter-des-styles-de-blocs-personnalises-aux-blocs-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-ajouter-des-styles-de-blocs-personnalises-aux-blocs-wordpress-gutenberg\/","title":{"rendered":"Comment ajouter des styles de blocs personnalis\u00e9s aux blocs WordPress Gutenberg"},"content":{"rendered":"\n

Une fonctionnalit\u00e9 un peu moins connue de Gutenberg est la possibilit\u00e9 de configurer diff\u00e9rents styles pour les blocs. Vous pouvez enregistrer autant de styles diff\u00e9rents sur n’importe quel type de bloc afin de donner au m\u00eame bloc des designs diff\u00e9rents. Les styles possibles pour les blocs sont affich\u00e9s sous forme de section dans la partie droite de l’\u00e9diteur. Chaque style obtient son propre aper\u00e7u. Si vous g\u00e9rez correctement les styles, le passage d’un style \u00e0 l’autre devrait imm\u00e9diatement mettre \u00e0 jour la conception dans l’\u00e9diteur ainsi que dans l’interface.<\/p>\n

La documentation de WordPress pour cette fonctionnalit\u00e9<\/a> n’est actuellement pas aussi compl\u00e8te et informative qu’elle pourrait l’\u00eatre. Ainsi, dans cet article, nous examinerons en d\u00e9tail comment vous pouvez ajouter vos styles de bloc personnalis\u00e9s et comment vous devez g\u00e9rer le style pour eux.<\/p>\n

\"Comment<\/a><\/p>\n

La fa\u00e7on dont cette fonctionnalit\u00e9 fonctionne est que chaque fois que Gutenberg d\u00e9tecte qu’un type de bloc a enregistr\u00e9 au moins un style, la bo\u00eete "Styles" appara\u00eetra automatiquement dans la partie droite de l’\u00e9diteur. \u00c0 l’int\u00e9rieur, l’\u00e9diteur peut choisir entre le style par d\u00e9faut ou n’importe quel style. style de bloc qui a \u00e9t\u00e9 ajout\u00e9.<\/p>\n

Dans les versions ant\u00e9rieures (au moins avant WordPress 5.3), l’enregistrement d’un style personnalis\u00e9 vous obligeait \u00e9galement \u00e0 enregistrer le style par d\u00e9faut (\u00ab aucun style \u00bb). Heureusement, cela a \u00e9t\u00e9 corrig\u00e9 dans les versions les plus r\u00e9centes de WordPress. Il ne vous reste plus qu’\u00e0 enregistrer vos styles personnalis\u00e9s et WordPress ajoutera automatiquement le style par d\u00e9faut.<\/p>\n

Vous pouvez enregistrer des styles de blocs personnalis\u00e9s de deux mani\u00e8res ; avec PHP ou avec Javascript. Nous allons jeter un \u0153il aux deux. Mais d’abord quelques a-ha concernant la gestion de vos styles.<\/p>\n

Une note sur les styles de mise en file d’attente pour Gutenberg<\/h2>\n

Il peut y avoir une certaine confusion sur comment et o\u00f9 ajouter vos styles (fichiers CSS)\u00a0; \u00e0 l’\u00e9diteur uniquement, \u00e0 l’interface ou \u00e0 une feuille de style pour les deux. L’un des principaux objectifs de l’\u00e9diteur Gutenberg est de s’assurer que vous pouvez correctement pr\u00e9visualiser le contenu de votre publication dans l’\u00e9diteur. Il est donc recommand\u00e9 de vous assurer que vos styles personnalis\u00e9s sont appliqu\u00e9s dans l’\u00e9diteur ainsi que dans l’interface.<\/p>\n

La fa\u00e7on dont vous g\u00e9rez cela d\u00e9pend vraiment de votre projet et de la configuration de la feuille de style existante. Si vous d\u00e9veloppez un th\u00e8me complet, vous incluez probablement d\u00e9j\u00e0 le style de bloc dans votre feuille de style frontale. Vous pouvez envisager d’ajouter une feuille de style distincte que vous mettrez en file d’attente pour l’\u00e9diteur uniquement. Mais cela peut \u00eatre difficile \u00e0 maintenir si vous ajoutez beaucoup de styles diff\u00e9rents. Vous devrez mettre \u00e0 jour vos styles \u00e0 deux endroits et vous assurer que leurs r\u00e9sultats sont les m\u00eames. La solution pour cela serait de conserver une feuille de style que vous mettez en file d’attente pour l’\u00e9diteur et l’interface. Mais alors votre frontend devrait charger au moins deux feuilles de style distinctes et ce n’est peut-\u00eatre pas id\u00e9al.<\/p>\n

Une autre solution consiste \u00e0 utiliser, par exemple, SCSS ou LESS et \u00e0 configurer @imports<\/code>de telle mani\u00e8re que vous n’ayez besoin d’\u00e9crire vos styles de bloc qu’une seule fois, et cela s’applique \u00e0 la fois \u00e0 l’\u00e9diteur et \u00e0 l’interface. Comme vous le verrez ci-dessous lorsque vous utilisez PHP pour enregistrer des styles de bloc personnalis\u00e9s, vous avez encore une autre option ; pour ajouter des styles en ligne. Ces styles seront appliqu\u00e9s \u00e0 la fois dans l’\u00e9diteur et dans l’interface. En frontend, ils seront ajout\u00e9s par WordPress en tant qu’inline personnalis\u00e9 <style type=\"text\/css\">...<\/style><\/code>dans l’en-t\u00eate.<\/p>\n

Quelle que soit la fa\u00e7on dont vous choisissez de le r\u00e9soudre, sachez qu’il existe quelques nouveaux crochets pour les styles de registre (et les scripts) pour Gutenberg. Si vous souhaitez mettre en file d’attente une feuille de style pour le frontend et l’\u00e9diteur, utilisez le hook enqueue_block_assets<\/code>. Si vous souhaitez ajouter une feuille de style uniquement pour l’\u00e9diteur, mettez-la en file d’attente dans le hook enqueue_block_editor_assets<\/code>.<\/p>\n

Comment appliquer un style sur les styles de blocs personnalis\u00e9s<\/h2>\n

Les styles de bloc personnalis\u00e9s seront ajout\u00e9s en tant que classe d’un certain mod\u00e8le sur la balise HTML la plus externe du bloc.<\/p>\n

La classe CSS pour les styles de bloc est ajout\u00e9e sous la forme de " is-style-<stylename><\/code>". Si vous nommez par exemple votre style " outline<\/code>", le bloc obtiendra la classe " is-style-outline<\/code>".<\/p>\n

Cependant, vous constaterez peut-\u00eatre que l’\u00e9diteur Gutenberg remplacera dans certains cas votre style. Je recommande de pr\u00e9fixer le style de votre \u00e9diteur avec le s\u00e9lecteur editor-styles-wrapper<\/code>pour vous assurer que vos styles \u00abgagnent \u00bb. Gardez \u00e0 l’esprit que cette classe n’existe pas en frontend, donc pour \u00eatre s\u00fbr, vous devrez peut-\u00eatre ajouter deux s\u00e9lecteurs, comme ceci (si vous utilisez la m\u00eame feuille de style pour l’\u00e9diteur et le frontend):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
Ajouter des styles de blocs personnalis\u00e9s avec PHP<\/h2>\n
Pour ajouter un type de bloc personnalis\u00e9 \u00e0 l’aide de PHP, nous utilisons la fonction [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. La documentation manque malheureusement d’informations sur le crochet que nous devrions utiliser, mais j’ai eu de la chance avec le crochet init<\/code>.<\/p>\n
Vous devez conna\u00eetre le nom de l’espace de noms Gutenberg de votre type de bloc afin d’y ajouter un style personnalis\u00e9. Tous les blocs standards de WordPress ont l’espace de noms " core<\/code>" suivi d’un \/<\/code>et d’une version slug de leur nom. Par exemple, le nom de Gutenberg pour le bloc de paragraphe standard est core\/paragraph<\/code>.<\/p>\n
L’enregistrement d’un style de bloc personnalis\u00e9 se fait dans sa forme la plus simple comme ceci\u00a0:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
Le code ci-dessus ajoute un style de bloc personnalis\u00e9 au type de bloc Titre, ce qui entra\u00eenerait la classe is-style-colored-bottom-border<\/code>sur tout titre ayant choisi ce style.<\/p>\n
Cette fonction vous propose deux m\u00e9thodes pour ajouter votre CSS (si vous ne l’avez pas ajout\u00e9 d’une autre mani\u00e8re)\u00a0; soit en fournissant un CSS en ligne sous forme de cha\u00eene, soit en fournissant un descripteur de feuille de style enregistr\u00e9 que WordPress mettra en file d’attente pour vous si n\u00e9cessaire.<\/p>\n
Si vous souhaitez ajouter un style en ligne (rappelez-vous, cela affectera \u00e0 la fois l’\u00e9diteur et le frontend), ajoutez l’\u00e9l\u00e9ment ‘ inline_style<\/code>‘ \u00e0 l’appel de fonction et \u00e9crivez le CSS complet sous forme de cha\u00eene comme valeur\u00a0:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Si vous pr\u00e9f\u00e9rez que la fonction mette en file d’attente une feuille de style, fournissez son handle \u00e0 l’\u00e9l\u00e9ment ‘ style_handle<\/code>‘.<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
Ajustez l’emplacement de votre feuille de style en fonction de votre projet. La feuille de style sera appliqu\u00e9e \u00e0 la fois \u00e0 l’\u00e9diteur et \u00e0 l’interface, mais cette fois l’interface fera une demande distincte pour inclure cette feuille de style. Cette m\u00e9thode n’est pas recommand\u00e9e si vous ajoutez plusieurs styles de blocs. Le frontend sera consid\u00e9rablement ralenti en demandant tout un tas de feuilles de style distinctes.<\/p>\n
Ajout de styles de blocs personnalis\u00e9s avec Javascript<\/h2>\n
Si vous pr\u00e9f\u00e9rez ajouter vos styles de bloc en utilisant Javascript, c’est aussi simple qu’avec PHP.<\/p>\n
Vous devrez mettre en file d’attente un fichier Javascript sur le crochet de l’\u00e9diteur uniquement\u00a0: enqueue_block_editor_assets<\/code>. Votre script n’aura probablement pas besoin de d\u00e9pendances, mais je pr\u00e9f\u00e8re ajouter au moins ‘ wp-blocks<\/code>‘ comme d\u00e9pendance.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
Ajustez le nom et l’emplacement du fichier en fonction de votre projet.<\/p>\n
Dans votre fichier Javascript, vous utilisez la fonction registerBlockStyle()<\/code>dans l’ wp.blocks<\/code>objet pour enregistrer des styles de bloc personnalis\u00e9s. Ajouter le m\u00eame style de bloc que nous avons fait en PHP ci-dessus ressemblerait \u00e0\u00a0:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
Et c’est tout! Tr\u00e8s facile.<\/p>\n
D\u00e9senregistrer les styles de bloc<\/h2>\n
Tout comme vous pouvez enregistrer un style de bloc, un style de bloc peut \u00e9galement \u00eatre d\u00e9senregistr\u00e9. Peut-\u00eatre souhaitez-vous supprimer certains des styles de blocs par d\u00e9faut de WordPress? Comme pour l’enregistrement des styles de bloc, vous pouvez \u00e9galement d\u00e9senregistrer les styles de bloc avec PHP ou Javascript. Mais le choix entre ces deux m\u00e9thodes n’est plus un choix de pr\u00e9f\u00e9rence.<\/p>\n
Vous ne pouvez pas d\u00e9senregistrer un bloc avec PHP s’il a \u00e9t\u00e9 enregistr\u00e9 avec Javascript, et vice versa. Vous devez donc d\u00e9terminer comment le style que vous souhaitez supprimer a \u00e9t\u00e9 enregistr\u00e9 et le faire correspondre avec PHP ou Javascript. Je crois que tous les styles de blocs de WordPress sont ajout\u00e9s avec Javascript (ne me citez pas l\u00e0-dessus\u00a0!). Donc, si vous souhaitez en supprimer certains, vous devrez suivre la route Javascript.<\/p>\n
D\u00e9senregistrer un style de bloc avec PHP se fait en appelant la fonction unregister_block_style()<\/code>, en fournissant le type de bloc et le nom du style que vous souhaitez supprimer. Par exemple, la d\u00e9sinscription du style ajout\u00e9 ci-dessus dans cet article (en supposant qu’il a \u00e9t\u00e9 enregistr\u00e9 avec PHP) ressemblerait \u00e0 ceci\u00a0:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
La d\u00e9sinscription d’un style de bloc avec Javascript se fait de la m\u00eame mani\u00e8re avec la fonction unregisterBlockStyle()<\/code>dans l’ wp.blocks<\/code>objet. Cependant, avec Javascript, il y a une question de savoir quel script doit s’ex\u00e9cuter en premier, et vous pouvez rencontrer des probl\u00e8mes lorsque votre script est ex\u00e9cut\u00e9 avant l’enregistrement. Pour r\u00e9soudre ce probl\u00e8me, nous utilisons l’\u00e9quivalent de Gutenberg au "document pr\u00eat" de jQuery (jQuery(document).ready(function() { ... });<\/code>), et ajoutons \u00e9galement une autre d\u00e9pendance \u00e0 votre script.<\/p>\n
Commen\u00e7ons par ajouter une nouvelle d\u00e9pendance de script sur votre fichier Javascript mis en file d’attente vers ‘ wp-edit-post<\/code>‘\u00a0:<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
Et \u00e0 l’int\u00e9rieur de votre fichier Javascript, encapsulez votre appel de fonction de d\u00e9sinscription dans wp.domReady(function() { ... })<\/code>, comme ceci\u00a0:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Comme le montre le code ci-dessus, avec Javascript, nous sommes maintenant en mesure de supprimer le style "Large" de WordPress sur le bloc Quote. Si vous essayez de faire la m\u00eame chose avec PHP, cela ne fonctionnera pas.<\/p>\n
Remarque sur la d\u00e9sinscription des styles de bloc<\/h3>\n
Vous remarquerez peut-\u00eatre que m\u00eame si vous avez r\u00e9ussi \u00e0 supprimer tous les styles de bloc personnalis\u00e9s sur un bloc, la case "Styles" de l’\u00e9diteur ne dispara\u00eetra pas. Il reste en place avec seulement le choix "Par d\u00e9faut" \u00e0 l’int\u00e9rieur. Si vous souhaitez supprimer compl\u00e8tement la case "Styles" pour ne pas confondre les \u00e9diteurs, vous pouvez simplement d\u00e9senregistrer le style par d\u00e9faut \u00e9galement (par exemple wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>). Cela supprimera compl\u00e8tement la case "Styles" de l’\u00e9diteur Gutenberg.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article explique comment configurer des styles de bloc pour les blocs dans Gutenberg, avec PHP ou Javascript – et aborde des id\u00e9es pour r\u00e9soudre les feuilles de style.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,832,936,936,1110,801,801,811,811,832,841,841,862,862],"tags":[1167],"class_list":["post-234250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-guide-pour-les-debutants","category-gutenberg-3","category-n-a","category-php-3","category-plugins-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234250"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234250\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}