Facili blocchi Gutenberg personalizzati utilizzando Blockstudio e ACF

In questo rapido articolo, voglio esaminare come creare un blocco Gutenberg personalizzato utilizzando Blockstudio. Blockstudio è un framework a blocchi moderno e flessibile per WordPress. Con l'adozione di Gutenberg, la possibilità di creare rapidamente blocchi personalizzati sta diventando sempre più importante. Questo è un metodo incredibilmente semplice per crearli e, sebbene sia necessario scrivere codice per farlo, è molto più semplice ed efficiente con BS (rispetto ad altri metodi).

Questo strumento semplifica non solo l'aggiunta del blocco, ma anche la generazione di campi personalizzati (a scelta tra ACF Pro o Metabox Blocks), il salvataggio delle informazioni nel database e l'applicazione di stili e script in linea con facilità.

Diamo una rapida occhiata a come possiamo creare un blocco Gutenberg personalizzato utilizzando questo framework in meno di 5 minuti (PS: non ho mai creato un blocco personalizzato prima).

Il processo di creazione di un blocco

Per questo sito Web, ho bisogno di un modo semplice per aggiungere codice personalizzato che venga visualizzato sul frontend in un'interfaccia di facile comprensione.

Per alcuni mesi, ho utilizzato l'elemento HTML del blocco di codice SPX (questo è quello che viene utilizzato sopra). È un'implementazione davvero semplice e qualcosa che è già installato su questo sito Web poiché uso SPX per alcuni effetti con Oxygen. Tuttavia, SPX non viene fornito con elementi Gutenberg. Poiché è un elemento HTML, inserirei una casella HTML in Gutenberg e quindi implementerei la visualizzazione del codice in questo modo:

Ha funzionato, ma volevo un blocco di codice dedicato per Gutenberg. Quindi, ho usato Blockstudio + ACF per fare questo:

(questo è il blocco che sto usando in Gutenberg per inserire i blocchi di codice in questo post)

Il mio nuovo blocco fornisce essenzialmente una GUI visiva per inserire il codice come stavo facendo con HTML. Ma questo blocco semplifica la gestione e offre anche un campo per l'editor di codice interessante direttamente in Gutenberg.

Ecco come è stato fatto:

Per prima cosa, ho installato Blockstudio (plugin) su Isotropic. In genere, cercherà una cartella all'interno del tuo tema per caricare i file di blocco personalizzati. Tuttavia, Oxygen Builder, che è ciò su cui è costruito questo sito Web, disabilita completamente il tema, quindi avevo bisogno di creare un plug-in personalizzato da questo boilerplate ufficiale affinché funzionasse su questo sito Web.

Se lo installi da quella fonte, tutto ciò che devi fare è iniziare ad aggiungere blocchi alla cartella "Blocchi" - e c'è già un blocco demo da provare.

Il processo di creazione di un blocco utilizzando questo framework prevede 3 passaggi: configurarlo, aggiungere i campi e quindi aggiungere il markup.

Per me, ho creato un file chiamato iso-custom-code.php nella cartella Blocks e ho inserito il seguente codice (abbastanza semplice!):

Il blocco iniziale di codice fornisce a Gutenberg tutte le informazioni necessarie per registrare il blocco nell'editor. Ad esempio, puoi assegnargli un titolo e un'icona. Da lì, ho aggiunto due campi personalizzati. Il primo è un campo radio che puoi usare per selezionare il tipo di codice. Il secondo campo è un campo dell'editor di codice.

Questo non è un campo ACF standard, ma un componente aggiuntivo di terze parti che utilizza il metodo ACF generale per aggiungere un tipo di campi personalizzati. La cosa davvero interessante di Blockstudio è che questo campo personalizzato ha funzionato immediatamente e viene visualizzato direttamente nell'editor di Gutenberg.

Vale la pena notare che stai effettivamente registrando i campi personalizzati direttamente in questo blocco. Puoi scegliere di applicare un gruppo di campi a un tipo di post, ma non è necessario accedere all'interfaccia utente di ACF e creare campi lì, come avviene nel secondo blocco di questo codice.

I campi vengono aggiunti nello stesso modo in cui lo faresti con il normale PHP e la documentazione è relativamente facile da capire. Probabilmente non hai nemmeno bisogno di conoscere questo linguaggio di programmazione per essere in grado di capirlo - https://www.advancedcustomfields.com/resources/register-fields-via-php/

Il markup effettivo è solo un inserimento HTML e PHP standard di un campo ACF personalizzato. E una volta salvato, il blocco Gutenberg personalizzato verrà visualizzato nell'editor e verrà visualizzato sul front-end. Non c'è assolutamente alcun rigonfiamento qui e il markup definito nel file di blocco personalizzato è il markup che verrà visualizzato sul front-end del sito Web.

Il vantaggio finale è che puoi utilizzare le funzionalità native di Gutenberg poiché i blocchi che crei sono veri e propri blocchi di Gutenberg. Puoi copiare e incollare, rendere riutilizzabile e altro ancora. Ragionevolmente, potresti creare un intero sito Web utilizzando questo strumento solo in Gutenberg. Non c'è nemmeno il blocco del fornitore.

Considerazioni su BlockStudio

Personalmente, sto usando Gutenberg per gestire, strutturare e creare tutti i post del blog su questo sito web. Tuttavia, per la progettazione e la creazione di modelli generali del sito, viene utilizzato Oxygen Builder.

Blockstudio viene fornito con una libreria di alcuni blocchi ben costruiti che puoi utilizzare come punti di partenza per le tue creazioni. Questo è davvero interessante perché ti offre un sacco di esempi di codice che puoi quindi utilizzare per modificare in ciò che stai cercando di costruire. Certo, è un framework e capire il PHP sottostante e come funziona ti semplificherà la vita, ma secondo me non è necessario conoscerlo per essere in grado di costruire blocchi con questo strumento. Tutto quello che devi sapere è come copiare e incollare da varie documentazioni, esempi e fonti.

Sia la documentazione di ACF che quella di Blockstudio sono incredibilmente ben scritte e facili da seguire. E se hai più familiarità con il plug-in del campo personalizzato MetaBox, funzionerà altrettanto bene.

Penso che il prezzo sia giustificato dalla flessibilità e dalla potenza di questo strumento. Ho appena iniziato a usarlo di recente e sono entusiasta di provare le funzionalità avanzate come Twind e Alpine.