Crearea blocurilor fără JavaScript: testarea ACF, Block Lab și Lazy Blocks

Publicat: 2019-05-17

Nu toată lumea este încă capabilă sau dispusă să construiască blocuri în JavaScript și, uneori, trebuie să instalați trei sau patru colecții de blocuri până când găsiți blocurile pe care le doriți.

Există o a treia modalitate: pluginuri care creează blocurile pentru tine dintr-un set de câmpuri personalizate specifice, cu un șablon pentru a controla afișarea frontală a blocurilor. Cele mai populare trei opțiuni pentru a face acest lucru includ: Block Lab, ACF (Advanced Custom Fields) și Lazy Blocks.

Cazul meu de utilizare pentru acest test este o sarcină mică pe care mi-am propus să o îndeplinesc cu fiecare dintre pluginuri – să creez un bloc pentru membrii echipei unei companii care să includă următoarele câmpuri: prenume, prenume, fotografie, biografie, număr de telefon, și adresa de e-mail și utilizați blocul pe o pagină într-un afișaj în două coloane cu doi membri ai echipei.

Pentru fiecare plugin voi demonstra

  • cum se creează grupul de câmp,
  • cum se creează șablonul pentru frontend și
  • cum să folosiți blocurile pentru a crea o pagină de echipă.

Am folosit Local by Flywheel ca instrument de dezvoltare locală. Site-ul de testare a rulat pe WordPress 5.1.1, Gutenberg 5.4 și Tema Business de la WordPress.com

După ce ați citit această postare, veți putea selecta pluginul care se potrivește nevoilor dvs.

Crearea unui bloc de echipă cu Block Lab

Membrii echipei XWP au creat Block Lab și este disponibil ca un plugin gratuit cu o versiune comercială. Am folosit mai întâi Block Lab, am instalat pluginul și apoi am început un nou bloc.

Iată videoclipul despre cum să configurați câmpurile.

Următorul pas este configurarea șablonului bloc

Când m-am uitat la locația așteptată, șablonul va fi făcut parte din directorul temei într-un subdosar numit /blocks/. Este ceva ce un dezvoltator trebuie să-și amintească, deoarece există o blocare a conținutului atunci când schimbă teme.

Pentru a crea șablonul, mi-am deschis editorul de cod, am creat fișierul block-team-member.php și am adăugat HTML + și PHP minim pentru a face referire la câmpuri.

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

<p><em>Puteți accesa <?php block_field( 'first-name' );?></em> 
<br/>prin e-mail <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field('adresa-e-mail'); ?></a></span>
 sau <br/>
prin telefon: <span><?php block_field( 'extensie' ); ?></span></p>

În ultimul pas, am terminat configurarea acestui bloc cu Proprietățile blocului

  • Am stabilit icoana unei persoane,
  • selectat „Elementele de aspect” ca categorie și
  • a adăugat „membru al echipei, echipă” ca cuvinte cheie

Toate acestea sunt necesare pentru inserarea blocurilor din editor.

Să vedem cum funcționează.

Am adăugat o pagină nouă numită Meet our Block Lab Team și am adăugat membrii echipei, folosind blocul „Team Member”.

Pentru moment, am decis să am toate informațiile completate în limitele editorului de blocuri. În timpul configurării grupului de câmpuri, am avut și posibilitatea de a afișa controalele formularului în fila Opțiuni bloc din bara laterală. Pentru moment, am stabilit că este doar o preferință personală. Odată ce faceți clic în afara blocului, formularul dispare și blocul este redat similar cu reprezentarea sa de front-end.

Acum că am finalizat blocul, pot adăuga mai mulți membri ai echipei pe pagină. M-am hotărât, le-aș dori într-un bloc de coloane cu două coloane.

Până acum, bine. Nu am fost încântat că locația șablonului indică folderul cu teme.

Când vreau să deschid tema, tot aș dori să păstrez blocul și aspectul blocului cu site-ul meu, așa că ar trebui să mă asigur că copiez folderul blocuri în directorul noii teme. O altă modalitate este prezentată în documentația pentru Blocklab pe Github. Oferă două filtre pentru a schimba locația implicită a șablonului:

„Pentru a utiliza un alt șablon în cadrul temei dvs., utilizați filtrul block_lab_override_theme_template( $theme_template ). Pentru a utiliza un alt șablon în afara temei dvs. (de exemplu, într-un plugin), utilizați filtrul block_lab_template_path( $template_path ).

Acest lucru a fost destul de ușor de configurat, chiar dacă nu sunteți un dezvoltator PHP, puteți utiliza probabil singura funcție PHP block-field() și asigurați-vă că faceți referire la numele câmpurilor corecte.

Block Lab, în ​​esență, vă oferă o metodă de a crea câmpurile și de a configura proprietățile blocului într-un singur ecran, apoi trebuie să adăugați șablonul de bloc corespunzător într-un folder /blocuri/ din directorul temei dvs. Este destul de simplu.

Crearea unui bloc de echipă cu ACF 5.8

ACF (Advanced Custom Fields) versiunea 5.8 a apărut cu un generator de blocuri (disponibil doar în versiunea Pro). Pentru testul meu am folosit ACF 5.8 RC 1. Versiunea finală este disponibilă acum. Elliot Condon este autorul pluginului, iar prima versiune a fost lansată în 2011. Pluginul a devenit un instrument de dezvoltator extrem de popular atât pentru freelanceri, cât și pentru agenții și are peste 1 milion de instalări.

Succesul și versatilitatea acestuia fac din crearea grupului de câmp un proces mai implicat în comparație cu celelalte două plugin-uri. Versiunea Pro 5.8 conține prima versiune a instrumentului său de construire a blocurilor.

Aceasta este vizualizarea de administrator a grupului de câmp „Membru echipei”.

Acum, cum transform asta într-un bloc? Documentația este suficient de cuprinzătoare. Notă: În acest test am mers într-o ordine ușor diferită...

Am început cu Field Group și trebuia să revin la acel ecran de administrare după ce am înregistrat blocul (vezi mai jos).

Am folosit două fișiere. Mai întâi, trebuia să înregistrez blocul în funcțiile.php al temei mele. Pentru codul de randare șablon/bloc am folosit content-block-team-member.php , de asemenea, pentru a fi stocat în folderul temei active.

Veți vedea cum cei doi se potrivesc într-o secundă. Restul lucrării este realizat de pluginul din back-end.

Deci, să scriem codul de bloc în PHP

Primul fragment este înregistrarea blocului. I-am dat un nume, un titlu, o descriere, punct spre șablonul de randare, i-am dat o categorie, o pictogramă și câteva cuvinte cheie, sub care producătorul de conținut poate găsi blocul în Block Inserter. Am derulat până la sfârșitul funcțiilor.php ale temei mele și am adăugat acest fragment:

 funcția register_acf_blocks() {
   // înregistrează un bloc de membri ai echipei.
   acf_register_block(matrice(
       'name' => 'acf-team-member',
       'title' => __('Membru echipei ACF'),
       'description' => __('Un bloc personalizat de membri ai echipei creat prin ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'category' => 'formatare',
       'icoană' => 'comentarii-admin',
       'keywords' => array( 'membru al echipei', 'echipă'),
   ));
}
// Verificați dacă funcția există și conectați-vă la configurare.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Acest cod este direct din documentație și tocmai am schimbat câteva valori.

În secțiunea următoare am creat șablonul de randare bloc. Numele fișierului trebuie să se potrivească cu atributul „render_template” din textul de mai sus, care este „ content-block-team-member.php ”

De asemenea, am urmat documentația ACF și am schimbat doar câteva valori și am actualizat codul de afișare.

 <?php
// creează un atribut id pentru un stil specific
$id = 'membru al echipei' . $block['id'];

// creează o clasă de aliniere ("alignwide") din setarea blocului ("wide")
$align_class = $block['align'] ? 'aliniază'. $block['align'] : '';

// Încarcă valori și atribuie valori implicite pentru câmpurile bloc.
$short_bio = get_field('short_bio') ?: 'biografia scurtă merge aici... ';
$first_name = get_field('first_name') ?: 'Prenume';
$last_name = get_field('last_name') ?: 'Nume';
$imagine = get_field('imagine');
$email_address = get_field('email_address');
$extensie = get_field('extensie');
?>


" class="membru-echipă">
       

   

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

Pe măsură ce am început cu Fieldgroup, trebuia să mă întorc și să mă asigur că grupul este asociat cu blocul pe care tocmai l-am înregistrat. Sub ecranul Fieldgroup am creat o regulă pentru Locație: Trebuie să scrie: „Afișați acest grup de câmp dacă Blocul este egal cu ACF Team Member.

Acum să vedem cum funcționează acest lucru în editorul de blocuri când adaug doi membri.

A fost o experiență interesantă. Puteți folosi formularul din secțiunea editor pentru a introduce datele. O altă opțiune este să introduceți datele în câmpurile de formular disponibile în bara laterală și veți vedea actualizarea blocului în timp real. Puteți comuta între cele două metode, dar făcând clic pe butonul „Comutați la editare” sau „Comutați la previzualizare”, în funcție de metoda pe care o utilizați acum.

Interfața de utilizare a editorului de blocuri funcționează bine. Merită să parcurgeți configurarea mai elaborată și codul necesar.

Crearea unui bloc de echipă cu blocuri leneșe

Al treilea plugin din acest test se numește „Lazy Blocks” de Nikita de la nkdev.info, aceeași echipă care a publicat și colecția de blocuri GhostKit.

Nu numai că îmi permite să stochez informații în post_content, dar am și posibilitatea de a le stoca în tabelul post_meta.

Iată un videoclip despre utilizarea interfeței pentru a crea câmpurile.

Deoarece acest ecran de administrare este concentrat pe obținerea tuturor informațiilor pentru a crea blocurile, în stânga mi-am creat câmpurile și în bara laterală. Am completat informațiile necesare înregistrării unui bloc la editor.

Dedesubt, am putut adăuga codul HTML pentru frontend și backend. Sintaxa este chiar mai ușoară decât Block Lab și, desigur, mult mai ușoară decât șablonul ACF.

Nu a trebuit să adaug niciun cod la funcțiile.php ale temei mele și nici nu a trebuit să creez fișiere suplimentare cu codul șablonului meu.

Puteți adăuga totul chiar aici, ajutat de evidențierea sintaxelor și de îmbinare etichete, mai degrabă decât apeluri de funcție. Documentația arată mai multe moduri de a scrie codul șablonului. Sunt cu siguranță un fan al ghidonelor (șabloane semantice), deoarece în acest context este mult mai aproape de etichetele de îmbinare ale altor sisteme.

Am copiat/lipsat același cod în fila „Editor HTML”, astfel încât să pot vedea afișarea frontend-ului sub câmpurile formularului.

Să-l folosim.

Acest lucru pare să funcționeze. A fost puțin ciudat că formularul nu a dispărut când am deselectat blocul. Ocupă o mulțime de imobile în editor. Deși, am vrut să am membrii echipei într-un bloc cu două coloane, nu am reușit să trag și să plasez cele două blocuri într-un bloc de coloane. Am menționat acest lucru în subiectul meu de asistență și nK a răspuns: „... ascunderea controalelor atunci când blocul nu este selectat este o caracteristică bună, care a fost deja adăugată în Blocuri ACF și va fi adăugată în Blocuri Lene în curând.” Aici îl aveți – totul la timp.

Concluzie: complex, evoluat sau ușor.

ACF 5.8 are o funcție de creare a blocurilor foarte robustă și toți cei care au folosit pluginul pentru a construi site-uri vor fi foarte fericiți să poată crea blocuri dinamice pentru clienții lor. Este bine gândit, iar dezvoltatorii de toate seturile de abilități se vor pune în funcțiune rapid.

Cineva, care nu este bine versat în PHP, va avea parte de încercare și eroare pentru a pune totul în funcțiune. Va deveni și mai complicat atunci când cerințele pentru blocuri se vor implica mai mult și dincolo de cazul de utilizare al acestui test. Acesta nu este un instrument pentru începătorii WordPress sau pentru implementatorii de site-uri DIY care nu scriu ei înșiși mult cod.

Deocamdată, doar versiunea ACF 5.8 Pro vine cu funcția de construire a blocurilor. Condon se gândește să-l transforme într-un plugin independent. (Vezi ce cred Twitteratti despre idee...)

Block Lab se află în stadiile incipiente de dezvoltare. Reușește să abstragă cea mai mare parte a arhitecturii bloc și reduce cantitatea de cod care trebuie scris. Documentația este de mare ajutor. Șablonul este stocat într-un fișier separat și trebuie menținut împreună cu restul fișierelor teme. Dacă noi, cei de la compania mea, l-am folosi pentru oricare dintre proiectele noastre, am stoca fișierul șablon cu unul dintre pluginurile noastre de ajutor, astfel încât clienții noștri să poată schimba temele fără a pierde conținutul și afișarea blocurilor construite cu Block Lab.

Versiunea Pro are caracteristici suplimentare, cum ar fi câmpuri repetoare, import/export de blocuri, câmpuri de obiecte utilizator, câmp de hartă și multe alte funcții de bloc.

XWP este o agenție care lucrează cu clienți enterprise pe WordPress.com VIP hosting și alte corporații. Membrii echipei lor contribuie la alte idei mari în spațiul WordPress, inclusiv Customizer, AMP și Tide. Mă aștept ca pluginul să rămână și să crească cu Gutenberg Phase 2 într-un sistem robust pentru implementatorii de site-uri, agenții și dezvoltatori de teme.

Lazy Blocks este o încântare de configurat și, după cum am menționat, sunt un fan al sintaxei șablonului Handelbars. Este ușor de învățat chiar și pentru începători și, cu puțină practică, proprietarul unui site ar putea crea blocuri Gutenberg specifice pentru site-ul său. Gestionarea blocurilor în editor, deși funcționează, este puțin neplăcută, deoarece afișajul nu comută între starea de selectare a blocului și starea de deselectare în acest moment.

Dacă există o cerință de a avea câmpuri suplimentare pentru o pagină sau o secțiune a unei postări, Lazy Blocks este un instrument excelent pentru a crea prototipuri și a trece rapid de la idee la dovada conceptului.

Singura avertizare: nu am reușit să aflu cine sunt oamenii din spatele nkdev.info și numele Nikita. Site-ul dezvăluie doar că este o companie tânără, dar nimic mai mult. Dacă utilizați pluginul, asigurați-vă că aveți Planul B în vigoare în cazul în care dezvoltatorii abandonează pluginul înainte de a decola.

ACF 5.8 este destul de complex; Block Lab este un laborator foarte flexibil și unic semicomplex; și Lazy Blocks este denumit în mod adecvat și este cel mai ușor de utilizat. Niciuna dintre ele nu vă permite să scăpați fără să scrieți cod, deoarece fiecare bloc are nevoie de o ieșire de afișare în HTML.

Spuneți-mi ce părere aveți despre aceste trei pluginuri care generează blocuri. De asemenea, dacă ați găsit un alt plugin care vă permite să construiți blocuri fără a intra în Javascript, vreau să știu despre el! Vă rugăm să vă împărtășiți gândurile și descoperirile în comentarii!