{"id":228672,"date":"2022-10-17T14:32:00","date_gmt":"2022-10-17T11:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228672"},"modified":"2022-11-09T03:43:04","modified_gmt":"2022-11-09T00:43:04","slug":"utilisation-dun-modele-avec-innerblocks-dans-lediteur-de-blocs-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/utilisation-dun-modele-avec-innerblocks-dans-lediteur-de-blocs-wordpress-gutenberg\/","title":{"rendered":"Utilisation d&rsquo;un mod\u00e8le avec InnerBlocks dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Lorsque vous cr\u00e9ez un bloc dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg), vous pouvez cr\u00e9er une zone qui permet d&rsquo;imbriquer d&rsquo;autres types de blocs dans votre bloc. Vous faites cela avec le <code>InnerBlocks<\/code>composant.<\/p>\n<p>Dans nos autres guides, nous avons pr\u00e9c\u00e9demment explor\u00e9 <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">les mod\u00e8les<\/a> de blocs et <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">les mod\u00e8les de blocs<\/a>. Ce guide examine la cr\u00e9ation d&rsquo;un mod\u00e8le pour les blocs imbriqu\u00e9s.<\/p>\n<h2>Conditions pr\u00e9alables<\/h2>\n<ul>\n<li>Se familiariser avec <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la cr\u00e9ation de plugins pour WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Cr\u00e9er un plugin de bloc imbriqu\u00e9<\/h2>\n<p>Apr\u00e8s avoir suivi les \u00e9tapes du didacticiel de <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cr\u00e9ation d&rsquo;un plugin Gutenberg<\/a>, jusqu&rsquo;\u00e0 (mais non compris) <strong>l&rsquo;\u00e9tape 5<\/strong>, vous devriez avoir le cadre en place pour cr\u00e9er le plugin de bloc imbriqu\u00e9.<\/p>\n<h3>Ajouter des blocs internes \u00e0<code>\/src\/edit.js<\/code><\/h3>\n<p>Ouvrez <code>\/src\/edit.js<\/code>dans votre \u00e9diteur et remplacez l&rsquo;importation pour <code>useBlockProps<\/code>par ce qui suit\u00a0:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Cela nous permettra d&rsquo;utiliser le composant InnerBlocks dans notre m\u00e9thode de rendu d&rsquo;\u00e9dition.<\/p>\n<p>Modifiez ensuite toute la fonction d&rsquo;\u00e9dition comme suit\u00a0:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Ceci enregistre l&rsquo;InnerBlock<\/p>\n<h3>Sortez les attributs dans<code>\/src\/save.js<\/code><\/h3>\n<p>Ouvrez <code>\/src\/save.js<\/code>dans votre \u00e9diteur et remplacez l&rsquo;importation pour <code>useBlockProps<\/code>par ce qui suit\u00a0:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Cela nous permettra d&rsquo;utiliser le composant InnerBlocks dans notre m\u00e9thode de rendu de sauvegarde.<\/p>\n<p>G\u00e9n\u00e9rez ensuite le contenu du composant Innerblocks en rempla\u00e7ant la <code>save<\/code>fonction par ce qui suit\u00a0:<\/p>\n<pre><code>export default function save() {\n    return (&lt;div { ...useBlockProps.save() }&gt;\n            &lt;InnerBlocks.Content \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Cela g\u00e9n\u00e8re simplement la valeur des InnerBlocks dans un fichier <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Compilation du plugin<\/h3>\n<p>Ouvrez le terminal, assurez-vous d&rsquo;\u00eatre dans le r\u00e9pertoire racine de votre plugin et lancez la commande suivante :<\/p>\n<p>Le script compilera. Si vous avez des erreurs, le terminal devrait vous en informer.<\/p>\n<h2>Ajout du mod\u00e8le InnerBlocks<\/h2>\n<p>Pour garder les choses simples, nous allons utiliser exactement le m\u00eame mod\u00e8le que nous avons cr\u00e9\u00e9 pr\u00e9c\u00e9demment pour les <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mod\u00e8les de blocs<\/a> et le guide des <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mod\u00e8les de blocs .<\/a><\/p>\n<p>Le mod\u00e8le est tr\u00e8s similaire \u00e0 celui que nous avons d\u00e9fini dans notre <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide de mod\u00e8le de bloc<\/a>, mais les attributs sont dans un objet au lieu d&rsquo;un tableau multidimensionnel.<\/p>\n<p>Remplacez la <code>Edit<\/code>fonction par le code suivant\u00a0:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\n                template={ [\n                    [ 'core\/heading', { level: 2, content: 'Example Nested Block Template' } ],\n                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],\n                    [ 'core\/columns', {},\n                        [\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 1' } ],\n                                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],\n                                ]\n                            ],\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 2' } ],\n                                    [ 'core\/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],\n                                ]\n                            ],\n                        ]\n                    ],\n                ] }\n                templateLock=\"all\"\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Cela cr\u00e9e un mod\u00e8le pour le bloc imbriqu\u00e9. Notez <code>templateLock<\/code>dont l&rsquo;utilisation est d\u00e9finie sur tous. Cela se comporte de la m\u00eame mani\u00e8re que le <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">verrou de mod\u00e8le pour le mod\u00e8le de bloc<\/a> et a les deux options suivantes\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>Vous pouvez \u00e9galement <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d\u00e9finir quels blocs sont autoris\u00e9s dans les blocs imbriqu\u00e9s<\/a>.<\/p>\n<ol>\n<li>Insertion et affichage du mod\u00e8le InnerBlocks<\/li>\n<\/ol>\n<hr \/>\n<p>Vous pouvez ins\u00e9rer le bloc imbriqu\u00e9 de la m\u00eame mani\u00e8re que n&rsquo;importe quel autre bloc, en cliquant sur l&rsquo;ic\u00f4ne plus et en recherchant <code>Wholesome Plugin<\/code>.<\/p>\n<p>Insertion du mod\u00e8le de bloc imbriqu\u00e9<\/p>\n<p>Notez que comme pr\u00e9c\u00e9demment, les blocs imbriqu\u00e9s \u00e0 l&rsquo;int\u00e9rieur des blocs imbriqu\u00e9s ne sont pas dot\u00e9s du verrou de mod\u00e8le.<\/p>\n<p>Il existe bien s\u00fbr des solutions de contournement pour cela, en \u00e9tant cr\u00e9atif avec la fa\u00e7on dont vous cr\u00e9ez une combinaison de mod\u00e8les de blocs et de blocs imbriqu\u00e9s personnalis\u00e9s.<\/p>\n<h3>Affichage du bloc<\/h3>\n<p>Apr\u00e8s un peu de bricolage avec le SCSS, notre bloc sorti ressemble un peu \u00e0 ceci\u00a0:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Utilisation d&#039;un mod\u00e8le avec InnerBlocks dans l&#039;\u00e9diteur de blocs WordPress (Gutenberg)\" \/>Insertion du mod\u00e8le de bloc imbriqu\u00e9<\/p>\n<p>Au lieu de verrouiller le mod\u00e8le, vous pouvez le restreindre en indiquant les blocs que vous \u00eates autoris\u00e9 \u00e0 y ins\u00e9rer. Remplacez simplement la <code>Edit<\/code>fonction par le code suivant\u00a0:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\n                template={ [\n                    [ 'core\/heading', { level: 2, content: 'Example Nested Block Template' } ],\n                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],\n                    [ 'core\/columns', {},\n                        [\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 1' } ],\n                                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],\n                                ]\n                            ],\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 2' } ],\n                                    [ 'core\/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],\n                                ]\n                            ],\n                        ]\n                    ],\n                ] }\n                allowedBlocks={ [\n                    'core\/column',\n                    'core\/columns',\n                    'core\/heading',\n                    'core\/paragraph',\n                ] }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Ici, nous omettons l&rsquo; <code>templateLock<\/code>argument et restreignons notre bloc imbriqu\u00e9 aux blocs suivants\u00a0:<\/p>\n<ul>\n<li>Colonne (<code>core\/column<\/code>)<\/li>\n<li>Colonnes (<code>core\/column<\/code>s)<\/li>\n<li>Groupe (<code>core\/group<\/code>)<\/li>\n<li>Titre (<code>core\/heading<\/code>)<\/li>\n<li>Paragraphe (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>Encore une fois, cela ne fonctionnera sur aucun bloc imbriqu\u00e9 dans le mod\u00e8le.<\/p>\n<ul>\n<li>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<\/li>\n<li>Besoin de quelque chose de plus statique? Essayez <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d&rsquo;enregistrer un mod\u00e8le de bloc<\/a><\/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>Lorsque vous cr\u00e9ez un bloc dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg), vous pouvez cr\u00e9er une zone qui permet d&rsquo;imbriquer d&rsquo;autres types de blocs dans votre bloc. Vous faites cela avec l&rsquo;InnerBlo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,936,811,841,862],"tags":[1167],"class_list":["post-228672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-gutenberg-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\/228672","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=228672"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228672\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}