{"id":229077,"date":"2022-10-17T14:38:00","date_gmt":"2022-10-17T11:38:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229077"},"modified":"2022-11-09T05:27:25","modified_gmt":"2022-11-09T02:27:25","slug":"utilizzo-di-un-modello-con-innerblocks-nelleditor-blocchi-di-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/utilizzo-di-un-modello-con-innerblocks-nelleditor-blocchi-di-wordpress-gutenberg\/","title":{"rendered":"Utilizzo di un modello con InnerBlocks nell&#8217;editor blocchi di WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Quando crei un blocco nell&#8217;editor blocchi di WordPress (Gutenberg) puoi creare un&#8217;area che consente di annidare altri tipi di blocchi all&#8217;interno del tuo blocco. Lo fai con il <code>InnerBlocks<\/code>componente.<\/p>\n<p>Nelle nostre altre guide abbiamo precedentemente esplorato modelli di blocchi e <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modelli di<\/a> <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blocchi<\/a>. Questa guida esamina la creazione di un modello per i blocchi nidificati.<\/p>\n<h2>Prerequisiti<\/h2>\n<ul>\n<li>Familiarizzare con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creazione di plugin per WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Crea un plug-in di blocchi nidificati<\/h2>\n<p>Dopo aver eseguito i passaggi nell&#8217;esercitazione sulla <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creazione di un plug-in Gutenberg<\/a>, fino al <strong>passaggio 5<\/strong> (ma non incluso), dovresti avere il framework in atto per creare il plug-in del blocco nidificato.<\/p>\n<h3>Aggiungi InnerBlocks a<code>\/src\/edit.js<\/code><\/h3>\n<p>Apri <code>\/src\/edit.js<\/code>nel tuo editor e sostituisci l&#8217;importazione per <code>useBlockProps<\/code>con quanto segue:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Questo ci consentir\u00e0 di utilizzare il componente InnerBlocks nel nostro metodo di rendering di modifica.<\/p>\n<p>Quindi cambia l&#8217;intera funzione Modifica come segue:<\/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>Questo registra l&#8217;InnerBlock<\/p>\n<h3>Emetti gli attributi in<code>\/src\/save.js<\/code><\/h3>\n<p>Apri <code>\/src\/save.js<\/code>nel tuo editor e sostituisci l&#8217;importazione per <code>useBlockProps<\/code>con quanto segue:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Questo ci consentir\u00e0 di utilizzare il componente InnerBlocks nel nostro metodo di salvataggio del rendering.<\/p>\n<p>Quindi emetti il \u200b\u200bcontenuto del componente Innerblocks sostituendo la <code>save<\/code>funzione con la seguente:<\/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>Questo semplicemente restituisce il valore di InnerBlocks in un file <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Compilazione del plugin<\/h3>\n<p>Apri il terminale, assicurati di essere nella directory principale del tuo plugin ed esegui il seguente comando:<\/p>\n<p>Lo script verr\u00e0 compilato. In caso di errori, il terminale dovrebbe informarti di cosa sono.<\/p>\n<h2>Aggiunta del modello InnerBlocks<\/h2>\n<p>Per semplificare le cose, utilizzeremo lo stesso identico modello che abbiamo creato in precedenza per i <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modelli di blocco<\/a> e la guida del <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modello<\/a> di blocco .<\/p>\n<p>Il modello \u00e8 molto simile a quello che abbiamo definito nella nostra <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida ai modelli di blocco<\/a>, tuttavia gli attributi si trovano in un oggetto anzich\u00e9 in un array multidimensionale.<\/p>\n<p>Sostituisci la <code>Edit<\/code>funzione con il seguente codice:<\/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>Questo crea un modello per il blocco nidificato. Nota il <code>templateLock<\/code>cui utilizzo \u00e8 impostato su tutti. Questo si comporta come il <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blocco del modello per il modello di blocco<\/a> e ha le due opzioni seguenti:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 impedisce tutte le operazioni. Non \u00e8 possibile inserire nuovi blocchi, spostare blocchi esistenti o eliminare blocchi.<\/li>\n<li><code>insert<\/code>\u2014 impedisce l&#8217;inserimento o la rimozione di blocchi, ma consente di spostare i blocchi esistenti.<\/li>\n<\/ul>\n<p>\u00c8 inoltre possibile <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">definire quali blocchi sono consentiti all&#8217;interno dei blocchi nidificati<\/a>.<\/p>\n<ol>\n<li>Inserimento e visualizzazione del modello InnerBlocks<\/li>\n<\/ol>\n<hr \/>\n<p>Puoi inserire il blocco nidificato allo stesso modo di qualsiasi altro blocco, facendo clic sull&#8217;icona pi\u00f9 e cercando <code>Wholesome Plugin<\/code>.<\/p>\n<p>Inserimento del modello di blocco annidato<\/p>\n<p>Si noti che, come in precedenza, ai blocchi nidificati all&#8217;interno dei blocchi nidificati non \u00e8 applicato il blocco del modello.<\/p>\n<p>Ovviamente ci sono soluzioni alternative per questo, essendo creativo nel modo in cui crei una combinazione di modelli di blocchi e blocchi nidificati personalizzati.<\/p>\n<h3>Visualizzazione del blocco<\/h3>\n<p>Dopo un po&#8217; di armeggiare con l&#8217;SCSS, il nostro blocco emesso ha un aspetto simile a questo:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Utilizzo di un modello con InnerBlocks nell&#039;editor blocchi di WordPress (Gutenberg)\" \/>Inserimento del modello di blocco annidato<\/p>\n<p>Invece di bloccare il modello, puoi invece limitarlo affermando quali blocchi puoi inserirvi. Sostituisci semplicemente la <code>Edit<\/code>funzione con il seguente codice:<\/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>Qui omettiamo l&#8217; <code>templateLock<\/code>argomento e restringiamo invece il nostro blocco nidificato ai seguenti blocchi:<\/p>\n<ul>\n<li>Colonna (<code>core\/column<\/code>)<\/li>\n<li>Colonne (<code>core\/column<\/code>s)<\/li>\n<li>Gruppo (<code>core\/group<\/code>)<\/li>\n<li>Intestazione (<code>core\/heading<\/code>)<\/li>\n<li>Paragrafo (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>Ancora una volta, questo non funzioner\u00e0 su nessun blocco nidificato all&#8217;interno del modello.<\/p>\n<ul>\n<li>Hai bisogno di qualcosa di pi\u00f9 flessibile? Prova invece <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a registrare un pattern di blocco<\/a><\/li>\n<li>Hai bisogno di qualcosa di pi\u00f9 statico? Prova <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a registrare un modello di blocco<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando crei un blocco nell&#8217;editor blocchi di WordPress (Gutenberg) puoi creare un&#8217;area che consente di annidare altri tipi di blocchi all&#8217;interno del tuo blocco. Lo fai con 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":[918,939,814,720,844,865],"tags":[1168],"class_list":["post-229077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-gutenberg-6","category-plugin-2","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=229077"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}