{"id":233401,"date":"2023-02-12T16:44:00","date_gmt":"2023-02-12T13:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233401"},"modified":"2022-11-10T23:29:45","modified_gmt":"2022-11-10T20:29:45","slug":"pattern-a-blocchi-di-gutenberg-uno-sguardo-da-sviluppatore","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/pattern-a-blocchi-di-gutenberg-uno-sguardo-da-sviluppatore\/","title":{"rendered":"Pattern a blocchi di Gutenberg: uno sguardo da sviluppatore"},"content":{"rendered":"\n<p>Uno sguardo ai nuovi modelli di blocco di WordPress Gutenberg, negli occhi di uno sviluppatore. Esamineremo cosa sono, per cosa possono essere utilizzati e uno sguardo pi\u00f9 approfondito su come scrivere codice per loro.<\/p>\n<h2>Schemi di blocco e loro utilizzo<\/h2>\n<p>I modelli di blocco sono stati introdotti in WordPress 5.5 (11 agosto 2020). Sono una nuova funzionalit\u00e0 nell&#8217;inseritore di blocchi per inserire pi\u00f9 facilmente una configurazione predefinita di pi\u00f9 blocchi. Gli sviluppatori di temi o plugin possono definire un gruppo di blocchi, come sono nidificati, il loro contenuto e i loro attributi e gli utenti finali possono inserirlo con una semplice operazione con un clic. L&#8217;idea \u00e8 che gli utenti finali non debbano pi\u00f9 creare manualmente layout complessi e tutte le loro impostazioni personalizzate e nidificarli in contenitori adeguati per i blocchi che usano spesso.<\/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=\"Pattern a blocchi di Gutenberg: uno sguardo da sviluppatore\" ><\/a><\/p>\n<p>Una volta che un modello di blocco \u00e8 stato aggiunto all&#8217;editor, i blocchi non sanno di essere stati aggiunti tramite un modello di blocco. Vengono aggiunti come normali blocchi che consentono agli utenti di modificare il contenuto e le impostazioni. \u00c8 fondamentalmente una scorciatoia per aggiungere una configurazione di pi\u00f9 blocchi.<\/p>\n<p>L&#8217;idea \u00e8 buona! Non tutti gli utenti finali si sentono a proprio agio nel creare una grande struttura di blocchi nidificati nell&#8217;editor per farlo sembrare perfetto. Tuttavia, finora questa funzionalit\u00e0 \u00e8 principalmente un vantaggio per gli sviluppatori poich\u00e9 gli utenti finali non possono creare i propri modelli. Per i blocchi personalizzati degli utenti devono attenersi all&#8217;utilizzo di blocchi riutilizzabili. Ma soprattutto per gli sviluppatori di temi, i modelli di blocco consentono loro di mostrare veramente agli utenti finali la migliore configurazione di blocchi che funziona bene nel tema.<\/p>\n<p>WordPress ha aggiunto un nuovo supporto per i temi per i modelli di blocco: <code>'core-block-patterns'<\/code>. Core dalla 5.5.0 eseguir\u00e0 automaticamente un <code>add_theme_support('core-block-patterns')<\/code>quindi non \u00e8 necessario farlo nel tuo tema.<\/p>\n<p>Poich\u00e9 tutte le funzioni del pattern di blocco esistono solo in una versione molto nuova di WordPress, \u00e8 una buona idea verificarne prima l&#8217;esistenza, in modo da non interrompere i siti con versioni precedenti di WordPress. In tutti gli esempi di codice seguenti ho fatto proprio questo.<\/p>\n<p>WordPress 5.5 viene fornito con 9 modelli di blocco predefiniti (vedi elenco di seguito). I modelli a blocchi vengono visualizzati in categorie di modelli (il core aggiunge 5 categorie). Le categorie di pattern a blocchi funzionano come le categorie di post; puoi inserire uno schema di blocco in pi\u00f9 categorie. Gli sviluppatori di temi e plug-in possono registrare i propri modelli di blocco e le categorie di modelli di blocco, nonch\u00e9 annullare la registrazione di quelli nel core. Quindi diamo un&#8217;occhiata pi\u00f9 da vicino a come!<\/p>\n<h2>Modelli di blocco e categorie di modelli di blocco inclusi in WordPress 5.5<\/h2>\n<p>I modelli di blocco forniti in WordPress 5.5 sono i seguenti (lo spazio dei nomi e l&#8217;ID slug di ciascun modello sono visualizzati tra parentesi):<\/p>\n<ul>\n<li>Due pulsanti (&#8216; <code>core\/two-buttons<\/code>&#8216;)<\/li>\n<li>Tre pulsanti (&#8216; <code>core\/three-buttons<\/code>&#8216;)<\/li>\n<li>Due colonne di testo (&#8216; <code>core\/text-two-columns<\/code>&#8216;)<\/li>\n<li>Due colonne di testo con immagini (&#8216; <code>core\/text-two-columns-with-images<\/code>&#8216;)<\/li>\n<li>Tre colonne di testo con pulsanti (&#8216; <code>core\/text-three-columns-buttons<\/code>&#8216;)<\/li>\n<li>Due immagini affiancate (&#8216; <code>core\/two-images<\/code>&#8216;)<\/li>\n<li>Intestazione grande con un&#8217;intestazione (&#8216; <code>core\/large-header<\/code>&#8216;)<\/li>\n<li>Intestazione grande con un&#8217;intestazione e un pulsante (&#8216; <code>core\/large-header-button<\/code>&#8216;)<\/li>\n<li>Citazione (&#8216; <code>core\/quote<\/code>&#8216;)<\/li>\n<\/ul>\n<p>Le categorie aggiunte in WordPress 5.5 sono (i loro ID slug sono visualizzati tra parentesi):<\/p>\n<ul>\n<li>Pulsanti (&#8216; <code>buttons<\/code>&#8216;)<\/li>\n<li>Colonne (&#8216; <code>columns<\/code>&#8216;)<\/li>\n<li>Galleria (&#8216; <code>gallery<\/code>&#8216;)<\/li>\n<li>Intestazioni (&#8216; <code>header<\/code>&#8216; \u2013 nota no &#8216;s&#8217; alla fine)<\/li>\n<li>Testo (&#8216; <code>text<\/code>&#8216;)<\/li>\n<\/ul>\n<h2>Annullamento della registrazione dei modelli di blocco<\/h2>\n<p>\u00c8 possibile annullare la registrazione dei modelli di blocco utilizzando la funzione <code>[unregister_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern)()<\/code>. Fornisci semplicemente una stringa con il pattern di blocco da rimuovere come parametro. Fare riferimento alla panoramica sopra per i modelli di blocchi principali. Esegui questa funzione all&#8217;interno di una funzione agganciata <code>init<\/code>all&#8217;azione.<\/p>\n<p>Un esempio di annullamento della registrazione dei modelli di blocco principale &quot;Due pulsanti&quot; e &quot;Tre pulsanti&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>Registrazione dei modelli di blocco<\/h2>\n<p>La registrazione di un nuovo modello di blocco viene eseguita utilizzando la funzione <code>[register_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern)()<\/code>. Accetta due parametri; il primo \u00e8 una stringa di un nome univoco per il tuo modello incluso lo spazio dei nomi. Il secondo \u00e8 una serie di impostazioni per il tuo schema di blocco.<\/p>\n<p><strong>Suggerimento<\/strong>: per definire un pattern di blocco \u00e8 necessario fornire contenuto HTML grezzo per la configurazione del blocco. Non consiglio di digitarlo manualmente poich\u00e9 ci\u00f2 causer\u00e0 facilmente conflitti di blocco non validi. Invece vai nell&#8217;editor e imposta i blocchi come desideri averli nel tuo modello. Quindi fai clic sul &quot;menu punti&quot; nella barra degli strumenti del blocco genitori e fai clic su &quot;Copia&quot;. Dopodich\u00e9 puoi tornare al tuo editor di codice e incollare (Ctrl+V). Questo ti d\u00e0 l&#8217;HTML grezzo per la configurazione che hai copiato. Usa la funzionalit\u00e0 dell&#8217;editor di codice per sostituire tutte le nuove righe <code>n<\/code>e assicurati di evitare le virgolette correttamente.<\/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=\"Pattern a blocchi di Gutenberg: uno sguardo da sviluppatore\" ><\/a><\/p>\n<p>Le propriet\u00e0 del modello di blocco sono le seguenti (secondo array di argomenti):<\/p>\n<ul>\n<li><strong><code>title<\/code><\/strong>(richiesto): il nome visualizzabile del modello di blocco<\/li>\n<li><code>**content**<\/code>(richiesto): HTML RAW della configurazione del blocco<\/li>\n<li><strong><code>description<\/code><\/strong>: Descrizione per il tuo schema di blocco. \u00c8 visivamente nascosto<\/li>\n<li><strong><code>categories<\/code><\/strong>: Una serie di categorie in cui aggiungere questo schema di blocco. Se non si fornisce questa propriet\u00e0, il blocco verr\u00e0 inserito in una categoria di modello di blocco &quot;Non categorizzato&quot;.<\/li>\n<li><strong><code>keywords<\/code><\/strong>: una serie di parole chiave che possono aiutare gli utenti a trovare il tuo modello durante la ricerca<\/li>\n<li><strong><code>viewportWidth<\/code><\/strong>: fornisce un numero intero della larghezza del modello di blocco nell&#8217;inseritore. Influisce solo sull&#8217;anteprima nell&#8217;inseritore.<\/li>\n<\/ul>\n<p>Ecco un esempio di registrazione di un modello di blocco costituito da un blocco di copertina a larghezza intera con un colore di sfondo, che contiene un blocco di intestazione allineato al centro con un colore di testo specifico e un paragrafo allineato al centro di un colore di testo specifico:<\/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>Registrazione delle categorie di pattern di blocco<\/h2>\n<p>Gli sviluppatori possono anche registrare categorie di modelli di blocchi personalizzati. Questo viene fatto con la funzione <code>[register_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern_category)()<\/code>. Accetta due parametri; prima una stringa della categoria slug e poi un array di propriet\u00e0. Al momento solo una propriet\u00e0 \u00e8 supportata nel secondo argomento; <code>label<\/code>per il nome leggibile della categoria.<\/p>\n<p>Di seguito \u00e8 riportato un esempio di registrazione di una categoria di pattern di blocco personalizzato:<\/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>Con questo puoi aggiungere &#8216;awp-patterns&#8217; <code>categories<\/code>all&#8217;argomento &#8216; &#8216; in <code>register_block_pattern()<\/code>. Tieni presente che se una categoria non ha schemi di blocco registrati, la categoria non verr\u00e0 visualizzata nell&#8217;inseritore di blocchi. Dovrai aggiungere almeno un modello di blocco in questa categoria per farlo apparire.<\/p>\n<h2>Annullamento della registrazione delle categorie di pattern di blocco<\/h2>\n<p>Infine c&#8217;\u00e8 una funzione <code>[unregister_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern_category)()<\/code>per annullare la registrazione di una categoria di pattern di blocco. Fornisci la categoria slug come parametro. Fare riferimento alla panoramica delle categorie di pattern di blocco sopra per le categorie principali e i loro slug.<\/p>\n<p>Non dimenticare che le categorie di schemi di blocco senza schemi di blocco assegnati non saranno visibili nell&#8217;inseritore di blocchi. Quindi, se annulli la registrazione di tutti i modelli di blocco assegnati a una categoria, la categoria stessa non sar\u00e0 pi\u00f9 visibile e non \u00e8 necessario annullare la registrazione della categoria. Tutti i modelli di blocco assegnati solo alla categoria che stai rimuovendo verranno spostati in una categoria &quot;Non categorizzata&quot;.<\/p>\n<p>Ecco un esempio di annullamento della registrazione della categoria &quot;pulsanti&quot; del modello di blocco principale:<\/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>Conclusione<\/h2>\n<p>La nuova funzionalit\u00e0 del modello di blocco in WordPress Gutenberg \u00e8 sicuramente un passo avanti per far funzionare l&#8217;editor di blocchi pi\u00f9 come un generatore di pagine. A mio parere, lo svantaggio \u00e8 che gli utenti finali non possono creare i propri modelli. Ma \u00e8 una buona funzione per gli sviluppatori di temi in quanto consente agli utenti finali di impostare facilmente configurazioni di blocchi e layout che funzionano bene nel tema. Questa \u00e8 una funzionalit\u00e0 nuova di zecca e probabilmente si evolver\u00e0 e sar\u00e0 migliorata nel prossimo futuro! Io per primo, non vedo l&#8217;ora!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uno sguardo di uno sviluppatore sui modelli di blocco di WordPress Gutenberg. Cosa sono, a cosa servono e uno sguardo pi\u00f9 approfondito su come scrivere codice per loro.<\/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":[896,896,720,939,939,1110,804,804,814,814,720,844,844,865,865],"tags":[1168],"class_list":["post-233401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-gutenberg-6","category-n-a","category-php-6","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233401","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=233401"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}