La guida completa ai modelli a blocchi di Gutenberg (II)

Questo post è la seconda parte della Guida completa sui modelli a blocchi di Gutenberg, che include i seguenti punti:

1. Introduzione ai modelli a blocchi
2. Inserisci un motivo su una pagina
3. Modelli predefiniti e altri disponibili nelle directory
4. Aggiungi modelli disponibili nelle directory del tuo sito
5. Come creare un modello da zero
6. Come creare un pattern se non sei uno sviluppatore
7. Come convertire blocchi riutilizzabili in schemi di blocco
8. Argomenti che utilizzano schemi a blocchi
9. Documentazione ufficiale.

Nella prima parte abbiamo visto i primi 4 punti di tutti gli argomenti trattati nella guida: cos'è un pattern a blocchi, come inserire pattern predefiniti nelle tue pagine, e dove trovare e come copiare pattern che sono disponibili in alcuni directory. Lì abbiamo visto che possiamo incollare un modello sulla pagina che stiamo modificando, ma non verrà memorizzato nella nostra libreria di modelli per un uso futuro.

Se vogliamo aggiungere un nuovo pattern alla nostra libreria di pattern Gutenberg, dobbiamo creare e registrare detto pattern. È piuttosto semplice, anche se hai bisogno di alcune abilità di codifica di base. Se questo non è il tuo caso, non preoccuparti, poiché in seguito impareremo come ottenere lo stesso risultato senza richiedere alcuna codifica.

5. Crea un nuovo modello

Per creare un modello di blocco è necessario utilizzare l'API del modello di blocco. In particolare, la funzione PHP register_block_pattern() . Vediamo brevemente i diversi passaggi che dobbiamo seguire con un semplice esempio.

Ma prima di iniziare, permettetemi di aggiungere una nota a margine. Quando personalizzi WordPress utilizzando frammenti di codice, dovresti sempre chiederti dove dovresti scrivere detto snippet. La maggior parte dei tutorial consiglia il file functions.php del tuo tema attivo, poiché è la soluzione più semplice per portare a termine il lavoro, ma David ha scritto questo post su come creare un plug-in per tenere traccia di tutte le tue personalizzazioni e ha affermato che questa era una soluzione migliore .

Ora, che dire dei modelli a blocchi? Puoi aggiungere la definizione di un nuovo modello di blocco nel tuo tema (alcuni temi, come Twenty Twenty-One, includono già il proprio) oppure puoi aggiungerlo in un plug-in personalizzato. Sono sicuro che troverai difensori e detrattori di entrambe le soluzioni, quindi scegli quella più adatta alle tue esigenze.

# 1 Progetta i blocchi che formeranno il tuo modello

Come ho già detto nel post precedente, un pattern è un insieme di blocchi raggruppati a piacere. Supponiamo di voler creare un modello di blocchi che posso utilizzare per creare una sezione che descrive le caratteristiche di base di un prodotto.

Per fare ciò, in una pagina che ho intitolato "Creating a Pattern", inizio creando un cartiglio, "Sezione 6 funzioni", e quindi inserisco un blocco a 3 colonne.

Nel primo blocco aggiungo un'immagine e, sotto, il titolo e la descrizione della caratteristica.

Copio l'immagine, il titolo e la descrizione nei prossimi due blocchi. E infine, duplico questa riga in modo da avere una sezione che includerà la descrizione delle sei funzionalità.

Ovviamente, ha senso creare uno schema a blocchi solo se pensi di usarlo più di una volta.

# 2 Copia il contenuto dei blocchi

Una volta definito l'insieme dei blocchi, non ci resta che selezionarli con il mouse e nella barra degli strumenti cliccare su Copia .

# 3 Esci dal contenuto HTML copiato

Per evitare problemi, è necessario eseguire l'escape del testo appena copiato, in modo che caratteri speciali come interruzioni di riga, caratteri di tabulazione e così via possano essere compresi dal computer. Puoi facilmente eseguire l'escape di un testo utilizzando strumenti online come onlinestringtools.com o JSON Escape/Unescape: basta incollare il codice che avevi copiato in precedenza e otterrai un testo corretto correttamente.

# 4 Registra il modello

A questo punto, l'unica cosa rimasta è usare la funzione register_block_pattern() . Questa funzione riceve due argomenti: il nome del modello e un array di proprietà. Alla fine di questo post ti fornisco maggiori dettagli sulle proprietà che puoi definire in un pattern, ma prima vediamo i passaggi necessari per crearne uno.

Questo è il nostro esempio:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

Come puoi vedere nello snippet precedente, specifichiamo prima un nome univoco per identificare il nostro pattern ( ruth-gutenberg-blocks-patterns/section-with-six-features ), quindi specifichiamo un array con un paio di proprietà: il title ("Sezione con 6 funzioni") un utente del modello vedrà e il content stesso. Il content è il testo a cui siamo sfuggiti nel passaggio precedente.

# 5 Crea un plug-in con il pattern registrato

Per avere il pattern registrato nel nostro editor, possiamo creare un plugin o inserirlo nel nostro tema attivo. Se crei un plugin, questo è ciò di cui hai bisogno:

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

E voilà! Se ora aggiorniamo il nostro editor (supponendo che tu abbia attivato il plugin, ovviamente), vedrai il nuovo pattern:

ma, sfortunatamente, è elencato in Uncategorized . Questo perché non abbiamo indicato se il nostro blocco appartiene a una delle categorie esistenti oa una nuova.

# 6 Aggiungi una nuova categoria di modelli

Puoi aggiungere nuovi modelli di blocco in categorie esistenti o creare una categoria completamente nuova utilizzando la funzione register_block_pattern_category . Questa funzione accetta anche due argomenti: il nome della categoria e un array di opzioni. Suona familiare?

Ecco un esempio:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

Una volta che la nuova categoria è pronta, non dimenticare di aggiornare il tuo schema di blocco in modo che specifichi esplicitamente che dovrebbe essere elencato in questa nuova categoria:

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

E il gioco è fatto:

Ora possiamo aggiungerlo a qualsiasi nuova pagina che creiamo e quindi apportare le modifiche che riteniamo appropriate, come puoi vedere nella sezione creata su una nuova pagina per il lancio del nostro nuovo prodotto:

Proprietà del modello di blocco

Nel nostro esempio abbiamo definito le title , content e categories di un pattern a blocchi, ma ce ne sono di più. Troverai i dettagli nella documentazione che descrive la funzione register_block_pattern , ma ecco un riepilogo:

• title (obbligatorio): il titolo del pattern.
• content (richiesto): il contenuto del pattern.
• description : un testo visivamente nascosto utilizzato per descrivere il modello nell'inseritore. La descrizione è facoltativa, ma è fortemente consigliata quando il titolo non descrive completamente ciò che fa il modello.
• categories : una serie di categorie di pattern utilizzate per raggruppare i pattern di blocco. I modelli di blocco possono essere visualizzati in più categorie.
• keywords : un insieme di alias o parole chiave che aiutano gli utenti a scoprire il modello durante la ricerca.
• viewportWidth : un numero intero che specifica la larghezza del modello nell'inseritore.

Nel caso di registrazione di categoria, dobbiamo solo definire una proprietà label , poiché non ci sono più prop.

Oggi abbiamo visto che creare uno schema di blocchi in modo da averlo sempre disponibile sul tuo sito web è abbastanza semplice. Nel prossimo post vedremo come possiamo creare pattern senza sapere nulla di codice. Non perderlo!

Immagine in primo piano di John Cameron su Unsplash.