Creazione di blocchi senza JavaScript: test di ACF, Block Lab e Lazy Blocks

Non tutti sono ancora in grado o disposti a costruire blocchi in JavaScript e talvolta devi installare tre o quattro raccolte di blocchi finché non trovi i blocchi che desideri.

C'è un terzo modo: plugin che creano i blocchi per te da un insieme di campi personalizzati specifici, con un modello per controllare la visualizzazione front-end dei blocchi. Le tre opzioni più popolari per farlo includono: Block Lab, ACF (Advanced Custom Fields) e Lazy Blocks.

Il mio caso d'uso per questo test è un piccolo compito che ho deciso di realizzare con ciascuno dei plugin: creare un blocco per i membri del team di un'azienda che includa i seguenti campi: nome, cognome, primo piano, biografia, numero di telefono, e indirizzo e-mail e utilizzare il blocco su una pagina in un display a due colonne con due membri del team.

Per ogni plugin dimostrerò

• come creare il Fieldgroup,
• come creare il modello per il frontend e
• come utilizzare i blocchi per creare una pagina del team.

Ho usato Local by Flywheel come strumento di sviluppo locale. Il sito di test è stato eseguito su WordPress 5.1.1, Gutenberg 5.4 e Business Theme di WordPress.com

Dopo aver letto questo post sarai in grado di selezionare il plugin adatto alle tue esigenze.

Creazione di un blocco team con Block Lab

I membri del team XWP hanno creato Block Lab ed è disponibile come plug-in gratuito con una versione commerciale. Ho usato prima Block Lab, ho installato il plugin e poi ho avviato un nuovo blocco.

Ecco il video su come allestire i campi.

Il passaggio successivo è la configurazione del modello di blocco

Quando ho esaminato la posizione prevista, il modello verrà inserito nella directory del tema in una sottocartella chiamata /blocks/ È qualcosa che uno sviluppatore deve ricordare, poiché c'è qualche blocco del contenuto quando si cambia tema.

Per creare il modello, ho aperto il mio editor di codice, creato il file block-team-member.php e aggiunto HTML + e PHP minimo per fare riferimento ai campi.

 <h2>
<?php block_field( 'first-name' );?> 
<?php block_field( 'cognome' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'immagine' ); ?>"
 alt="<?php block_field( 'nome' );?> 
<?php block_field( 'last-name' );?> " width="150"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em>Puoi raggiungere <?php block_field( 'first-name' );?></em> 
<br/>via email <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field('indirizzo-email'); ?></a></span>
 o <br/>
via telefono: <span><?php block_field( 'estensione' ); ?></span></p> 

Nell'ultimo passaggio, ho terminato la configurazione di questo blocco con le proprietà del blocco

• Ho impostato l'icona su una persona,
• selezionato gli “Elementi di layout” come Categoria e
• aggiunto "membro del team, team" come parole chiave

Tutto ciò è necessario per l'Inseritore di blocchi nell'editor.

Vediamo come funziona.

Ho aggiunto una nuova Pagina chiamata Meet our Block Lab Team e ho aggiunto i membri del team, utilizzando il Block "Team Member".

Per ora, ho deciso di riempire tutte le informazioni entro i limiti dell'editor di blocchi. Durante l'impostazione del gruppo di campi, ho anche avuto la possibilità di visualizzare i controlli dei moduli nella scheda Opzioni blocco nella barra laterale. Per il momento, ho stabilito che è solo una preferenza personale. Dopo aver fatto clic all'esterno del blocco, il modulo scompare e il blocco viene visualizzato in modo simile alla sua rappresentazione frontend.

Ora che ho finalizzato il blocco, posso aggiungere più membri del team alla pagina. Ho deciso, li vorrei in un blocco di colonne con due colonne.

Fin qui tutto bene. Non ero entusiasta del fatto che la posizione del modello punti alla cartella del tema.

Quando voglio cambiare il tema, vorrei comunque mantenere il blocco e il layout per il blocco con il mio sito, quindi dovrei assicurarmi di copiare la cartella dei blocchi nella directory del nuovo tema. Un altro modo è descritto nella documentazione per Blocklab su Github. Offre due filtri per modificare la posizione predefinita del modello:

"Per utilizzare un modello diverso all'interno del tuo tema, usa il filtro block_lab_override_theme_template( $theme_template ). Per utilizzare un modello diverso al di fuori del tuo tema (ad esempio, in un plug-in), utilizza il filtro block_lab_template_path( $template_path )".

È stato abbastanza facile da configurare, anche se non sei uno sviluppatore PHP, puoi probabilmente utilizzare l'unica funzione PHP block-field() e assicurarti di fare riferimento ai nomi dei campi corretti.

Block Lab, in sostanza, ti fornisce un metodo per creare i campi e configurare le proprietà del blocco in una schermata, quindi devi aggiungere il modello di blocco corrispondente a una cartella /blocks/ nella directory del tuo tema. È abbastanza semplice.

Creazione di un blocco squadra con ACF 5.8

La versione 5.8 di ACF (Advanced Custom Fields) è stata rilasciata con un generatore di blocchi (disponibile solo nella versione Pro). Per il mio test ho usato ACF 5.8 RC 1. La versione finale è ora disponibile. Elliot Condon è l'autore del plug-in e la prima versione è stata rilasciata nel 2011. Il plug-in è diventato uno strumento di sviluppo estremamente popolare sia per i liberi professionisti che per le agenzie e ha oltre 1 milione di installazioni.

Il suo successo e la sua versatilità rendono la creazione del field group un processo più complesso rispetto agli altri due plugin. La versione Pro 5.8 contiene la prima versione del suo strumento per la creazione di blocchi.

Questa è la vista amministratore del gruppo Campo "Membro del team".

Ora come faccio a trasformarlo in un blocco? La documentazione è abbastanza completa. Nota: in questo test sono andato in un ordine leggermente diverso...

Ho iniziato con il Field Group e dovevo tornare a quella schermata di amministrazione dopo aver registrato il blocco (vedi sotto).

Ho usato due file. Innanzitutto, dovevo registrare il blocco nel functions.php del mio tema. Per il codice di rendering del modello/blocco ho utilizzato content-block-team-member.php anche per essere archiviato nella cartella del tema attivo.

Vedrai come quei due si incastrano in un secondo. Il resto del lavoro viene svolto dal plugin nel back-end.

Quindi scriviamo il Block Code in PHP

Il primo snippet è la registrazione del blocco. Gli ho dato un nome, un titolo, una descrizione, un punto al modello di rendering, gli ho assegnato una categoria, un'icona e alcune parole chiave, sotto le quali il produttore di contenuti può trovare il blocco nel Block Inserter. Ho fatto scorrere fino alla fine del functions.php del mio tema e ho aggiunto questo frammento:

 funzione register_acf_blocks() {
   // registra un blocco di membri del team.
   acf_register_block(array(
       'nome' => 'acf-team-member',
       'title' => __('Membro del team ACF'),
       'description' => __('Un blocco di membri del team personalizzato creato tramite ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'categoria' => 'formattazione',
       'icon' => 'commenti-admin',
       'parole chiave' => array( 'membro del team', 'team' ),
   ));
}
// Controlla se la funzione esiste e collega al programma di installazione.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Questo codice è direttamente dalla documentazione e ho appena cambiato alcuni valori.

Nella sezione successiva ho creato il modello di rendering del blocco. Il nome del file deve corrispondere all'attributo "render_template" nel testo sopra, che è " content-block-team-member.php "

Ho anche seguito la documentazione di ACF e ho modificato solo alcuni valori e aggiornato il codice di visualizzazione.

 <?php
// crea l'attributo id per uno stile specifico
$id = 'membro del team' . $blocco['id'];

// crea la classe align ("alignwide") dall'impostazione del blocco ("wide")
$align_class = $blocco['align'] ? 'allineare'. $blocco['align'] : '';

// Carica i valori e assegna i valori predefiniti per i campi del blocco.
$short_bio = get_field('short_bio') ?: 'la breve biografia va qui... ';
$first_name = get_field('first_name') ?: 'Nome';
$cognome = get_field('cognome') ?: 'Cognome';
$immagine = get_field('immagine');
$indirizzo_email = get_field('indirizzo_email');
$estensione = get_field('estensione');
?>

" class="membro del team">
       

   

   " alt="" alt=" " width="150"/>
       
       

       

       
       
   

Quando ho iniziato con il Fieldgroup, dovevo tornare indietro e assicurarmi che il gruppo fosse associato al blocco che avevo appena registrato. Sotto la schermata Fieldgroup ho creato una regola per la Location: Deve leggere: “Mostra questo gruppo di campi se il Block è uguale a ACF Team Member.

Ora vediamo come funziona nell'editor dei blocchi quando aggiungo due membri.

E 'stata un'esperienza interessante. È possibile utilizzare il modulo nella sezione dell'editor per inserire i dati. Un'altra opzione è inserire i dati nei campi del modulo disponibili nella barra laterale e vedrai l'aggiornamento del blocco in tempo reale. Puoi alternare tra i due metodi ma facendo clic sul pulsante "Passa alla modifica" o "Passa all'anteprima" a seconda del metodo che stai utilizzando in questo momento.

L'interfaccia utente dell'editor di blocchi funziona bene. Vale la pena esaminare la configurazione e il codice più elaborati necessari.

Creazione di un blocco squadra con blocchi pigri

Il terzo plugin in questo test si chiama "Lazy Blocks" di Nikita di nkdev.info, lo stesso team che ha anche pubblicato la raccolta di blocchi GhostKit.

Non solo mi consente di memorizzare informazioni in post_content, ma ho anche la possibilità di archiviarle nella tabella post_meta.

Ecco un video sull'utilizzo dell'interfaccia per creare i campi.

Poiché questa schermata di amministrazione è focalizzata sull'ottenere tutte le informazioni per creare i blocchi, a sinistra ho creato i miei campi e nella barra laterale. Ho inserito le informazioni necessarie per registrare un blocco con l'editor.

Sotto, sono stato in grado di aggiungere l'HTML per frontend e backend. La sintassi è persino più semplice di Block Lab e, ovviamente, molto più semplice del template di ACF.

Non avevo bisogno di aggiungere alcun codice al functions.php del mio tema né avevo bisogno di creare file aggiuntivi con il codice del mio modello.

Puoi aggiungerlo tutto qui, aiutato dall'evidenziazione della sintassi e dall'unione dei tag anziché dalle chiamate di funzione. La documentazione mostra diversi modi per scrivere il codice del modello. Sono sicuramente un fan di Handlebars (templating semantico) poiché in questo contesto è molto più vicino ai tag di unione di altri sistemi.

Ho copiato/incollato lo stesso codice nella scheda "Editor HTML", in modo da poter vedere il display del frontend sotto i campi del modulo.

Usiamolo.

Questo sembra funzionare. Era un po' imbarazzante che il modulo non scomparisse quando deselezionavo il blocco. Occupa molto spazio nell'editor. Anche se volevo avere i membri del team in un blocco a due colonne, non sono riuscito a trascinare e rilasciare i due blocchi in un blocco a colonne. Ne ho parlato nel mio argomento di supporto e nK ha risposto: "... nascondere i controlli quando il blocco non è selezionato è una buona funzionalità, che è già stata aggiunta in ACF Blocks e sarà presto aggiunta in Lazy Blocks". Ecco qua, tutto a tempo debito.

Conclusione: complesso, evoluto o facile.

ACF 5.8 ha una funzionalità di creazione di blocchi molto solida e tutti coloro che hanno utilizzato il plug-in per creare siti saranno molto felici di poter creare blocchi dinamici per i propri clienti. È ben pensato e gli sviluppatori di tutti i set di abilità si alzeranno e funzioneranno rapidamente.

Qualcuno, che non è esperto di PHP, avrà la sua giusta dose di tentativi ed errori per far funzionare tutto. Diventerà ancora più complicato quando i requisiti per i blocchi saranno più coinvolti e al di là del caso d'uso di questo test. Questo non è uno strumento per principianti di WordPress o implementatori di siti fai-da-te che non scrivono molto codice da soli.

Per ora, solo la versione ACF 5.8 Pro viene fornita con la funzione di creazione blocchi. Condon sta pensando di renderlo un plug-in autonomo. (Guarda cosa ne pensano i Twitteratti dell'idea... )

Block Lab è nelle sue prime fasi di sviluppo. Riesce ad atrarre la maggior parte dell'architettura a blocchi e riduce la quantità di codice che deve essere scritto. La documentazione è molto utile. Il modello è archiviato in un file separato e deve essere mantenuto con il resto dei file del tema. Se nella mia azienda lo utilizzassimo per uno qualsiasi dei nostri progetti, memorizzeremmo il file modello con uno dei nostri plug-in di supporto, in modo che i nostri clienti possano cambiare tema senza perdere il contenuto e la visualizzazione dei blocchi creati con Block Lab.

La versione Pro vanta funzionalità aggiuntive, come campi ripetitore, importazione/esportazione di blocchi, campi oggetto utente, campo mappa e molte altre funzionalità di blocco.

XWP è un'agenzia che lavora con clienti aziendali sull'hosting VIP di WordPress.com e altre società. I membri del loro team stanno contribuendo ad altre grandi idee nello spazio WordPress, tra cui Customizer, AMP e Tide. Mi aspetto che il plug-in rimanga in circolazione e cresca con Gutenberg Phase 2 in un sistema robusto per implementatori di siti, agenzie e sviluppatori di temi.

Lazy Blocks è un piacere da configurare e, come accennato, sono un fan della sintassi dei modelli di Handelbars. È facile da imparare anche per i principianti e, con un po' di pratica, il proprietario di un sito potrebbe creare blocchi Gutenberg specifici per il proprio sito. La gestione dei blocchi nell'editor, sebbene funzionante, è un po' goffa, poiché al momento il display non alterna tra lo stato di selezione del blocco e lo stato di annullamento della selezione.

Se è necessario disporre di campi aggiuntivi per una pagina o una sezione di un post, Lazy Blocks è un ottimo strumento per creare prototipi e passare rapidamente dall'idea al proof of concept.

L'unico avvertimento: non sono stato in grado di scoprire chi sono le persone dietro nkdev.info e il nome Nikita. Il sito web rivela solo che si tratta di un'azienda giovane ma niente di più. Se utilizzi il plug-in, assicurati di avere il piano B in atto nel caso in cui gli sviluppatori abbandonino il plug-in prima che decolli.

ACF 5.8 è piuttosto complesso; Block Lab è un semi-complesso molto flessibile e unico; e Lazy Blocks ha un nome adeguato e il più facile da usare. Nessuno di questi ti consente di cavartela senza scrivere codice, poiché ogni blocco richiede un output di visualizzazione in HTML.

Fammi sapere cosa ne pensi di questi tre plugin per la generazione di blocchi. Inoltre, se hai trovato un altro plugin che ti permette di costruire blocchi senza entrare in Javascript, voglio saperlo! Per favore condividi i tuoi pensieri e le tue scoperte nei commenti!