Pattern a blocchi di Gutenberg: uno sguardo da sviluppatore

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ù approfondito su come scrivere codice per loro.

Schemi di blocco e loro utilizzo

I modelli di blocco sono stati introdotti in WordPress 5.5 (11 agosto 2020). Sono una nuova funzionalità nell’inseritore di blocchi per inserire più facilmente una configurazione predefinita di più 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’idea è che gli utenti finali non debbano più creare manualmente layout complessi e tutte le loro impostazioni personalizzate e nidificarli in contenitori adeguati per i blocchi che usano spesso.

Una volta che un modello di blocco è stato aggiunto all’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. È fondamentalmente una scorciatoia per aggiungere una configurazione di più blocchi.

L’idea è buona! Non tutti gli utenti finali si sentono a proprio agio nel creare una grande struttura di blocchi nidificati nell’editor per farlo sembrare perfetto. Tuttavia, finora questa funzionalità è principalmente un vantaggio per gli sviluppatori poiché gli utenti finali non possono creare i propri modelli. Per i blocchi personalizzati degli utenti devono attenersi all’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.

WordPress ha aggiunto un nuovo supporto per i temi per i modelli di blocco: 'core-block-patterns'. Core dalla 5.5.0 eseguirà automaticamente un add_theme_support('core-block-patterns')quindi non è necessario farlo nel tuo tema.

Poiché tutte le funzioni del pattern di blocco esistono solo in una versione molto nuova di WordPress, è una buona idea verificarne prima l’esistenza, in modo da non interrompere i siti con versioni precedenti di WordPress. In tutti gli esempi di codice seguenti ho fatto proprio questo.

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ù categorie. Gli sviluppatori di temi e plug-in possono registrare i propri modelli di blocco e le categorie di modelli di blocco, nonché annullare la registrazione di quelli nel core. Quindi diamo un’occhiata più da vicino a come!

Modelli di blocco e categorie di modelli di blocco inclusi in WordPress 5.5

I modelli di blocco forniti in WordPress 5.5 sono i seguenti (lo spazio dei nomi e l’ID slug di ciascun modello sono visualizzati tra parentesi):

• Due pulsanti (‘ core/two-buttons‘)
• Tre pulsanti (‘ core/three-buttons‘)
• Due colonne di testo (‘ core/text-two-columns‘)
• Due colonne di testo con immagini (‘ core/text-two-columns-with-images‘)
• Tre colonne di testo con pulsanti (‘ core/text-three-columns-buttons‘)
• Due immagini affiancate (‘ core/two-images‘)
• Intestazione grande con un’intestazione (‘ core/large-header‘)
• Intestazione grande con un’intestazione e un pulsante (‘ core/large-header-button‘)
• Citazione (‘ core/quote‘)

Le categorie aggiunte in WordPress 5.5 sono (i loro ID slug sono visualizzati tra parentesi):

• Pulsanti (‘ buttons‘)
• Colonne (‘ columns‘)
• Galleria (‘ gallery‘)
• Intestazioni (‘ header‘ – nota no ‘s’ alla fine)
• Testo (‘ text‘)

Annullamento della registrazione dei modelli di blocco

È possibile annullare la registrazione dei modelli di blocco utilizzando la funzione [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). 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’interno di una funzione agganciata initall’azione.

Un esempio di annullamento della registrazione dei modelli di blocco principale "Due pulsanti" e "Tre pulsanti":

add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Registrazione dei modelli di blocco

La registrazione di un nuovo modello di blocco viene eseguita utilizzando la funzione [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Accetta due parametri; il primo è una stringa di un nome univoco per il tuo modello incluso lo spazio dei nomi. Il secondo è una serie di impostazioni per il tuo schema di blocco.

Suggerimento: per definire un pattern di blocco è necessario fornire contenuto HTML grezzo per la configurazione del blocco. Non consiglio di digitarlo manualmente poiché ciò causerà facilmente conflitti di blocco non validi. Invece vai nell’editor e imposta i blocchi come desideri averli nel tuo modello. Quindi fai clic sul "menu punti" nella barra degli strumenti del blocco genitori e fai clic su "Copia". Dopodiché puoi tornare al tuo editor di codice e incollare (Ctrl+V). Questo ti dà l’HTML grezzo per la configurazione che hai copiato. Usa la funzionalità dell’editor di codice per sostituire tutte le nuove righe ne assicurati di evitare le virgolette correttamente.

Le proprietà del modello di blocco sono le seguenti (secondo array di argomenti):

• title(richiesto): il nome visualizzabile del modello di blocco
• **content**(richiesto): HTML RAW della configurazione del blocco
• description: Descrizione per il tuo schema di blocco. È visivamente nascosto
• categories: Una serie di categorie in cui aggiungere questo schema di blocco. Se non si fornisce questa proprietà, il blocco verrà inserito in una categoria di modello di blocco "Non categorizzato".
• keywords: una serie di parole chiave che possono aiutare gli utenti a trovare il tuo modello durante la ricerca
• viewportWidth: fornisce un numero intero della larghezza del modello di blocco nell’inseritore. Influisce solo sull’anteprima nell’inseritore.

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:

Registrazione delle categorie di pattern di blocco

Gli sviluppatori possono anche registrare categorie di modelli di blocchi personalizzati. Questo viene fatto con la funzione [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Accetta due parametri; prima una stringa della categoria slug e poi un array di proprietà. Al momento solo una proprietà è supportata nel secondo argomento; labelper il nome leggibile della categoria.

Di seguito è riportato un esempio di registrazione di una categoria di pattern di blocco personalizzato:

Con questo puoi aggiungere ‘awp-patterns’ categoriesall’argomento ‘ ‘ in register_block_pattern(). Tieni presente che se una categoria non ha schemi di blocco registrati, la categoria non verrà visualizzata nell’inseritore di blocchi. Dovrai aggiungere almeno un modello di blocco in questa categoria per farlo apparire.

Annullamento della registrazione delle categorie di pattern di blocco

Infine c’è una funzione [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()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.

Non dimenticare che le categorie di schemi di blocco senza schemi di blocco assegnati non saranno visibili nell’inseritore di blocchi. Quindi, se annulli la registrazione di tutti i modelli di blocco assegnati a una categoria, la categoria stessa non sarà più visibile e non è necessario annullare la registrazione della categoria. Tutti i modelli di blocco assegnati solo alla categoria che stai rimuovendo verranno spostati in una categoria "Non categorizzata".

Ecco un esempio di annullamento della registrazione della categoria "pulsanti" del modello di blocco principale:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Conclusione

La nuova funzionalità del modello di blocco in WordPress Gutenberg è sicuramente un passo avanti per far funzionare l’editor di blocchi più come un generatore di pagine. A mio parere, lo svantaggio è che gli utenti finali non possono creare i propri modelli. Ma è 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 è una funzionalità nuova di zecca e probabilmente si evolverà e sarà migliorata nel prossimo futuro! Io per primo, non vedo l’ora!