{"id":228667,"date":"2022-10-17T10:00:00","date_gmt":"2022-10-17T07:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228667"},"modified":"2022-11-09T03:40:29","modified_gmt":"2022-11-09T00:40:29","slug":"enregistrer-un-modele-de-bloc-pour-lediteur-de-blocs-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/enregistrer-un-modele-de-bloc-pour-lediteur-de-blocs-wordpress-gutenberg\/","title":{"rendered":"Enregistrer un mod\u00e8le de bloc pour l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Dans mon guide pr\u00e9c\u00e9dent, j&rsquo;ai explor\u00e9 <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la puissance des mod\u00e8les de blocs<\/a>. Les mod\u00e8les de blocs sont similaires, mais au lieu de compter sur votre client pour ins\u00e9rer des mod\u00e8les de blocs dans l&rsquo;\u00e9diteur, cela leur donne une mise en page compl\u00e8te d\u00e8s qu&rsquo;ils ins\u00e8rent un nouveau message.<\/p>\n<h2>Conditions pr\u00e9alables<\/h2>\n<ul>\n<li>Installer WordPress<\/li>\n<li>\u00c9diteur de codes<\/li>\n<\/ul>\n<h2>Cr\u00e9ez votre mod\u00e8le de bloc<\/h2>\n<p>Dans cet exemple, je vais ins\u00e9rer le m\u00eame <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">motif de bloc que j&rsquo;ai cr\u00e9\u00e9 dans mon guide pr\u00e9c\u00e9dent<\/a>, mais en tant que mod\u00e8le de bloc.<\/p>\n<p>Dans ce guide, nous avons copi\u00e9 le code HTML de la sortie de l&rsquo;\u00e9diteur. Dans ce guide, nous allons faire quelque chose de l\u00e9g\u00e8rement diff\u00e9rent et cr\u00e9er un tableau d&rsquo;espaces de noms de blocs, de propri\u00e9t\u00e9s et de contenu.<\/p>\n<p>Dans sa forme la plus simple, un mod\u00e8le de bloc ressemble un peu \u00e0 ceci\u00a0:<\/p>\n<pre><code>$block_template = [\n  [ 'core\/heading', [ 'level'   =&gt; 2, 'content' =&gt; 'Example Block Template' ] ],\n  [ 'core\/paragraph', [ 'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],\n];\n<\/code><\/pre>\n<p>Comme vous pouvez le voir, il s&rsquo;agit d&rsquo;un tableau contenant des blocs dans le mod\u00e8le suivant\u00a0:<\/p>\n<ul>\n<li>Espace de noms de bloc<\/li>\n<li>Attributs de bloc<\/li>\n<\/ul>\n<p>Cependant, nous voulons utiliser des blocs imbriqu\u00e9s, nous allons donc passer un troisi\u00e8me param\u00e8tre \u00e0 ce tableau de blocs, qui est les innerBlocks.<\/p>\n<p><strong>Vous voulez juste le placement du bloc\u00a0?<\/strong><\/p>\n<p>Notez que vous pouvez laisser les attributs vides, pour simplement fournir les blocs sans contenu d\u00e9fini.<\/p>\n<p>Le tableau pour cr\u00e9er le m\u00eame bloc que nous avons cr\u00e9\u00e9 dans le guide des mod\u00e8les de blocs, nous avons besoin d&rsquo;un tableau plus complexe, comme ceci\u00a0:<\/p>\n<pre><code>$block_template = [\n  [\n    'core\/group',\n    [],\n    [\n      [\n        'core\/heading',\n        [\n          'level'   =&gt; 2,\n          'content' =&gt; 'Example Block Template',\n        ]\n      ],\n      [\n        'core\/paragraph',\n        [\n          'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.',\n        ]\n      ],\n      [\n        'core\/columns',\n        [],\n        [\n          [\n            'core\/column',\n            [],\n            [\n              [\n                'core\/heading',\n                [\n                  'level'   =&gt; 3,\n                  'content' =&gt; 'Sub Heading 1',\n                ]\n              ],\n              [\n                'core\/paragraph',\n                [\n                  'content' =&gt; 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',\n                ]\n              ],\n            ]\n          ],\n          [\n            'core\/column',\n            [],\n            [\n              [\n                'core\/heading',\n                [\n                  'level'   =&gt; 3,\n                  'content' =&gt; 'Sub Heading 2',\n                ]\n              ],\n              [\n                'core\/paragraph',\n                [\n                  'content' =&gt; 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',\n                ]\n              ],\n            ]\n          ],\n        ],\n      ],\n    ]\n  ]\n];\n<\/code><\/pre>\n<h2>Enregistrez le mod\u00e8le de bloc<\/h2>\n<h3>Enregistrement d&rsquo;un mod\u00e8le de bloc pour un type de publication existant<\/h3>\n<p>Pour enregistrer un mod\u00e8le de bloc pour un type de publication existant (tel que le <code>post<\/code>type de publication), vous pouvez utiliser le code ci-dessous pour remplacer l&rsquo;objet de type de publication.<\/p>\n<pre><code>function register_block_template() {\n\n    $post_type_object                = get_post_type_object( 'post' );\n    $post_type_object-&gt;template      = $block_template;\n    $post_type_object-&gt;template_lock = 'all';\n}\nadd_action( 'init', 'register_block_template' );\n<\/code><\/pre>\n<p>Ce code d\u00e9finit simplement le mod\u00e8le et (\u00e9ventuellement) le <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>type.<\/p>\n<p>Le code complet ressemblerait \u00e0 ceci\u00a0:<\/p>\n<pre><code>function register_block_template() {\n    $block_template = [\n      [\n        'core\/group',\n        [],\n        [\n          [\n            'core\/heading',\n            [\n              'level'   =&gt; 2,\n              'content' =&gt; 'Example Block Template',\n            ]\n          ],\n          [\n            'core\/paragraph',\n            [\n              'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.',\n            ]\n          ],\n          [\n            'core\/columns',\n            [],\n            [\n              [\n                'core\/column',\n                [],\n                [\n                  [\n                    'core\/heading',\n                    [\n                      'level'   =&gt; 3,\n                      'content' =&gt; 'Sub Heading 1',\n                    ]\n                  ],\n                  [\n                    'core\/paragraph',\n                    [\n                      'content' =&gt; 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',\n                    ]\n                  ],\n                ]\n              ],\n              [\n                'core\/column',\n                [],\n                [\n                  [\n                    'core\/heading',\n                    [\n                      'level'   =&gt; 3,\n                      'content' =&gt; 'Sub Heading 2',\n                    ]\n                  ],\n                  [\n                    'core\/paragraph',\n                    [\n                      'content' =&gt; 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',\n                    ]\n                  ],\n                ]\n              ],\n            ],\n          ],\n        ]\n      ]\n    ];\n\n    $post_type_object                = get_post_type_object( 'post' );\n    $post_type_object-&gt;template      = $block_template;\n    $post_type_object-&gt;template_lock = 'all';\n}\nadd_action( 'init', 'register_block_template' );\n<\/code><\/pre>\n<h3>Enregistrement d&rsquo;un mod\u00e8le de bloc pour un nouveau type de publication<\/h3>\n<p>Si vous enregistrez un type de publication, vous pouvez passer le mod\u00e8le dans l&rsquo; <code>template<\/code>argument de <code>register_post_type<\/code>.<\/p>\n<p>Vous pouvez \u00e9galement passer l&rsquo; <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>argument dans <code>register_post_type<\/code>.<\/p>\n<h3>Verrouillage du mod\u00e8le<\/h3>\n<p>L&rsquo; <code>template_lock<\/code>argument peut faire plusieurs choses selon l&rsquo;argument qui lui est pass\u00e9. Ceux-ci sont r\u00e9pertori\u00e9s dans le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-templates\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide de d\u00e9veloppement Gutenberg<\/a> comme suit\u00a0:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 emp\u00eache toutes les op\u00e9rations. Il n&rsquo;est pas possible d&rsquo;ins\u00e9rer de nouveaux blocs, de d\u00e9placer des blocs existants ou de supprimer des blocs.<\/li>\n<li><code>insert<\/code>\u2014 emp\u00eache l&rsquo;insertion ou la suppression de blocs, mais permet de d\u00e9placer des blocs existants.<\/li>\n<\/ul>\n<p><strong>Le verrouillage du mod\u00e8le ne fonctionne pas sur les blocs imbriqu\u00e9s<\/strong><\/p>\n<p>Le verrouillage du mod\u00e8le ne fonctionne que sur les blocs de niveau sup\u00e9rieur. Utilisez ceci \u00e0 votre avantage en cr\u00e9ant une mise en page avec des en-t\u00eates fixes, des images, des paragraphes et une zone de groupe pour que votre client puisse ins\u00e9rer le contenu de son choix.<\/p>\n<p>Vous pouvez \u00e9galement <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cr\u00e9er un mod\u00e8le de bloc imbriqu\u00e9 personnalis\u00e9 avec InnerBlocks<\/a>.<\/p>\n<p>Vous pouvez \u00e9galement <a href=\"https:\/\/wholesomecode.ltd\/#allowed-block-types\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">limiter les blocs que vous \u00eates autoris\u00e9 \u00e0 ins\u00e9rer dans certains types de publication<\/a>.<\/p>\n<h2>Utiliser le mod\u00e8le de bloc<\/h2>\n<p>Pour utiliser le mod\u00e8le de bloc, cr\u00e9ez simplement un nouveau message (ou un type de message personnalis\u00e9 selon la fa\u00e7on dont vous avez configur\u00e9 les choses). Le mod\u00e8le sera ins\u00e9r\u00e9 et vous aurez maintenant des zones de contenu fixes sur votre page.<\/p>\n<p>L&rsquo;insertion d&rsquo;un message affiche le mod\u00e8le de bloc<\/p>\n<p>Vous pouvez limiter les blocs disponibles pour diff\u00e9rents types de publications \u00e0 l&rsquo;aide du code suivant.<\/p>\n<pre><code>function filter_allowed_block_types( $allowed_block_types, $post) {\n\n  if ($post-&gt;post_type !== 'post') {\n    return $allowed_block_types;\n  }\n\n  $allowed_block_types = [\n    'core\/column',\n    'core\/columns',\n    'core\/group',\n    'core\/heading',\n    'core\/paragraph',\n  ];\n\n  return $allowed_block_types;\n}\nadd_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );\n<\/code><\/pre>\n<p>Le code ci-dessus limite les blocs autoris\u00e9s dans le <code>post<\/code>type de publication \u00e0 ce qui suit\u00a0:<\/p>\n<ul>\n<li>\n<p>Colonne (<code>core\/column<\/code>)<\/p>\n<\/li>\n<li>\n<p>Colonnes (<code>core\/column<\/code>s)<\/p>\n<\/li>\n<li>\n<p>Groupe (<code>core\/group<\/code>)<\/p>\n<\/li>\n<li>\n<p>Titre (<code>core\/heading<\/code>)<\/p>\n<\/li>\n<li>\n<p>Paragraphe (<code>core\/paragraph<\/code>)<\/p>\n<\/li>\n<li>\n<p>Besoin de quelque chose de plus flexible? Essayez <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d&rsquo;enregistrer un mod\u00e8le de bloc<\/a> \u00e0 la place<\/p>\n<\/li>\n<li>\n<p>Besoin de quelque chose qui s&rsquo;applique aux blocs enfants\u00a0? Essayez <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d&rsquo;enregistrer un mod\u00e8le InnerBlocks<\/a><\/p>\n<\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans mon guide pr\u00e9c\u00e9dent, j&rsquo;ai explor\u00e9 la puissance des mod\u00e8les de blocs. Les mod\u00e8les de blocs sont similaires, mais au lieu de compter sur votre client pour ins\u00e9rer des mod\u00e8les de blocs dans l&rsquo;\u00e9diteur, cela donne t &#8230;<\/p>\n","protected":false},"author":1,"featured_media":223608,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,925,862],"tags":[1167],"class_list":["post-228667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-sujets","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228667","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=228667"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228667\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}