{"id":234205,"date":"2023-02-12T16:57:00","date_gmt":"2023-02-12T13:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234205"},"modified":"2022-11-12T00:12:08","modified_gmt":"2022-11-11T21:12:08","slug":"modeles-de-blocs-de-gutenberg-regard-dun-developpeur","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/modeles-de-blocs-de-gutenberg-regard-dun-developpeur\/","title":{"rendered":"Mod\u00e8les de blocs de Gutenberg\u00a0: regard d&rsquo;un d\u00e9veloppeur"},"content":{"rendered":"\n<p>Un aper\u00e7u des nouveaux mod\u00e8les de blocs de WordPress Gutenberg, dans les yeux d&rsquo;un d\u00e9veloppeur. Nous examinerons ce qu&rsquo;ils sont, \u00e0 quoi ils peuvent \u00eatre utilis\u00e9s et nous verrons plus en d\u00e9tail comment \u00e9crire du code pour eux.<\/p>\n<h2>Mod\u00e8les de bloc et leur utilisation<\/h2>\n<p>Les mod\u00e8les de blocs ont \u00e9t\u00e9 introduits dans WordPress 5.5 (11 ao\u00fbt 2020). Il s&rsquo;agit d&rsquo;une nouvelle fonctionnalit\u00e9 de l&rsquo;outil d&rsquo;insertion de blocs pour ins\u00e9rer plus facilement une configuration pr\u00e9d\u00e9finie de plusieurs blocs. Les d\u00e9veloppeurs de th\u00e8mes ou de plugins peuvent d\u00e9finir un groupe de blocs, leur mode d&rsquo;imbrication, leur contenu et leurs attributs, et les utilisateurs finaux peuvent l&rsquo;ins\u00e9rer en un simple clic. L&rsquo;id\u00e9e est que les utilisateurs finaux n&rsquo;ont plus besoin de cr\u00e9er manuellement des mises en page complexes et tous leurs param\u00e8tres personnalis\u00e9s, et de les imbriquer dans des conteneurs appropri\u00e9s pour les blocs qu&rsquo;ils utilisent souvent.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" alt=\"Mod\u00e8les de blocs de Gutenberg\u00a0: regard d&#039;un d\u00e9veloppeur\" ><\/a><\/p>\n<p>Une fois qu&rsquo;un motif de bloc est ajout\u00e9 \u00e0 l&rsquo;\u00e9diteur, les blocs ne savent pas qu&rsquo;ils ont \u00e9t\u00e9 ajout\u00e9s via un motif de bloc. Ils sont ajout\u00e9s en tant que blocs normaux permettant aux utilisateurs de modifier leur contenu et leurs param\u00e8tres. C&rsquo;est essentiellement un raccourci pour ajouter une configuration de plusieurs blocs.<\/p>\n<p>L&rsquo;id\u00e9e est bonne! Tous les utilisateurs finaux ne sont pas \u00e0 l&rsquo;aise pour cr\u00e9er une grande structure de blocs imbriqu\u00e9s dans l&rsquo;\u00e9diteur afin de lui donner un aspect parfait. Cependant, jusqu&rsquo;\u00e0 pr\u00e9sent, cette fonctionnalit\u00e9 est principalement un avantage pour les d\u00e9veloppeurs, car les utilisateurs finaux ne peuvent pas cr\u00e9er leurs propres mod\u00e8les. Pour les propres blocs personnalis\u00e9s des utilisateurs, ils doivent s&rsquo;en tenir \u00e0 l&rsquo;utilisation de blocs r\u00e9utilisables. Mais surtout pour les d\u00e9veloppeurs de th\u00e8mes, les mod\u00e8les de blocs leur permettent de vraiment montrer aux utilisateurs finaux la meilleure configuration de blocs qui fonctionne bien dans le th\u00e8me.<\/p>\n<p>WordPress a ajout\u00e9 un nouveau support de th\u00e8me pour les mod\u00e8les de blocs: <code>'core-block-patterns'<\/code>. Depuis la version 5.5.0, Core ex\u00e9cutera automatiquement un <code>add_theme_support('core-block-patterns')<\/code>afin que vous n&rsquo;ayez pas besoin de le faire dans votre th\u00e8me.<\/p>\n<p>\u00c9tant donn\u00e9 que toutes les fonctions de mod\u00e8le de bloc n&rsquo;existent que dans une toute nouvelle version de WordPress, c&rsquo;est une bonne id\u00e9e de v\u00e9rifier d&rsquo;abord son existence, afin de ne pas casser les sites avec des versions plus anciennes de WordPress. Dans tous les exemples de code ci-dessous, j&rsquo;ai fait exactement cela.<\/p>\n<p>WordPress 5.5 est livr\u00e9 avec 9 mod\u00e8les de blocs pr\u00e9d\u00e9finis (voir la liste ci-dessous). Les mod\u00e8les de blocs sont affich\u00e9s dans les cat\u00e9gories de mod\u00e8les (le noyau ajoute 5 cat\u00e9gories). Les cat\u00e9gories de mod\u00e8le de bloc fonctionnent comme les cat\u00e9gories de publication\u00a0; vous pouvez mettre un motif de bloc dans plusieurs cat\u00e9gories. Les d\u00e9veloppeurs de th\u00e8mes et de plugins peuvent enregistrer leurs propres mod\u00e8les de blocs et cat\u00e9gories de mod\u00e8les de blocs, ainsi que d\u00e9senregistrer ceux du noyau. Alors regardons de plus pr\u00e8s comment !<\/p>\n<h2>Mod\u00e8les de blocs et cat\u00e9gories de mod\u00e8les de blocs inclus dans WordPress 5.5<\/h2>\n<p>Les mod\u00e8les de bloc livr\u00e9s dans WordPress 5.5 sont les suivants (l&rsquo;espace de noms et l&rsquo;ID de slug de chaque mod\u00e8le sont affich\u00e9s entre parenth\u00e8ses) :<\/p>\n<ul>\n<li>Deux boutons (&lsquo; <code>core\/two-buttons<\/code>&lsquo;)<\/li>\n<li>Trois boutons (&lsquo; <code>core\/three-buttons<\/code>&lsquo;)<\/li>\n<li>Deux colonnes de texte (&lsquo; <code>core\/text-two-columns<\/code>&lsquo;)<\/li>\n<li>Deux colonnes de texte avec des images (&lsquo; <code>core\/text-two-columns-with-images<\/code>&lsquo;)<\/li>\n<li>Trois colonnes de texte avec des boutons (&lsquo; <code>core\/text-three-columns-buttons<\/code>&lsquo;)<\/li>\n<li>Deux images c\u00f4te \u00e0 c\u00f4te (&lsquo; <code>core\/two-images<\/code>&lsquo;)<\/li>\n<li>Grand en-t\u00eate avec un titre (&lsquo; <code>core\/large-header<\/code>&lsquo;)<\/li>\n<li>Grand en-t\u00eate avec un titre et un bouton (&lsquo; <code>core\/large-header-button<\/code>&lsquo;)<\/li>\n<li>Citation (&lsquo; <code>core\/quote<\/code>&lsquo;)<\/li>\n<\/ul>\n<p>Les cat\u00e9gories ajout\u00e9es dans WordPress 5.5 sont (leurs identifiants de slug sont affich\u00e9s entre parenth\u00e8ses) :<\/p>\n<ul>\n<li>Boutons (&lsquo; <code>buttons<\/code>&lsquo;)<\/li>\n<li>Colonnes (&lsquo; <code>columns<\/code>&lsquo;)<\/li>\n<li>Galerie (&lsquo; <code>gallery<\/code>&lsquo;)<\/li>\n<li>En-t\u00eates (&lsquo; <code>header<\/code>&lsquo; \u2013 notez pas de &lsquo;s&rsquo; \u00e0 la fin)<\/li>\n<li>Texte (&lsquo; <code>text<\/code>&lsquo;)<\/li>\n<\/ul>\n<h2>D\u00e9senregistrement des mod\u00e8les de bloc<\/h2>\n<p>Vous pouvez d\u00e9senregistrer des motifs de bloc \u00e0 l&rsquo;aide de la fonction <code>[unregister_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern)()<\/code>. Fournissez simplement une cha\u00eene avec le mod\u00e8le de bloc \u00e0 supprimer en tant que param\u00e8tre. Reportez-vous \u00e0 la vue d&rsquo;ensemble ci-dessus pour les mod\u00e8les de blocs de base. Ex\u00e9cutez cette fonction dans une fonction li\u00e9e \u00e0 l&rsquo; <code>init<\/code>action.<\/p>\n<p>Un exemple de d\u00e9senregistrement des motifs de bloc de base &quot;Deux boutons&quot; et &quot;Trois boutons&quot;:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern')) {\n        return;\n    }\n    unregister_block_pattern('core\/two-buttons');\n    unregister_block_pattern('core\/three-buttons');\n});<\/code><\/pre>\n<h2>Enregistrement de motifs de bloc<\/h2>\n<p>L&rsquo;enregistrement d&rsquo;un nouveau motif de bloc s&rsquo;effectue \u00e0 l&rsquo;aide de la fonction <code>[register_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern)()<\/code>. Il accepte deux param\u00e8tres\u00a0; le premier est une cha\u00eene d&rsquo;un nom unique pour votre mod\u00e8le, y compris l&rsquo;espace de noms. Le second est un tableau de param\u00e8tres pour votre mod\u00e8le de bloc.<\/p>\n<p><strong>Astuce<\/strong>: La d\u00e9finition d&rsquo;un mod\u00e8le de bloc n\u00e9cessite que vous fournissiez un contenu HTML brut pour votre configuration de bloc. Je ne recommande pas de taper ceci manuellement car cela entra\u00eenera facilement des conflits de blocs invalides. Au lieu de cela, allez dans l&rsquo;\u00e9diteur et configurez les blocs comme vous le souhaitez dans votre mod\u00e8le. Cliquez ensuite sur le &quot;menu point&quot; dans la barre d&rsquo;outils du bloc parental et cliquez sur &quot;Copier&quot;. Apr\u00e8s cela, vous pouvez retourner dans votre \u00e9diteur de code et coller (Ctrl+V). Cela vous donne le code HTML brut de la configuration que vous avez copi\u00e9e. Utilisez la fonctionnalit\u00e9 de l&rsquo;\u00e9diteur de code pour remplacer toutes les nouvelles lignes <code>n<\/code>et assurez-vous d&rsquo;\u00e9chapper correctement les guillemets.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" alt=\"Mod\u00e8les de blocs de Gutenberg\u00a0: regard d&#039;un d\u00e9veloppeur\" ><\/a><\/p>\n<p>Les propri\u00e9t\u00e9s de votre mod\u00e8le de bloc sont les suivantes (deuxi\u00e8me tableau d&rsquo;arguments)\u00a0:<\/p>\n<ul>\n<li><strong><code>title<\/code><\/strong>(obligatoire)\u00a0: le nom affichable de votre mod\u00e8le de bloc<\/li>\n<li><code>**content**<\/code>(obligatoire): HTML RAW de la configuration du bloc<\/li>\n<li><strong><code>description<\/code><\/strong>: Description de votre mod\u00e8le de bloc. Est visuellement cach\u00e9<\/li>\n<li><strong><code>categories<\/code><\/strong>: Un tableau de cat\u00e9gories dans lesquelles ajouter ce mod\u00e8le de bloc. Si vous ne fournissez pas cette propri\u00e9t\u00e9, le bloc sera plac\u00e9 dans une cat\u00e9gorie de mod\u00e8le de bloc &quot;Non cat\u00e9goris\u00e9&quot;.<\/li>\n<li><strong><code>keywords<\/code><\/strong>: Un tableau de mots-cl\u00e9s qui peuvent aider les utilisateurs \u00e0 trouver votre mod\u00e8le lors de la recherche<\/li>\n<li><strong><code>viewportWidth<\/code><\/strong>: Indiquez un entier de la largeur du motif de bloc dans l&rsquo;ins\u00e9reuse. Affecte uniquement l&rsquo;aper\u00e7u dans l&rsquo;ins\u00e9reuse.<\/li>\n<\/ul>\n<p>Voici un exemple d&rsquo;enregistrement d&rsquo;un mod\u00e8le de bloc qui se compose d&rsquo;un bloc Couverture pleine largeur avec une couleur d&rsquo;arri\u00e8re-plan, qui contient un bloc Titre align\u00e9 au centre avec une couleur de texte sp\u00e9cifique et un paragraphe align\u00e9 au centre d&rsquo;une couleur de texte sp\u00e9cifique\u00a0:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern')) {\n        return;\n    }\n    register_block_pattern('awp\/standard-cta-section', [\n        'title' =&gt; __('Standard CTA Section', 'awp'),\n        'keywords' =&gt; ['cta'],\n        'categories' =&gt; ['header'],\n        'viewportWidth' =&gt; 1000,\n        'content' =&gt; \"&lt;!-- wp:cover {\"customOverlayColor\":\"#dadee2\",\"align\":\"full\"} --&gt;n&lt;div class=\"wp-block-cover alignfull has-background-dim\" style=\"background-color:#dadee2\"&gt;&lt;div class=\"wp-block-cover__inner-container\"&gt;&lt;!-- wp:heading {\"align\":\"center\",\"level\":1,\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;h1 class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Section title&lt;\/h1&gt;n&lt;!-- \/wp:heading --&gt;nn&lt;!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;p class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Write your text here.&lt;\/p&gt;n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;&lt;\/div&gt;n&lt;!-- \/wp:cover --&gt;\",\n    ]);\n});<\/code><\/pre>\n<h2>Enregistrement de cat\u00e9gories de motifs de bloc<\/h2>\n<p>Les d\u00e9veloppeurs peuvent \u00e9galement enregistrer des cat\u00e9gories de mod\u00e8les de blocs personnalis\u00e9s. Cela se fait avec la fonction <code>[register_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern_category)()<\/code>. Il accepte deux param\u00e8tres\u00a0; d&rsquo;abord une cha\u00eene de la cat\u00e9gorie slug, et ensuite un tableau de propri\u00e9t\u00e9s. \u00c0 l&rsquo;heure actuelle, une seule propri\u00e9t\u00e9 est prise en charge dans le deuxi\u00e8me argument\u00a0; <code>label<\/code>pour le nom lisible de la cat\u00e9gorie.<\/p>\n<p>Vous trouverez ci-dessous un exemple d&rsquo;enregistrement d&rsquo;une cat\u00e9gorie de mod\u00e8le de bloc personnalis\u00e9\u00a0:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern_category')) {\n        return;\n    }\n    register_block_pattern_category('awp-patterns', ['label' =&gt; __('AWhitePixel Block Patterns', 'awp')]);\n});<\/code><\/pre>\n<p>Avec cela, vous pouvez ajouter &lsquo;awp-patterns&rsquo; \u00e0 l&rsquo; <code>categories<\/code>argument &lsquo; &lsquo; de <code>register_block_pattern()<\/code>. Gardez \u00e0 l&rsquo;esprit que si une cat\u00e9gorie n&rsquo;a pas de motifs de blocs enregistr\u00e9s, la cat\u00e9gorie ne sera pas affich\u00e9e dans l&rsquo;outil d&rsquo;insertion de blocs. Vous devrez ajouter au moins un motif de bloc dans cette cat\u00e9gorie pour le faire appara\u00eetre.<\/p>\n<h2>D\u00e9senregistrement des cat\u00e9gories de mod\u00e8les de blocs<\/h2>\n<p>Enfin, il existe une fonction <code>[unregister_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern_category)()<\/code>pour d\u00e9senregistrer une cat\u00e9gorie de mod\u00e8le de bloc. Fournissez le slug de cat\u00e9gorie comme param\u00e8tre. Reportez-vous \u00e0 l&rsquo;aper\u00e7u des cat\u00e9gories de mod\u00e8les de blocs ci-dessus pour les cat\u00e9gories de base et leurs slugs.<\/p>\n<p>N&rsquo;oubliez pas que les cat\u00e9gories de mod\u00e8les de bloc sans aucun mod\u00e8le de bloc qui lui est attribu\u00e9 ne seront pas visibles dans l&rsquo;outil d&rsquo;insertion de bloc. Ainsi, si vous d\u00e9senregistrez tous les motifs de bloc affect\u00e9s \u00e0 une cat\u00e9gorie, la cat\u00e9gorie elle-m\u00eame ne sera plus visible et vous n&rsquo;aurez pas n\u00e9cessairement besoin de d\u00e9senregistrer la cat\u00e9gorie. Tous les motifs de bloc qui ne sont affect\u00e9s qu&rsquo;\u00e0 la cat\u00e9gorie que vous supprimez seront d\u00e9plac\u00e9s dans une cat\u00e9gorie &quot;Non cat\u00e9goris\u00e9&quot;.<\/p>\n<p>Voici un exemple de d\u00e9senregistrement de la cat\u00e9gorie \u00ab\u00a0boutons\u00a0\u00bb de mod\u00e8le de bloc principal\u00a0:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern_category')) {\n        return;\n    }\n    unregister_block_pattern_category('buttons');\n});<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>La nouvelle fonctionnalit\u00e9 de mod\u00e8le de bloc dans WordPress Gutenberg est d\u00e9finitivement un pas de plus vers le fait que l&rsquo;\u00e9diteur de blocs fonctionne davantage comme un constructeur de pages. \u00c0 mon avis, l&rsquo;inconv\u00e9nient est que les utilisateurs finaux ne peuvent pas cr\u00e9er leurs propres mod\u00e8les. Mais c&rsquo;est une bonne fonction pour les d\u00e9veloppeurs de th\u00e8mes car elle permet aux utilisateurs finaux de configurer facilement des configurations de blocs et des mises en page qui fonctionnent bien dans le th\u00e8me. Il s&rsquo;agit d&rsquo;une toute nouvelle fonctionnalit\u00e9 et elle \u00e9voluera et sera probablement am\u00e9lior\u00e9e dans un futur proche\u00a0! Pour ma part, j&rsquo;ai h\u00e2te !<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Regard d&rsquo;un d\u00e9veloppeur sur les mod\u00e8les de blocs de WordPress Gutenberg. Ce qu&rsquo;ils sont, \u00e0 quoi ils peuvent servir et un examen plus approfondi de la fa\u00e7on d&rsquo;\u00e9crire du code pour eux.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,936,936,1110,801,801,811,811,841,841,862,862],"tags":[1167],"class_list":["post-234205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","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\/234205","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=234205"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234205\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}