Ciao sono Simone,
frontend designer di Evolve,
uno studio digitale con sede a Genova.

Come creare un blocco custom per WordPress

Wordpress

Il Block Editor è stato introdotto nel 2018 con la versione 5.0 di WordPress rivoluzionando per la prima volta, dal punto di vista tecnico e concettuale, i paradigmi di sviluppo di un progetto su WordPress.

Presentato come una rivoluzione, si è scoperto molto presto che il prodotto era tutto fuorché maturo per poter essere usato in produzione e saranno necessari alcuni anni prima che questo lo diventi realmente (uscirà dalla beta probabilmente con la 6.2 o 6.3).

Il Block Editor è l'insieme di strumenti che ci permette di comporre il contenuto di una pagina tramite quelli che vengono chiamati blocchi.

I blocchi invece sono dei componenti in grado di generare una funzionalità specifica, più o meno astratta a seconda dei casi, che può essere replicata all'infinito.

Perché dovrei avere la necessità di creare un blocco custom?

WordPress ci mette a disposizione molti blocchi di default ma nonostante questi coprano un'ampia gamma di funzionalità, dal semplice blocco per creare un paragrafo di testo ad uno più complesso per creare un query loop, è improbabile che possano soddisfare tutte le necessità del vostro progetto.

Per personalizzare un blocco possiamo usare quelli che sono chiamati stili, che non sono niente di più di una classe aggiunta al blocco che ci permette di personalizzarlo da CSS.

Una volta creato uno stile è possibile manipolare il markup sfruttando il filtro render_block (ne ho parlato qui), ma è potenzialmente rischioso perché potrebbe rompere il rendering del nostro blocco.

Lo stesso vale per le opzioni, estendere la logica di un blocco di core è abbastanza complesso e si finisce molto presto per imbattersi in limitazioni strutturali che ci impediscono di fare veramente tutto quello che desideriamo.

Un'altra motivazione valida per spingerci a creare un blocco custom è il voler astrarre una funzionalità per poterla riutilizzare in altri progetti, come per esempio un blocco per generare delle tab (perché a nessuno piace reinventare la ruota in ogni progetto vero?).

Come si crea quindi un blocco?

Innanzitutto, che cos'è un blocco? Un blocco è un plugin, composto di files Javascript, CSS e PHP.

Un blocco custom fino a poco tempo fa era abbastanza complesso da creare, ma avrete sicuramente notato che negli ultimi WordCamp hanno iniziato a proliferare talk del tipo "come creare un blocco in 5 minuti", o simili, questo perché, finalmente, sono stati rilasciati degli strumenti ufficiali per generare un blocco.

Il Block Editor è basato su React, quindi nonostante sia possibile creare un blocco in Vanilla Javascript, è chiaramente consigliabile conoscere un minimo React.

Ed è qui che iniziano i problemi secondo me, perché sebbene creare un blocco da riga di comando sia teoricamente semplicissimo: npx @wordpress/create-block nome-blocco, in pratica poi si scopre molto presto che la documentazione è scarna, frammentata ed è obbligatorio avere una conoscenza di base di React per andare oltre gli esempi proposti.

Consigli

Essendo presenti già molte risorse (finalmente) sul come creare un blocco usando gli strumenti ufficiali, non voglio dilungarmi in un tutorial sul come creare un blocco, piuttosto vorrei elencare qualche suggerimento/strategia personale sul come affrontare lo sviluppo di un blocco per WordPress.

  • Imparare gli Hooks di React è fondamentale, senza una base di conoscenza degli Hook si va poco distante.
  • La documentazione è molto scarna e quella presente è organizzata male dal mio punto di vista, il più delle volte è più utile analizzare come sono costruiti i blocchi di core direttamente nel repository del progetto Gutenberg.
  • Questo è molto soggettivo, ma consiglio di optare per un blocco renderizzato in PHP piuttosto che in React, quello che viene chiamato Dynamic block, perché molto più semplice da gestire.
  • Se avete bisogno di creare più blocchi che condividono gli stessi componenti è più pratico creare un unico plugin, nonostante non sia attualmente supportato dal tool ufficiale. Ci sono vari modi per approcciare questo tipo di plugin, questo è il metodo al quale mi sono ispirato per il plugin che ho realizzato di recente.
  • Nel caso di blocco parent e blocco child (colonne > colonna) è possibile passare le informazioni tra i due blocchi usando quelli che sono chiamati "Context". Nel block.json del parent block andremo a dichiarare gli attributi che vogliamo propagare con providesContext e nel child block block.json con usesContext.
  • Mi è capitato di aver bisogno di mettere a disposizione dei miei blocchi delle informazioni definite nel tema e l'approccio che ho utilizzato è stato quello di definire dei custom theme supports per poi renderli disponibili nell'editor con wp_localize_script. Probabilmente ci potranno essere altri metodi ma è il più vicino alla filosofia di sviluppo di WordPress.
  • Il Block Editor è uno strumento in continuo sviluppo ed è facile trovare componenti (React, che serviranno per comporre le opzioni del nostro blocco) ancora __experimental, il mio suggerimento è, se possibile, cercare di evitarli.
  • WordPress React non è proprio React puro, perché alcune logiche sono in qualche modo "filtrate" da WordPress e per certi versi può anche aver senso.
  • Se avete poco tempo il consiglio è di usare Advanced Custom Fields per generare un blocco custom, ha chiaramente dei limiti dal punto di vista dell'editing presentato all'utente ma ci permette di creare un blocco in pochissimo tempo, vincolandovi però all'installazione di un plugin extra.
  • L'ultimo consiglio è non scoraggiarsi, perché lo sviluppo di un blocco custom può essere estremamente frustrante per la mancanza di documentazione, codice a volte troppo complicato da analizzare e scelte molte volte discutibili.

Risorse utili

Altri articoli simili

Blog