Nozioni di base sul costruttore: come creare modelli di blocchi

Nell'articolo Builder Basics del mese scorso, abbiamo esplorato i modelli di blocco: cosa sono e come puoi usarli. Abbiamo appreso che un modello di blocco è semplicemente una raccolta predefinita di blocchi che forma un layout specifico. Abbiamo mostrato il potere dei modelli e discusso di come siano una pietra miliare del moderno sviluppo di temi WordPress. Oggi impareremo come progettare, condividere e registrare i nostri modelli!

Tieni presente che questo articolo utilizza il tema Twenty Twenty-Two in tutti i suoi esempi. Questo tema basato su blocchi è stato rilasciato insieme a WordPress 5.9 ed è una risorsa fantastica con oltre 60 modelli di blocchi.

Disegno del modello

La parte più difficile della creazione di un pattern a blocchi è decidere come dovrebbe apparire. Iniziamo con qualcosa di relativamente semplice: una griglia di elementi, due file di tre. Potremmo utilizzare questo design per mostrare diversi servizi aziendali o caratteristiche del prodotto.

Suggerimento rapido: i modelli possono essere creati da qualsiasi blocco, inclusi i blocchi di terze parti. Tuttavia, se intendi distribuire i tuoi modelli a un vasto pubblico, prova a utilizzare solo i blocchi principali di WordPress: in questo modo, l'utente non deve installare plug-in aggiuntivi per utilizzare i tuoi progetti.

Per me, il design del modello inizia nell'editor. Mentre i modelli possono essere codificati manualmente, è molto più facile fare le cose visivamente. Inizierò aggiungendo un blocco Colonne con tre colonne per la prima riga della griglia. Successivamente, aggiungi i blocchi Intestazione, Paragrafo e Pulsanti a ciascuna colonna. Duplica il blocco Colonne per creare la seconda riga della griglia. Infine, applicherò alcune configurazioni di stile e avvolgerò entrambi i blocchi Colonne in un blocco Gruppo con un colore di sfondo. Il risultato si presenta così:

Puoi vedere i 33 blocchi che compongono questo disegno nello screenshot qui sopra!

Se voglio creare una versione alternativa "scura" della griglia, devo solo duplicare il design originale e modificare lo stile.

Sebbene entrambi i design siano relativamente semplici, crearli da zero può essere noioso. Essere in grado di condividere e/o salvare questi schemi di blocco farebbe risparmiare molto tempo.

Condivisione di un disegno

Condividere un disegno del modello è facile! Supponi di voler spostare il design in un'altra pagina del tuo sito Web, o forse in un altro sito Web completamente. È semplice come copiare e incollare il markup del blocco. Ci sono diversi modi per farlo.

Se il disegno del modello è contenuto in un blocco "contenitore", ad esempio un blocco Gruppo, Copertura o Colonne, selezionare il contenitore più esterno e utilizzare il menu degli strumenti per selezionare "Copia". Il markup del blocco viene copiato negli appunti e puoi incollarlo dove vuoi.

Una seconda opzione consiste nell'utilizzare l'editor di codice, a cui è possibile accedere dal pannello Opzioni.

L'editor di codice fornisce una rappresentazione visiva di tutto il markup dei blocchi nella pagina o nel post corrente. Preferisco questo metodo perché è facile vedere esattamente quale codice viene copiato.

Registrazione di un modello

Copiare e incollare il markup del blocco potrebbe essere facile, ma spesso desideriamo una versione più permanente dei nostri modelli di modelli. Per fare ciò, utilizzeremo l'API Patterns per "registrare" un pattern di blocco personalizzato. Questo rende il nostro design disponibile sia in Inserter che in Pattern Explorer all'interno di WordPress.

Per registrare un pattern, utilizziamo la funzione PHP register_block_pattern(). Questa funzione accetta due parametri, un titolo e un array di proprietà. Prima di esaminarli tutti, diamo un'occhiata a un esempio.

register_block_pattern(

'esempio/caratteristica-griglia-luce',

Vettore(

'title' => __( 'Feature Grid – Light', 'textdomain' ),

'description' => __( 'Mostra sei elementi in primo piano in una griglia su uno sfondo chiaro.', 'textdomain' ),

'categorie' => array( 'in primo piano', 'colonne' ),

'parole chiave' => array( 'caratteristica', 'griglia' ),

'viewportWidth' => 1400,

'blockTypes' => array( 'core/colonne' ),

'contenuto' => 'CONTENUTO MODELLO'

)

);

Qui stiamo registrando il pattern della griglia delle caratteristiche che abbiamo progettato in precedenza. Il titolo segue una convenzione di denominazione dello spazio dei nomi/titolo. Quando si registrano più pattern nello stesso progetto, è consigliabile mantenere lo spazio dei nomi coerente.

Solo i parametri del titolo e del contenuto nell'array delle proprietà sono tecnicamente richiesti. Per brevità, il contenuto del modello è escluso nell'esempio precedente. Tuttavia, questo è lo stesso codice che abbiamo copiato e incollato nella sezione precedente. Le categorie vengono impostate utilizzando il campo delle categorie e un modello può averne più. Nell'Editor, i modelli sono organizzati per categoria. Per le restanti proprietà, nel Block Editor Handbook viene fornita una fantastica suddivisione.

Per registrare il pattern della griglia delle caratteristiche con lo sfondo scuro, basta duplicare il codice di registrazione e aggiornarlo di conseguenza. Infine, avvolgiamo entrambe le funzioni in questo modo e posizioniamo tutto nel file functions.php del nostro tema.

funzione my_pattern_library_register_block_patterns() {

register_block_pattern(

'esempio/caratteristica-griglia-luce',

Vettore( … )

);

register_block_pattern(

'esempio/feature-grid-dark,

Vettore( … )

);

}

add_action('init', 'example_register_block_patterns');

Il codice completo è disponibile in un Gist su GitHub.

Una volta aggiunto il codice, i nostri modelli appena registrati verranno ora visualizzati nell'inseritore e nell'esploratore di modelli.

Registrazione di una categoria di pattern

Quando si lavora con modelli personalizzati, è spesso utile inserirli in categorie personalizzate. WordPress lo rende semplice con register_block_pattern_category(). Questa funzione è simile a quella che abbiamo usato per registrare i pattern. Tutto quello che devi fare è fornire un titolo di categoria e una serie di proprietà. A partire da WordPress 5.9, label è l'unica proprietà supportata, ma ci aspettiamo di più in futuro.

L'esempio seguente registra la categoria "Personalizzata" con il titolo personalizzato. Inserisci questo codice nel file functions.php del tuo tema insieme agli esempi di registrazione del modello.

funzione esempio_register_block_pattern_categories() {

register_block_pattern_category(

'costume',

array( 'label' => __( 'Personalizzato', 'dominio di testo' ) )

);

}

add_action('init', 'example_register_block_pattern_categories');

Le categorie di pattern verranno visualizzate nell'Editor solo se sono associate a pattern. Pertanto, se aggiungiamo personalizzato ai due modelli di griglia delle funzioni che abbiamo registrato in precedenza, la categoria "Personalizzata" apparirà in questo modo:

Crea un plugin per la libreria di modelli

Nelle sezioni precedenti, abbiamo registrato pattern e una categoria di pattern inserendo il codice nel file functions.php del nostro tema. Sebbene funzioni, non è l'ideale a lungo termine. Supponiamo di dover aggiornare il nostro tema? Forse vogliamo usare i modelli su un altro sito web?

WordPress deve ancora fornire una soluzione nativa per la gestione dei modelli personalizzati, quindi dobbiamo cercare soluzioni alternative. Inoltre, è spesso preferibile disporre di modelli in un formato più portabile.

L'approccio migliore che ho trovato è quello di creare un semplice plugin per WordPress per archiviare la mia raccolta di modelli personalizzati. I plugin offrono la massima versatilità e sono indipendenti dal tema. Ti mostrerò come creare il tuo plugin per la libreria di modelli nei seguenti passaggi.

Suggerimento rapido: se desideri saltare i seguenti passaggi, ho preparato un plug-in completo "My Pattern Library" che dovrebbe fornire un ottimo punto di partenza per la tua libreria. Il codice è disponibile come Gist su GitHub.

Passaggio 1: ottenere la configurazione

Prima di iniziare a creare il plug-in, avrai bisogno di una versione funzionante di WordPress e di un editor di testo di una certa varietà. Consiglio vivamente Local per creare installazioni WordPress locali e lo uso esclusivamente da molti anni. Uso Atom per la modifica del testo, ma ci sono molte ottime opzioni. Anche l'editor di testo di base fornito con il tuo sistema operativo funzionerà.

Configura un sito WordPress locale utilizzando Local o un'applicazione simile. Assicurati che WordPress sia aggiornato alla versione 5.9 o successiva. I pattern funzioneranno su 5.5+, ma è sempre meglio utilizzare l'ultima versione di WordPress quando possibile.

Passaggio 2: crea il plug-in

La prossima cosa che devi fare è creare la "base" del plugin. Se sei nuovo nello sviluppo di plugin, non aver paura. Sembra più scoraggiante di quello che è.

Passa alla directory wp-content → plugins nell'installazione locale di WordPress e crea una nuova directory intitolata my-pattern-library. Puoi nominare la directory come preferisci. Sostituisci semplicemente "my-pattern-library" con il tuo nome personalizzato in tutti i passaggi successivi.

All'interno della nuova directory wp-content → plugins → my-pattern-library , crea un file PHP intitolato my-pattern-library.php. Apri il file nel tuo editor di testo e aggiungi il seguente commento di intestazione del plug-in nella parte superiore del file. Non dimenticare il principale <?php. Nota che ho semplificato l'intestazione per questo tutorial.

<?php

/**

* Nome plug-in: La mia libreria di modelli

* Descrizione: una semplice libreria di modelli di blocchi.

* Versione: 0.1.0

* Richiede almeno: 5.8

* Richiede PHP: 7.0

* Autore: il tuo nome

* Licenza: GPL v2 o successiva

* Dominio di testo: my-pattern-library

*/

Sentiti libero di modificare le informazioni dell'intestazione come meglio credi. Quindi salva il file. Ora hai un plugin per WordPress completamente funzionante. Conferma che è visibile nella pagina Plugin di amministrazione e fai clic su "Attiva". Dovrebbe sembrare come questo.

Anche se ora hai un plugin funzionante, in realtà non fa nulla. Cambiamo quello.

Passaggio 3: registra modelli e categorie

In questo passaggio finale, tutto ciò che devi fare è copiare il codice di registrazione della categoria di pattern e pattern di prima in questo articolo nel nuovo plug-in. In precedenza abbiamo inserito questo codice nel file functions.php del tema. Ora, incollalo sotto il commento dell'intestazione nel tuo file my-pattern-library.php.

Salva il file e quindi vai all'Editor in WordPress. Apri l'Inseritore, fai clic sulla scheda Motivi e scegli la categoria Personalizzata. Dovresti vedere i due pattern registrati dal plugin.

La tua libreria di modelli è ora operativa! Quando sono necessari nuovi modelli o categorie personalizzate, aggiungili semplicemente al plug-in. Un esempio di codice completo è disponibile come Gist su GitHub.

Prima di concludere, è importante ricordare che questo esempio è destinato all'uso personale. Probabilmente vorresti includere più funzionalità se il plug-in dovesse essere distribuito pubblicamente. Mi viene in mente la localizzazione. Detto questo, questo tutorial dimostra quanto sia facile creare un semplice plug-in che memorizza modelli di blocchi personalizzati.

Avvolgendo

In questo articolo hai imparato a progettare, condividere e registrare schemi di blocco. Hai persino imparato a creare un semplice plugin per WordPress per ospitare la tua libreria di modelli. Credo fermamente che i modelli a blocchi siano parte integrante dello sviluppo di temi moderni e sono entusiasta di vedere cosa riserva il futuro. Se non hai iniziato a esplorare i modelli, spero che questo articolo ti incoraggi a farlo. Impara WordPress è una risorsa fantastica per ulteriore apprendimento e se hai domande, faccelo sapere nei commenti.