Blocuri Gutenberg personalizate ușoare folosind Blockstudio și ACF

În acest articol rapid, vreau să trec peste cum să creez un bloc Gutenberg personalizat folosind Blockstudio. Blockstudio este un cadru bloc modern și flexibil pentru WordPress. Odată cu adoptarea lui Gutenberg, capacitatea de a crea rapid blocuri personalizate devine din ce în ce mai importantă. Aceasta este o metodă incredibil de ușoară de a le crea - și deși trebuie să scrieți cod pentru a o face, este mult mai simplă și eficientă cu BS (în comparație cu alte metode).

Acest instrument facilitează nu numai adăugarea blocului, dar și generarea de câmpuri personalizate (aveți de ales între ACF Pro sau Metabox Blocks), salvarea informațiilor în baza de date și aplicarea cu ușurință a stilurilor și scripturilor în linie.

Să aruncăm o privire rapidă asupra modului în care putem realiza un bloc personalizat Gutenberg folosind acest cadru în mai puțin de 5 minute (PS - nu am mai făcut niciodată un bloc personalizat).

Procesul de realizare a unui bloc

Pentru acest site, am nevoie de o modalitate ușoară de a adăuga cod personalizat care să se afișeze pe front-end într-o interfață ușor de înțeles.

De câteva luni, folosesc elementul HTML bloc de cod SPX (asta este folosit mai sus). Este o implementare foarte simplă și ceva care este deja instalat pe acest site, deoarece folosesc SPX pentru unele efecte cu Oxygen. Cu toate acestea, SPX nu vine cu elemente Gutenberg. Deoarece este un element HTML, aș insera o casetă HTML în Gutenberg și apoi aș implementa afișarea codului astfel:

A funcționat, dar am vrut un bloc de cod dedicat pentru Gutenberg. Deci, am folosit Blockstudio + ACF pentru a face asta:

(acesta este blocul pe care îl folosesc în Gutenberg pentru a insera blocurile de cod în această postare)

Noul meu bloc oferă în esență o interfață grafică vizuală pentru a insera codul așa cum făceam cu HTML. Dar, acest bloc îl face mai ușor de gestionat și oferă, de asemenea, un câmp de editor de cod cool direct în Gutenberg.

Iată cum s-a făcut:

Mai întâi, am instalat Blockstudio (plugin) pe Isotropic. De obicei, va căuta un folder în tema dvs. pentru a încărca fișierele bloc personalizate. Cu toate acestea, Oxygen Builder, pe care este construit acest site web, dezactivează complet tema, așa că a trebuit să creez un plugin personalizat din acest boilerplate oficial pentru ca acesta să funcționeze pe acest site web.

Dacă îl instalați din acea sursă, tot ce trebuie să faceți este să începeți să adăugați blocuri în folderul „Blocuri” - și există deja un bloc demo pe care să îl încercați.

Procesul de creare a unui bloc folosind acest cadru are 3 pași - configurați-l, adăugați câmpurile și apoi adăugați marcajul.

Pentru mine, am făcut un fișier numit iso-custom-code.php în folderul Blocuri și am inserat următorul cod (destul de simplu!):

Porțiunea inițială de cod îi oferă lui Gutenberg toate informațiile de care are nevoie pentru înregistrarea blocului în editor. De exemplu, îi puteți da un titlu și o pictogramă. De acolo, am adăugat două câmpuri personalizate. Primul este un câmp radio pe care îl puteți folosi pentru a selecta tipul de cod. Al doilea câmp este un câmp editor de cod.

Acesta nu este un câmp ACF standard, ci un supliment terță parte care utilizează metoda generală ACF pentru a adăuga un tip de câmpuri personalizate. Ceea ce este cu adevărat tare la Blockstudio este că acest câmp personalizat a funcționat din cutie și se afișează direct în editorul Gutenberg.

Este de remarcat faptul că de fapt înregistrați câmpurile personalizate direct în acest bloc. Puteți alege să aplicați un grup de câmpuri unui tip de postare, dar nu este nevoie să intrați în interfața de utilizator ACF și să creați câmpuri acolo, așa cum se face în a doua bucată a acestui cod.

Câmpurile sunt adăugate în același mod în care ați proceda cu PHP normal, iar documentația este relativ ușor de înțeles. Probabil că nici măcar nu trebuie să cunoști acest limbaj de programare pentru a-l putea da seama - https://www.advancedcustomfields.com/resources/register-fields-via-php/

Markup-ul real este doar o inserare standard HTML și PHP a unui câmp ACF personalizat. Și odată ce este salvat, blocul Gutenberg personalizat se va afișa în editor și va fi randat pe front-end. Nu există absolut nicio umflare aici, iar marcarea care este definită în fișierul de blocare personalizat este marcarea care va apărea pe partea frontală a site-ului web.

Beneficiul final este că puteți utiliza caracteristicile native Gutenberg, deoarece blocurile pe care le faceți sunt blocuri Gutenberg reale. Puteți copia și lipi, face reutilizabil și multe altele. În mod rezonabil, ați putea construi un întreg site web folosind acest instrument numai în Gutenberg. Nu există nicio blocare a vânzătorului.

Gânduri despre BlockStudio

Personal, folosesc Gutenberg pentru a gestiona, structura și construi toate postările de blog de pe acest site web. Cu toate acestea, pentru proiectarea și modelarea generală a site-ului, se folosește Oxygen Builder.

Blockstudio vine cu o bibliotecă de câteva blocuri bine construite pe care le puteți folosi ca puncte de plecare pentru propriile creații. Este foarte grozav, deoarece vă oferă o mulțime de exemple de cod pe care apoi le puteți utiliza pentru a le modifica în ceea ce doriți să construiți. Desigur, este un cadru și înțelegerea PHP-ului de bază și a modului în care funcționează îți va face viața mult mai ușoară, dar în opinia mea nu trebuie să-l cunoști pentru a putea construi blocuri cu acest instrument. Tot ce trebuie să știți este cum să copiați și să lipiți din diverse documentații, exemple și surse.

Atât documentația ACF, cât și Blockstudio este incredibil de bine scrisă și ușor de urmărit. Și dacă sunteți mai familiarizat cu pluginul de câmp personalizat MetaBox, acesta va funcționa la fel de bine.

Cred că prețul este justificat pentru flexibilitatea și puterea acestui instrument. Am început de curând să-l folosesc și sunt încântat să încerc funcțiile avansate precum Twind și Alpine.