Dalla versione 5.8 di Advanced Custom Fields (ACF) Pro puoi utilizzare ACF per creare blocchi Gutenberg personalizzati. Tutto ciò che devi gestire sono i modelli PHP. Questo rende molto facile per gli sviluppatori che non hanno ancora esperienza nel moderno Javascript necessario creare blocchi personalizzati per Gutenberg con nessuno dei tipi di campo che ACF ha da offrire. Tieni presente che questa funzionalità è disponibile solo nella versione a pagamento (Pro) di Advanced Custom Fields. Non è disponibile nella versione gratuita, quindi dovrai acquistare una licenza.
Se sei un editor di WordPress o un webmaster che non vuole approfondire la programmazione, questo post è sicuramente per te. Tuttavia, se vuoi essere uno sviluppatore di temi o plugin per WordPress, ti consiglio di eseguire il passaggio per imparare a creare i tuoi blocchi personalizzati. Tuttavia, l’utilizzo di campi personalizzati avanzati per la creazione di blocchi può fornire una buona introduzione alla gestione dei blocchi personalizzati in Gutenberg.
Crea un blocco Gutenberg con ACF
Ci sono fondamentalmente tre semplici passaggi per creare un blocco Gutenberg personalizzato con Advanced Custom Fields. Il primo è facile e probabilmente familiare; impostando i campi (impostazioni) che desideri avere nel tuo blocco. Il secondo passaggio consiste nell’usare la funzione di ACF per registrare un blocco Gutenberg. E il terzo passaggio è scrivere il modello PHP per il blocco. Scrivi semplicemente l’HTML e gestisci le impostazioni proprio come faresti con i campi ACF altrimenti. E questo è tutto! (Okay, forse c’è un quarto passaggio; modellare il tuo blocco. Ma non ne parlerò in questo post).
Crea le tue impostazioni / campi
Se hai utilizzato i campi personalizzati avanzati prima probabilmente sai come impostare i campi. Puoi utilizzare l’interfaccia utente di amministrazione di Advanced Custom Field per farlo. Oppure, se vuoi che le impostazioni del blocco siano incorporate nel tuo plugin o tema, scrivi le impostazioni con PHP. Ho un post di riferimento completo su come aggiungere le impostazioni ACF con PHP.
La cosa fondamentale che devi fare con il tuo gruppo è impostare la posizione su "Blocca". Ma poiché non abbiamo ancora registrato il nostro blocco, sarà predefinito fino a "Tutto". Lascialo così, salva i tuoi campi e procediamo a registrando il nostro blocco.
Registra un blocco Gutenberg
Nel codice del tuo tema functions.phpo plugin devi scrivere una funzione agganciata a acf/inite chiamare [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()per registrare un blocco. Poiché questa funzione è piuttosto nuova in ACF e dipende da un plug-in da attivare, ti consiglio di racchiudere il tuo codice all’interno di un controllo if per assicurarti che il tuo tema o plug-in non vada in crash il tuo WordPress.
La registrazione di un blocco con ACF è in realtà simile a come registreremmo manualmente un blocco Gutenberg personalizzato. Con ACF devi fornire un nome slugified univoco per il tuo blocco in name. Raccomando di utilizzare un nome autoesplicativo, ad esempio ctaper un blocco Call to action, o author-cardper un blocco che mostra autori o simili. Se hai una certa familiarità con Gutenberg, potresti essere consapevole del fatto che tutti i blocchi devono essere registrati con uno spazio dei nomi, a /, e quindi il loro nome slug. Ad esempio lo spazio dei nomi di WordPress è core, quindi ad esempio il blocco di paragrafo in WordPress è chiamato core/paragraph. Con ACF lo spazio dei nomi sarà acf, quindi ad esempio il blocco sopra sarà registrato all’interno di Gutenberg come acf/yourblock. Se stai registrando i tuoi campi con PHP, come vedrai più avanti, dobbiamo ricordarlo.
In categorytu definisci in quale categoria Gutenberg vuoi che appaia il tuo blocco. Al momento i valori possibili sono common, formatting, layout, widgetso embed. Se crei categorie Gutenberg personalizzate, puoi aggiungerle a quelle se lo desideri. Per quanto riguarda iconfornire qualsiasi nome di icona da WordPress Dashicons (meno il).
Per informare ACF su come eseguire il rendering di questo blocco, hai due scelte: fornire un nome di funzione alla chiave render_callback(come sopra) o fornire un nome di modello nel tuo tema alla chiave render_template. Quindi, se preferisci fare riferimento direttamente a un modello, ad esempio template-parts/block-yourblock.phpnel tuo tema, fallo semplicemente in questo modo e rimuovi render_callback:
Collega il tuo gruppo di campi al blocco registrato
Quando sei soddisfatto del tuo codice di registrazione del blocco, è il momento di collegare il tuo blocco alle impostazioni che hai effettuato in precedenza. Se hai creato i campi in admin, torna indietro e scegli il tuo blocco in Posizione. E se hai aggiunto il gruppo di campi con PHP, in posizione fornisci il valore ‘ acf/yourblock‘ dove yourblockè quello che hai fornito come namesopra.
Scrivi il modello
Il passaggio finale, e il più divertente, è scrivere il modello per l’output del blocco!
La posizione dell’output di rendering del blocco dipende da ciò che hai deciso di utilizzare nella registrazione del blocco render_callbacko render_template.
Se hai fornito un nome di funzione, render_callbackdevi definire questa funzione nel functions.phpcodice del tuo tema o plugin. Ottieni quattro parametri per la tua funzione, come vedrai di seguito:
Il primo parametro, $block, contiene alcune informazioni di Gutenberg. Ad esempio, ogni blocco Gutenberg avrà quasi sempre className, che dovresti impostare come classe sul tuo wrapper più esterno. $block['align']per l’allineamento potrebbe anche essere impostato e qualcosa che vuoi aggiungere. Il secondo parametro, $content, sarà sempre vuoto con ACF (questo verrebbe popolato se si aggiungessero blocchi nidificati, ma non è possibile con ACF). Il booleano $is_previewsarà vero se stiamo attualmente guardando il rendering del blocco in modalità anteprima nell’editor Gutenberg. E infine $post_idè il post in cui viene aggiunto questo blocco.
Per quanto riguarda i campi, recuperi i campi come faresti normalmente, con get_field(). L’output HTML dipende completamente da te e da come desideri generare i tuoi campi.
Se render_templateinvece hai fornito un file modello, crea semplicemente il file nella posizione specificata nel tuo tema. Al suo interno hai accesso alle stesse identiche variabili globali della funzione sopra (ad esempio $block). Per esempio:
E questo è tutto quello che c’è da fare. Ecco com’è semplice creare i tuoi blocchi Gutenberg personalizzati con ACF.
Conclusione
Per quanto sia stato facile, fare affidamento su un plug-in, in particolare a pagamento, non è una buona soluzione finale se si desidera sviluppare temi o plug-in. Tieni presente che i tuoi blocchi smetteranno di funzionare se sposti il codice del tuo tema in un altro WordPress senza ACF Pro. O dove le tue impostazioni sul campo non sono state configurate (a meno che tu non le abbia incorporate nel tuo codice con PHP o assicurati di esportarle e importarle). Come sviluppatore di temi (o plugin) che distribuisce codice, non puoi aspettarti che ogni utente acquisti la propria licenza di ACF Pro per far funzionare il tuo tema! Ma questa è una buona soluzione temporanea per coloro che non possono o non avranno bisogno di programmare.
Se sei convinto di dover fare il passo e imparare Javascript e Gutenberg, dai un’occhiata alla mia introduzione al post di Gutenberg o alla categoria Gutenberg su questo sito per saperne di più.