Nozioni di base sul costruttore: esplorare i modelli di blocchi

L'ultima versione di WordPress arriverà alla fine del mese, il 25 gennaio. Forse mentre stai leggendo questo, la versione 5.9 è già stata rilasciata nel mondo. Non potrei essere più eccitato. Ci sono innumerevoli miglioramenti e nuove funzionalità, molte delle quali tratteremo in articoli futuri, ma l'argomento di oggi sono i "modelli" a blocchi.

Sebbene non siano nuovi in ​​WordPress, i modelli stanno ricevendo molta nuova attenzione grazie alle funzionalità abilitate dalla versione 5.9, in particolare i temi basati sui blocchi. I pattern stanno rapidamente diventando una componente fondamentale di WordPress stesso e sembrano pronti a rimodellare il modo in cui progettiamo e costruiamo siti web. Quindi quale momento migliore per esplorare cosa sono veramente gli schemi a blocchi e come puoi usarli?

Le basi

Prima di addentrarci negli schemi a blocchi, iniziamo con le basi e stabiliamo un po' di terminologia. WordPress è cambiato parecchio negli ultimi anni. È bene assicurarsi che siamo tutti sulla stessa pagina.

Bloccare

Un blocco è l'"unità" fondamentale del contenuto in WordPress. Da un paragrafo di testo a una galleria di immagini, un blocco può assumere quasi tutte le forme. Mi piace immaginare un singolo pezzo di LEGO . Sebbene ogni blocco possa avere un aspetto diverso o svolgere una funzione unica, tutti si adattano perfettamente creando il contenuto di una pagina web.

Modello

Un modello di blocco è semplicemente una raccolta predefinita di blocchi che forma un layout specifico. Un pattern può essere un blocco singolo o composto da più. Come vedremo in seguito, i modelli rendono facile e divertente la creazione di layout di pagina complessi.

Editore

L' editor è l'interfaccia utente che utilizziamo per creare pagine e post da blocchi. Dalla sua introduzione in WordPress 5.0 nel lontano 2018, l'Editor è stato chiamato con molti nomi. Questi includono Gutenberg, Gutenberg Editor, Block Editor e altri. Ai fini di questo articolo, useremo semplicemente il termine "Editor".

Inseritore

All'interno dell'editor, l' inseritore viene utilizzato per aggiungere blocchi e motivi alla pagina. Puoi accedere all'inseritore facendo clic sul segno blu (+) nell'angolo in alto a sinistra dell'editor.

Lo screenshot seguente illustra i nostri termini definiti.

Perché bloccare i modelli?

L'editor ci consente di costruire praticamente qualsiasi progetto da blocchi, sia che si tratti di un semplice post di blog o di una pagina di destinazione elaborata. Usiamo questo stesso articolo come esempio. Quello che stai leggendo in questo momento è un blocco di paragrafo. L'intestazione sopra è un blocco di intestazione e lo screenshot è solo un blocco di immagine. Aggiungere questi elementi di contenuto alla pagina è stato facile. Ho aperto l'inseritore, ho trovato il blocco appropriato e ho fatto clic per inserire.

Suggerimento rapido: sapevi che i blocchi possono essere inseriti anche usando il comando slash? Inizia un nuovo paragrafo con il tasto “/” e apparirà un elenco di blocchi disponibili. La digitazione di lettere aggiuntive migliorerà i risultati della ricerca. Provaci!

Che ne dici di qualcosa di un po' più complicato? Considera la seguente tabella dei prezzi, un design comunemente usato per mostrare prodotti o servizi su un sito web.

Guarda da vicino e potresti essere in grado di riconoscere i singoli blocchi utilizzati per creare questo layout. La base è un blocco di colonne con tre colonne equidistanti. All'interno di ogni blocco Colonna è presente un blocco Separatore, Intestazione, Paragrafo, Pulsanti e Distanziatore. Quanti sei riuscito a individuare?

In effetti, questa tabella dei prezzi è composta da 25 singoli blocchi. Indipendentemente dal tuo livello di abilità con WordPress, replicare questo layout da zero sarebbe sia noioso che un po' impegnativo.

Ora immagina se questo gruppo di 25 blocchi fosse già configurato per te. Con un solo clic, puoi inserire la tabella dei prezzi completa e modificarla in base alle tue esigenze individuali. Ancora meglio, e se ci fosse una vasta collezione di design a portata di mano, ognuno corrispondente all'estetica del tuo tema? Pensa a layout creativi di immagini e testo, inviti all'azione, intestazioni, piè di pagina e persino layout a pagina intera. Avere questo tipo di "contenuto iniziale" farebbe risparmiare molto tempo e renderebbe persino l'Editor più accessibile ai nuovi utenti di WordPress.

È qui che entrano in gioco i modelli di blocco. La tabella dei prezzi sopra è in realtà un modello incluso nel prossimo tema Twenty Twenty-Two, che sarà rilasciato insieme a WordPress 5.9!

Si spera che questo piccolo esercizio abbia illustrato il motivo per cui sono così entusiasta del potenziale dei modelli a blocchi, ma come li usiamo effettivamente?

Come usare i modelli

Proprio come i blocchi, i modelli possono essere aggiunti a una pagina utilizzando l'Inseritore. Con l'inseritore aperto, vai alla scheda "Modelli" che rivela tutti i modelli disponibili segmentati per categorie. Seleziona il layout che fa per te e clicca per inserire. Puoi quindi modificare i singoli blocchi che compongono il modello, proprio come faresti con qualsiasi altro blocco. Non c'è limite al numero di modelli che puoi inserire. Mescola e abbina per creare design di pagina unici.

Sebbene l'Inseritore fornisca un facile accesso ai modelli di blocco, noterai che l'anteprima di ogni modello è piuttosto piccola e sono tutti impilati in un'unica colonna. Può essere difficile visualizzare e confrontare i layout, rendendo difficile la scelta di quello giusto.

Per risolvere questo problema, WordPress 5.9 include Pattern Explorer. È possibile accedere a questa nuova entusiasmante funzionalità facendo clic sul pulsante "Esplora" accanto al menu a discesa delle categorie nella scheda "Modelli".

L'Explorer apre una finestra modale che fornisce un'esperienza di navigazione migliorata con i modelli visualizzati in una griglia. Possono anche essere facilmente ricercati o filtrati per categoria.

Lo screenshot sopra è la prima iterazione di Pattern Explorer. Si prevede che le future versioni di WordPress amplieranno le funzionalità di Explorer. Gli esperimenti attuali aggiungono anteprime per dispositivi mobili/tablet e l'opzione per mostrare i modelli individualmente invece del layout della griglia. Anche se nulla è confermato, tieni d'occhio ulteriori miglioramenti in WordPress 6.0 verso la metà del 2022.

Con tutta questa discussione sui modelli, ti starai chiedendo, da dove vengono effettivamente?

Dove trovarli

Pattern da registrare in uno dei tre modi, tramite il tema corrente, un plug-in di terze parti o lo stesso WordPress tramite la Pattern Directory. Esploriamo ogni metodo.

Tema

Il tuo tema sarà probabilmente il modo più diretto in cui i modelli sono resi disponibili sul tuo sito web. Come abbiamo visto con la tabella dei prezzi sopra, molti temi basati su blocchi includono le proprie raccolte di modelli su misura. Questo è solo un altro modo per differenziare i temi e un solido set di opzioni di layout sarà un enorme vantaggio per gli utenti. Al momento in cui scrivo, il tema Twenty Twenty-Two verrà spedito con oltre 60!

Directory dei modelli (WordPress)

A partire dal rilascio di WordPress 5.9, WordPress fornirà i propri modelli attraverso la Pattern Directory.

La Pattern Directory è un repository di pattern guidato dalla comunità, proprio come il plugin di WordPress e i repository di temi, e sarà aperto per gli invii pubblici dalla versione 5.9. Tutti i modelli inviati e approvati saranno prontamente disponibili per la navigazione e l'inserimento direttamente da Pattern Explorer. Ciò significa che gli utenti di WordPress avranno accesso a centinaia, se non migliaia, di schemi di blocco.

Suggerimento rapido: alcuni temi potrebbero disabilitare i modelli inclusi da WordPress dalla Directory dei modelli. Questo viene spesso fatto quando gli sviluppatori di temi includono le proprie raccolte di modelli e desiderano fornire un'esperienza utente più curata.

Plugin di terze parti

Finalmente abbiamo i plugin. Poiché i modelli esistono da diversi anni, molti plugin di terze parti, come Genesis Blocks e Redux, hanno creato ampie librerie di modelli. Spesso queste librerie non sono direttamente integrate con funzionalità come Pattern Explorer e presentano blocchi personalizzati non presenti nel core di WordPress. Tendono anche a utilizzare i propri metodi per inserire i modelli, ma nel tempo mi aspetto che molti inizieranno a conformarsi al nuovo approccio standardizzato di WordPress.

Se stai cercando blocchi e layout di nicchia mentre Pattern Directory continua a maturare, o non stai utilizzando un tema con i suoi modelli, ti consiglio vivamente di esplorare ciò che i plugin di terze parti hanno da offrire.

Il futuro dei modelli

WordPress 5.9 porterà molti miglioramenti ai modelli di blocco. Come abbiamo discusso, Pattern Explorer semplificherà la scelta del design giusto per il tuo sito web. La Pattern Directory ti darà accesso a una vasta collezione di pattern costruiti dalla community che si integreranno perfettamente nel tuo tema.

Anche se sarai sempre in grado di creare design unici da singoli blocchi, credo che la maggior parte di noi andrà direttamente a Pattern Explorer. Sceglieremo un layout, fornito dal nostro tema o dalla Directory, e quindi modificheremo secondo necessità. So che lo farò.

Inoltre, possiamo aspettarci che i nuovi temi basati sui blocchi vengano giudicati da quanto è ampia la loro raccolta di modelli di blocchi incorporati. I temi con oltre cento modelli, tutti ordinatamente classificati e che coprono un'ampia gamma di casi d'uso, diventeranno probabilmente la norma. Sebbene l'estetica di un tema sia importante, fornire agli utenti gli strumenti di cui hanno bisogno per creare facilmente belle pagine Web è fondamentale.

I pattern sono il futuro di WordPress e il futuro è luminoso.

Avvolgendo

In questo articolo abbiamo esaminato cosa sono i pattern di blocco, come puoi usarli e perché cambieranno radicalmente il modo in cui costruiamo siti Web WordPress. Nel prossimo articolo di Builder Basics ci addentreremo un po' più a fondo e ti insegneremo come creare effettivamente i tuoi schemi!

Allora cosa ne pensi dei modelli? Li stai usando sul tuo sito web? Hai domande che non sono state trattate in questo articolo? Fateci sapere nei commenti.