Costruire una libreria di modelli di blocchi di Gutenberg

Gutenberg rappresenta un enorme cambiamento verso il web design basato su modelli. In questo articolo discuterò gli approcci che abbiamo adottato durante la creazione della nostra libreria flessibile di blocchi Gutenberg personalizzati.

sfondo

La versione di dicembre 2018 di Gutenberg ha rappresentato il più grande cambiamento in WordPress dal suo inizio. La nuova interfaccia "drag & drop" basata su blocchi cambia il modo in cui gli sviluppatori creano i temi, il modo in cui i progettisti considerano la suddivisione dei siti in parti componenti e il modo in cui gli editor di contenuti gestiscono e pianificano la creazione di contenuti.

Questo è un passaggio fondamentale verso la progettazione di siti Web basata su modelli; un sistema di elementi riutilizzabili che possono essere applicati in modo coerente in un sito Web, per creare la migliore esperienza utente possibile e semplificare il flusso di lavoro. Mentre molti di noi stavano già lavorando con i modelli, Gutenberg porta avanti questo cambiamento a un ritmo accelerato. Poiché WordPress alimenta un terzo dei siti Web in tutto il mondo, l'impatto di questo cambiamento non può essere sopravvalutato.

Questo articolo evidenzia alcuni dei problemi che abbiamo affrontato come sviluppatori quando abbiamo iniziato a pianificare e costruire una libreria di modelli, come abbiamo superato i limiti inerenti a Gutenberg e l'approccio che abbiamo adottato per creare il nostro sistema flessibile di blocchi personalizzati.

Il nostro obbiettivo

In qualità di costruttori specializzati di siti Web WordPress su misura, Gutenberg ci ha offerto l'opportunità perfetta per creare una libreria unificata di modelli; una serie di blocchi personalizzabili da utilizzare con molti dei nostri build di siti Web personalizzati.

Non solo volevamo abbracciare questa nuova esperienza di editing, volevamo essere in grado di offrire una soluzione utilizzando il nostro sistema senza fare affidamento su un set limitato di blocchi di Gutenberg di base o su un patchwork di soluzioni di terze parti pronte all'uso.

Un set completo di blocchi a portata di mano significa anche che non dobbiamo creare ogni blocco da zero per le nuove build del sito Web Gutenberg. Ciò ci consentirebbe di dedicare ancora più tempo a perfezionare l'estetica di un sito e aggiungere il tipo di ritocchi e ottimizzazioni che aiutano a separare un sito Web dalla concorrenza.

Sfide

Flessibilità di progettazione

Avevamo bisogno di un sistema di design versatile con diversi modelli che ci desse la flessibilità di creare una varietà di temi su misura.

Trovare un buon equilibrio tra essere in grado di mantenere un numero finito e realistico di modelli, senza compromettere il design del tema, sarebbe stata una sfida.

Un cambiamento nello sviluppo del tema

Prima di Gutenberg, abbiamo adottato diversi approcci allo sviluppo del tema. Il più comune era creare modelli di pagina individuali per parti separate di un sito. I modelli sarebbero molto prescrittivi e includerebbero campi personalizzati per ogni sezione progettata. Un modello "Case Studies", ad esempio, può includere campi per un editor di testo, una galleria di immagini, testimonianze, ecc. Tuttavia, una volta inclusi nel modello, non possono essere facilmente modificati.

Non solo questo approccio è restrittivo in termini di layout di pagina, ma di solito significava che erano necessari sforzi ripetuti con ogni nuovo sito basato su modelli; i campi devono essere creati, i modelli impostati e i componenti separati codificati per la visualizzazione sul front-end.

Per adattarci a Gutenberg, dovevamo cambiare il nostro approccio allo sviluppo, capire come creare componenti riutilizzabili e abbracciare la flessibilità che Gutenberg ora ci offre per la creazione di nuovi siti web.

Gutenberg non è così flessibile

Pronto all'uso, Gutenberg ha a disposizione oltre 30 blocchi core. Tutto, dai componenti di contenuto di base come paragrafi, intestazioni ed elementi di elenco a widget e incorporamenti più complessi.

Per molte delle nostre build di siti Web, un buon numero di questi blocchi di base non è rilevante o non ha il livello di funzionalità che i nostri temi richiederebbero da loro. Avevamo bisogno di un modo per creare la nostra serie di modelli che svolgono funzioni molto specifiche appropriate al design del tema.

Un altro problema che abbiamo presto riscontrato con Gutenberg è che non è né facile né intuitivo creare layout più complessi utilizzando i blocchi principali.

Un modello per un blocco "contenuto e immagine", ad esempio, può richiedere che un titolo, un paragrafo, un elenco e un pulsante appaiano accanto a un'immagine e con l'opzione di visualizzare l'immagine a sinistra o a destra di quel contenuto e che questi elementi siano visualizzato in un layout coerente.

Questo livello di libertà non è facile con Gutenberg. Sebbene ci siano diversi blocchi che possono aggiungere testo, immagini e pulsanti, questi sono di natura piuttosto atomica e quando aggiunti singolarmente appaiono come blocchi impilati separati. È apparso subito chiaro che Gutenberg non era abbastanza flessibile e che dovevamo essere in grado di costruire i nostri blocchi personalizzati.

La nostra soluzione

Un sistema di design versatile

Prima del rilascio di Gutenberg, avevamo già investito molto tempo nella ricerca e nella visualizzazione dei modelli per la nostra libreria di modelli.

Ciò ha comportato l'audit di molti dei nostri siti Web e prototipi esistenti per compilare una libreria wireframe di elementi comunemente usati.

I nostri designer e sviluppatori hanno continuato a lavorare insieme per capire come combinare questi elementi in blocchi di Gutenberg e come creare un tipo di blocco specifico in modo che, con opzioni di personalizzazione limitate, un singolo blocco possa apparire significativamente diverso da un tema all'altro.

Dopo aver classificato i nostri modelli in blocchi, eravamo pronti per iniziare a costruire.

Elementi costitutivi con campi personalizzati avanzati

Quasi sicuramente ogni sviluppatore di temi si è imbattuto in Advanced Custom Fields (ACF) ad un certo punto. Attraverso un'interfaccia intuitiva, è possibile creare una moltitudine di diversi tipi di campo; qualsiasi cosa, da campi di testo di base e editor di contenuti a selettori di date, incorporamenti di mappe e campi di gallerie. Questi possono essere facilmente assegnati a diverse aree di un sito come tipi di post, modelli di pagina, categorie e pagine utente.

L'ultima versione di ACF, i blocchi ACF, estende tutte queste funzionalità familiari a Gutenberg. I gruppi di campi possono essere creati e assegnati a diversi blocchi basati su ACF allo stesso modo di altre aree del sito.

Con poche righe di codice necessarie per registrare un blocco e campi di output, è possibile creare un blocco personalizzato di base in pochi minuti. La facilità con cui i blocchi possono essere creati con questo approccio ci ha permesso di concentrarci sulla configurazione, l'output e lo stile dei blocchi.

Ora siamo stati in grado di creare una suite di blocchi personalizzati che offrissero tutta la flessibilità di Gutenberg ma vincolati al design del tema che avrebbe aiutato con layout coerenti.

Plugin libreria di pattern Pattern

Dopo aver creato alcuni blocchi di esempio, abbiamo deciso di impacchettare i nostri blocchi all'interno di un plug-in personalizzato con l'aiuto del team di ingegneri.

Questo plug-in basato su blocchi consente una rapida implementazione di modelli personalizzati per nuove build di siti Web. Questi vengono poi ulteriormente personalizzati a livello di tema.

Il nostro plugin Pattern Library include alcune utili funzioni:

1. File modello di blocco di base per consentirci di aggiungere rapidamente nuovi blocchi;
2. Funzioni per consentire l'inizializzazione dei blocchi principali e dei blocchi personalizzati e l'inclusione in categorie personalizzate;
3. Una schermata delle impostazioni di amministrazione in cui ogni blocco può essere abilitato o disabilitato;
4. Possibilità di sovrascrivere il layout e la struttura di un blocco all'interno del tema;
5. La capacità di sovrascrivere lo stile dei blocchi a livello di tema;
6. Caricamento di fogli di stile a livello di tema all'interno di Gutenberg in modo che l'anteprima dell'amministratore dei blocchi appaia uguale ai blocchi front-end. L'uso della griglia CSS ci ha aiutato a massimizzare la flessibilità nell'estetica e nel layout, riducendo al minimo i cambiamenti strutturali;
7. Blocchi specifici possono essere limitati a determinati tipi di post per mantenere la coerenza.

Lo sviluppo del plug-in Pattern Library sarà un'evoluzione continua, ma ora disponiamo di oltre 15 blocchi che possono essere utilizzati per costruire una parte significativa dei nostri progetti di temi flessibili.

La nostra suite di blocchi include modelli di contenuti e immagini, testimonianze, articoli correlati e blocchi di team insieme a modelli di stile più "vetrina" tra cui gallerie, statistiche e cursori.

Sommario

Siamo davvero entusiasti delle opportunità che Gutenberg e la nostra libreria di modelli personalizzati hanno aperto.

Non solo possiamo continuare a guidare la nostra offerta di siti Web su misura utilizzando l'ultima esperienza di modifica, ma siamo in grado di produrre siti Web altamente flessibili con un approccio di sviluppo unificato che ci aiuta a creare esperienze avanzate per gli utenti finali.

Sono passati quasi 2 mesi da quando abbiamo iniziato a utilizzare la nostra libreria di pattern di blocchi Gutenberg che ora stiamo utilizzando su molte nuove build di siti. I clienti sono stati desiderosi di utilizzare Gutenberg e il feedback dei clienti è stato davvero positivo finora.

“Matt e Pammy hanno consegnato un tutorial sugli elementi del sito che hai creato e sono fantastici !! La flessibilità e la professionalità sono fantastiche e sono così grato per tutto il tuo fantastico lavoro su questo finora .. Sono davvero entusiasta del sito web ora. Grazie"

– Rachel Smith, YMCA Nottingham

Continueremo ad espandere la nostra libreria di modelli di blocchi personalizzati e a perfezionarla con ulteriori miglioramenti man mano che trascorriamo più tempo con Gutenberg. Attualmente stiamo lavorando al nostro quinto sito con sede a Gutenberg, quindi cerca presto un caso di studio!

Se hai bisogno di aiuto per lo sviluppo di WordPress, non esitare a contattarci.