{"id":229049,"date":"2022-10-16T12:40:00","date_gmt":"2022-10-16T09:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229049"},"modified":"2022-11-09T05:20:18","modified_gmt":"2022-11-09T02:20:18","slug":"registra-un-modello-di-blocco-nelleditor-blocchi-di-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/registra-un-modello-di-blocco-nelleditor-blocchi-di-wordpress-gutenberg\/","title":{"rendered":"Registra un modello di blocco nell&#8217;editor blocchi di WordPress (Gutenberg)"},"content":{"rendered":"\n<p>I modelli di blocco nell&#8217;editor di blocchi di WordPress (Gutenberg) sono una potente funzionalit\u00e0 che ti consente di creare layout vari con il minimo sforzo.<\/p>\n<p>Usando <code>register_block_pattern<\/code>te puoi creare molto rapidamente uno schema di blocco per te o per i tuoi clienti.<\/p>\n<h2>Prerequisiti<\/h2>\n<ul>\n<li>Installazione WordPress<\/li>\n<li>Editor di codice<\/li>\n<\/ul>\n<h2>Crea il tuo modello di blocco<\/h2>\n<p>Costruisci modelli di blocchi dai blocchi che hai registrato sul tuo sito. Questi potrebbero essere blocchi principali o un numero qualsiasi di blocchi di terze parti o personalizzati.<\/p>\n<p>Inizia utilizzando l&#8217;editor di WordPress per creare un layout a blocchi. Puoi utilizzare le impostazioni per renderlo complesso o semplice come preferisci.<\/p>\n<p>In questo esempio lo terremo semplice e creeremo semplicemente uno schema a blocchi che \u00e8 strutturato come segue:<\/p>\n<ul>\n<li>Blocco di gruppo\n<ul>\n<li>Intestazione<\/li>\n<li>Paragrafo<\/li>\n<li>Colonne\n<ul>\n<li>Colonna 1\n<ul>\n<li>Intestazione<\/li>\n<li>Paragrafo<\/li>\n<\/ul>\n<\/li>\n<li>Colonna 2\n<ul>\n<li>Intestazione<\/li>\n<li>Paragrafo<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Una volta che hai creato il tuo schema di blocco, copia semplicemente il codice che \u00e8 stato generato per te.<\/p>\n<p>Copia il codice del modello di blocco<\/p>\n<p>Per fare ci\u00f2, vai ai tre punti in alto a destra dell&#8217;editor (etichettato Opzioni) e seleziona &quot;Editor di codice&quot;. Questo mostrer\u00e0 l&#8217;HTML dietro il pattern di blocco che hai appena creato.<\/p>\n<p>Copia questo codice negli appunti.<\/p>\n<h2>Registra il modello di blocco<\/h2>\n<p>Incolla questo codice dell&#8217;editor di blocchi nel tuo editor di codice. Se non sei sicuro di dove, puoi usare il <code>functions.php<\/code>del tuo tema.<\/p>\n<p>Assicurati di passarlo in una variabile inserendo virgolette singole (<code>'<\/code>) attorno al testo incollato, in questo modo:<\/p>\n<pre><code>$block_pattern_content = '\n&lt;div class=\"wp-block-group\"&gt;&lt;div class=\"wp-block-group__inner-container\"&gt;\n&lt;h2&gt;Example Block Pattern&lt;\/h2&gt;\n\n&lt;p&gt;Lorem ipsum dolor sit amet labore cras venenatis.&lt;\/p&gt;\n\n&lt;div class=\"wp-block-columns\"&gt;\n&lt;div class=\"wp-block-column\"&gt;\n&lt;h3&gt;Sub Heading 1&lt;\/h3&gt;\n\n&lt;p&gt;Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"wp-block-column\"&gt;\n&lt;h3&gt;Sub Heading 2&lt;\/h3&gt;\n\n&lt;p&gt;Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;&lt;\/div&gt;\n';\n<\/code><\/pre>\n<p>Potrebbe essere necessario eseguire un po &#8216;di escape dei personaggi, a seconda della complessit\u00e0 del tuo schema di blocco.<\/p>\n<p>Quindi dobbiamo passare questo nella <code>register_block_pattern<\/code>funzione:<\/p>\n<pre><code>register_block_pattern(\n    'wholesomecode\/example-block-pattern',\n    [\n        'categories'    =&gt; [\n            'text',\n        ],\n        'content'       =&gt; $block_pattern_content,\n        'description'   =&gt; 'An example block pattern',\n        'keywords'      =&gt; 'example',\n        'title'         =&gt; 'Example Block Pattern',\n        'viewportWidth' =&gt; 800,\n    ],\n);\n<\/code><\/pre>\n<p>Questo \u00e8 tutto, il modello di blocco \u00e8 registrato.<\/p>\n<h3>Abbattimento<code>register_block_pattern<\/code><\/h3>\n<ul>\n<li><strong>Namespace<\/strong> \u2014 (<code>wholesomecode\/example-block-pattern<\/code>) \u00e8 lo spazio dei nomi del pattern di blocco. Assicurati che questo sia univoco per il tuo modello di blocco. Se dovessimo annullare la registrazione del pattern di blocco, questa \u00e8 la stringa di cui avremo bisogno.<\/li>\n<li><strong>Categorie<\/strong> \u2014 Questa \u00e8 la categoria del modello di blocco in cui apparir\u00e0 il modello di blocco, quando inseriamo il nostro modello di blocco. Possiamo anche <a href=\"https:\/\/wholesomecode.ltd\/#custom-block-pattern-category\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiungere le nostre categorie<\/a>.<\/li>\n<li><strong>Contenuto<\/strong> \u2014 Questo \u00e8 l&#8217;HTML che genera il pattern di blocco. Questo esempio usa la variabile che abbiamo creato dall&#8217;editor.<\/li>\n<li><strong>Descrizione<\/strong> \u2014 Una descrizione del modello di blocco.<\/li>\n<li><strong>Parole chiave<\/strong>: parole chiave che possono essere utilizzate per cercare il modello di blocco.<\/li>\n<li><strong>Titolo<\/strong> \u2014 Il titolo del modello di blocco.<\/li>\n<li><strong>Larghezza<\/strong> finestra \u2014 La finestra del modello di blocco, utilizzata per l&#8217;area di anteprima.<\/li>\n<\/ul>\n<h2>Inserisci il modello di blocco<\/h2>\n<p>Per inserire lo schema di blocco, usa semplicemente il segno pi\u00f9 in alto a sinistra nell&#8217;editor e seleziona lo schema di blocco.<\/p>\n<p>Seleziona la categoria in cui hai registrato il tuo modello e dovrebbe apparire.<\/p>\n<p>Inserimento del motivo a blocchi<\/p>\n<p>In alternativa puoi cercare per parole chiave che hai registrato.<\/p>\n<p>Per registrare una categoria di blocco, basta usare la <code>register_block_pattern_category<\/code>funzione.<\/p>\n<pre><code>register_block_pattern_category(\n    'my-client',\n    [\n        'label' =&gt; esc_html__( 'My Client Patterns', 'wholesome-plugin' ),\n    ]\n);\n<\/code><\/pre>\n<p>Quindi puoi utilizzare la categoria che hai appena registrato nel codice del modello di blocco, in questo modo:<\/p>\n<pre><code>register_block_pattern(\n    'wholesomecode\/example-block-pattern',\n    [\n        'categories'    =&gt; [\n            'my-client',\n        ],\n        'content'       =&gt; $block_pattern_content,\n        'description'   =&gt; 'An example block pattern',\n        'keywords'      =&gt; 'example',\n        'title'         =&gt; 'Example Block Pattern',\n        'viewportWidth' =&gt; 800,\n    ],\n);\n<\/code><\/pre>\n<p>Ora quando arrivi a trovare il tuo modello di blocco, si trover\u00e0 nella tua categoria personalizzata:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168978-61e7f9e9b9076.png\" alt=\"Registra un modello di blocco nell&#039;editor blocchi di WordPress (Gutenberg)\" \/>Categoria modello blocco personalizzato<\/p>\n<p>Ora puoi raggruppare tutti i modelli di blocco personalizzati che hai appena creato per il tuo cliente insieme in un unico posto.<\/p>\n<ul>\n<li>Hai bisogno di qualcosa di pi\u00f9 statico? Prova invece <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<li>Hai bisogno di qualcosa che si applichi ai blocchi figlio? Prova <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a registrare un modello InnerBlocks<\/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>I modelli di blocco nell&#8217;editor di blocchi di WordPress (Gutenberg) sono una potente funzionalit\u00e0 che ti consente di creare layout vari con il minimo sforzo. Usando register_block_pattern puoi ver&#8230;<\/p>\n","protected":false},"author":1,"featured_media":220451,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,939,804,814,720,865],"tags":[1168],"class_list":["post-229049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-gutenberg-6","category-php-6","category-plugin-2","category-sviluppatore","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229049","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=229049"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229049\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/220451"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}