Cum se creează un simplu plugin Gutenberg Block

Nu ne place cu toții WordPress? Platforma s-a bucurat de un succes masiv încă de la înființare, dezvoltatorii adăugând noi funcții în mod constant. Una dintre cele mai notabile caracteristici din ultima vreme este editorul de blocuri WordPress, cu numele de cod Gutenberg .

Gutenberg oferă utilizatorilor WordPress un nou mod interesant de a publica conținut și de a vă personaliza site-ul. Este incredibil de ușor de utilizat, ceea ce este o veste excelentă atât pentru începători, cât și pentru dezvoltatori. Dacă utilizați cea mai recentă versiune de WordPress, sunteți deja familie cu editorul de blocuri și conceptul de blocuri.

În mod implicit, editorul de blocuri WordPress vine cu unele blocuri care vă permit să includeți text, imagini, citate, audio, videoclipuri, încorporare și așa mai departe. În plus, există o mulțime de suplimente Gutenberg care vă permit să extindeți editorul fără a transpira.

Totuși, este posibil să aveți o nevoie specifică care vă solicită să vă creați propriile blocuri personalizate. Aici intervine postarea de astăzi. În câteva paragrafe, veți învăța exact cum să creați blocuri Gutenberg personalizate pentru a se potrivi nevoilor dumneavoastră specifice.

Fără mai multe prelungiri, să începem, deoarece sunt multe de învățat.

Ce sunt blocurile, oricum?

Dacă ești începătorul perfect, probabil te întrebi despre ce este vorba în această afacere Gutenberg. Știu, am fost destul de confuz când a fost prezentat Gutenberg. Dar nimeni nu este de vină, eram cu toții obișnuiți cu Editorul clasic că a face schimbarea a fost incomod la început.

Totuși, editorul de blocuri WordPress este aici pentru a rămâne indiferent dacă ne place sau nu. Tocmai de aceea ar trebui să înveți cât mai multe despre Gutenberg (și tot ceea ce vine cu el) pentru a profita la maximum de el.

Blocurile tratează Paragrafele, Titlurile, Media și Încorporarea, toate ca componente care, atunci când sunt înșirate împreună, alcătuiesc conținutul stocat în baza de date WordPress, înlocuind conceptul tradițional de text liber cu media încorporate și coduri scurte. – Manual de editor de blocuri

În trecut, utilizatorii WordPress se bazau pe text și coduri scurte în formă liberă pentru a adăuga conținut. Gutenberg folosește blocuri . Noul editor vă permite să utilizați unități de blocuri pentru a crea machete bogate și flexibile, care sunt ușor de gestionat. În prezent, puteți utiliza editorul de blocuri pentru postări și pagini, dar există planuri active pentru a sprijini editarea întregului site în viitor.

Editorul Gutenberg care arată câteva blocuri

Lucrul cu blocuri face crearea de conținut în WordPress destul de revigorantă. În plus, multe plugin-uri existente acceptă noul editor și vin cu blocuri gata de utilizare, care fac ca adăugarea conținutului din pluginurile menționate să fie o ușoară. Editorul vă permite să glisați și să plasați blocuri pe o pagină, astfel încât să puteți apăsa mai repede butonul de publicare.

La fel ca un generator de pagini integrat direct în WordPress.

Dacă sunteți familiarizat cu constructorii vizuali de pagini, cum ar fi Elementor, probabil că sunteți familiarizat cu conceptul de construire a paginii prin glisare și plasare. Gutenberg este o încercare de a încorpora pe deplin construirea site-ului drag-and-drop în nucleul WordPress. Nu ezitați să consultați Ghidul nostru pas cu pas pentru Gutenberg Builder pentru WordPress pentru a afla mai multe.

Cu asta din drum, haideți să ajungem la cea mai bună parte a postării de astăzi. Să învățăm cum să creăm un bloc simplu. Puteți face acest lucru manual sau folosind plugin-uri precum Genesis Custom Blocks (fost BlockLab), Lazy Blocks sau ACF. Crearea blocurilor personalizate este puțin tehnică, așa că în scopul postării de astăzi, vom folosi un plugin.

Cum se creează un bloc personalizat (folosind blocuri personalizate Genesis)

Este mai ușor să parcurgeți traseul pluginului, deoarece crearea de blocuri personalizate Gutenberg de la zero necesită o bună înțelegere a HTML, CSS, PHP și, mai important, JavaScript. De asemenea, va trebui să înțelegeți React, care le aruncă începătorilor o minge curbă.

Pentru următoarea secțiune, vom folosi Genesis Custom Blocks, care vă este oferit de StudioPress și WPEngine, printre alți dezvoltatori. Versiunea gratuită a Genesis Custom Blocks este disponibilă în depozitul oficial WordPress, ceea ce înseamnă că o putem instala în tabloul de bord de administrare WordPress.

Instalați Genesis Custom Blocks

Conectați-vă la tabloul de bord WordPress și navigați la Plugin-uri > Adăugați nou , după cum se arată mai jos.

Apoi, introduceți „Blocuri personalizate Genesis” în caseta de căutare a cuvintelor cheie și apăsați butonul Instalați acum :

După aceea, activați pluginul pentru a începe petrecerea.

Te descurci bine

Apoi, permiteți-ne să creăm un nou bloc personalizat. În scopuri ilustrative, permiteți-ne să creăm un îndemn personalizat (CTA) pe care îl vom adăuga la sfârșitul fiecărei postări pe care o publicăm. Cea mai bună parte este că puteți reutiliza blocurile pentru a vă scuti de problemele de a crea aceleași blocuri din nou și din nou.

Din meniul dvs. de administrare WordPress, navigați la Blocuri personalizate > Adăugați nou , așa cum evidențiem mai jos.

Procedând astfel, veți ajunge la următoarea pagină unde veți găsi toate opțiunile pentru a crea blocul nostru personalizat (în cazul nostru, un CTA):

Iată câteva cuvinte pentru a explica ceea ce vedeți în captura de ecran de mai sus. Începând de sus, ai.

Zona principală de editare:

• Constructor – Probabil vei petrece mult timp aici proiectând blocul personalizat. Generatorul vă permite să adăugați un titlu, câmpuri, slug, cuvinte cheie, categorie și să previzualizați blocul personalizat. Veți învăța cum să adăugați câmpuri.
• Editor de șabloane – După ce ați proiectat blocul personalizat (adică, adăugați diferite câmpuri), va trebui să creați un șablon de bloc (citiți, adăugați puțin cod) în Editorul de șabloane . Vom afla mai multe când vom proiecta CTA.
• Previzualizare editor - Aceasta vă permite să previzualizați blocul personalizat din editorul de blocuri WordPress.
• Previzualizare front-end – Aici puteți previzualiza cum arată blocul personalizat pe site-ul dvs.
• Câmpuri editor – Va afișa câmpurile din zona principală de editare a unei postări sau a unei pagini (știi, la fel cum vezi postările tale obișnuite în editorul WordPress)
• Câmpuri de inspector – Va afișa câmpul în bara laterală din dreapta sub inspectorul de bloc.

Opțiuni din bara laterală

• Slug – Slug-ul este completat automat pe baza titlului pe care îl dați blocului dvs. personalizat. Este important atunci când creați șablonul bloc.
• Pictogramă – Această opțiune vă permite să adăugați o pictogramă la blocul personalizat.
• Categorie – Aceasta vă permite să atribuiți o categorie blocului dvs. personalizat. Puteți clasifica blocul personalizat folosind una dintre categoriile încorporate sau puteți crea o categorie nouă.
• Cuvinte cheie – Adăugați maximum trei cuvinte cheie legate de blocul personalizat, astfel încât oamenii să-l găsească cu ușurință în selectorul de blocuri.
• Deschideți câmpuri de bloc într-un modal în loc de redare în loc – Activați dacă doriți să deschideți câmpuri într-un modal. Este util dacă aveți un bloc personalizat cu multe câmpuri.
• Tipuri de postare – Bifați casetele pentru a permite afișarea blocului personalizat pe fiecare tip de postare. De exemplu, dacă debifați Postări, blocarea nu va apărea deloc pe nicio postare.

Crearea unui bloc personalizat

Acum că înțelegeți mai bine interfața cu utilizatorul și ceea ce face fiecare parte, să ne suflecăm mânecile și să ne punem la treabă.

În Builder , dă blocului tău personalizat un titlu adecvat. Mă duc cu CTA pentru acesta, așa cum se arată mai jos.

Înainte de a adăuga câmpuri noi, permiteți-ne să adăugăm o pictogramă, cuvinte cheie și să alegem o categorie pentru blocul personalizat, așa cum se arată mai jos.

Acest set, permiteți-ne să adăugăm câteva câmpuri la blocul nostru personalizat. Pentru exemplul nostru de bloc CTA, vom adăuga doar trei câmpuri în următoarea ordine: o imagine, un text și un câmp de fișier care le permite oamenilor să descarce o carte electronică imaginară

Adăugarea câmpurilor blocate

În secțiunea Câmpuri editor , faceți clic pe pictograma Plus (+) pentru a adăuga primul câmp, așa cum se arată mai jos.

Apoi, să adăugăm un câmp de imagine. Din bara laterală, setați Tipul câmpului la Imagine și definiți celelalte opțiuni. De asemenea, luați notă de slug (eu l-am setat pe al meu la image-field ) pentru că îl vom folosi la crearea șablonului de bloc. Vezi imaginea de mai jos.

După aceea, adăugați câmpurile de text și fișier într-un mod similar.

Nu sărbători încă, mai este un pas de făcut. Comutați la Editorul de șabloane > Marcare:

Al meu are deja ceva cod, dar al tău va fi necompletat

Aici, vom proiecta cum arată blocul dvs. personalizat pe site-ul dvs. Editorul de șabloane acceptă HTML, CSS și slug-urile de câmp (pe care trebuie să le includeți în 2 paranteze). Dacă trebuie să utilizați PHP, puteți crea șablonul folosind metoda de șabloane PHP.

Nu-ți face griji, este ușor.

În interiorul Editorului de șabloane , sub fila Markup (vezi imaginea de mai sus), adăugați următoarea bucată de markup HTML (cod):

 <div class="cta-block">
<div class="cta-image">
<img src ="{{câmp-imagine}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Descărcați</button></a>
</div>
</div>

Pe măsură ce scrieți marcajul HTML, veți observa că Editorul de șabloane completează automat slug-urile câmpului (de exemplu {{image-field}}) pentru dvs.

Apoi, accesați secțiunea CSS pentru a adăuga câteva stiluri simple.

Puteți adăuga stilurile dorite, dar cu asta lucrez:

 .cta-block {
text-align:center;
culoare de fundal:portocaliu;
latime:100%;
inaltime:auto;
chenar: 2px portocaliu solid;
}

.dwnld {
culoare de fundal: negru;
chenar: 2px negru solid;
culoare: verde;
umplutură: 5px 10px;
text-align: centru;
display: inline-block;
dimensiunea fontului: 20px;
marjă: 10px 30px;
cursor: pointer;
chenar-raza:2px;

}

Și ești gata! Faceți clic pe Publicare :

Pentru a vedea noul bloc personalizat în acțiune, reveniți la tabloul de bord WordPress și navigați la Postări > Adăugați nou (funcționează și cu pagini):

Creați o postare așa cum faceți de obicei, faceți clic pe Plus (+) pentru a adăuga un bloc nou și alegeți noul bloc personalizat strălucitor, așa cum evidențiem mai jos.

Apoi, completați blocul personalizat după cum doriți și publicați postarea:

Acum, dacă verific noul meu bloc CTA personalizat pe front-end, văd asta:

CTA personalizat este chiar acolo! Vă rugăm să nu vă deranjați de capacitățile mele de design – bineînțeles, într-un scenariu din viața reală, veți dori să petreceți ceva timp suplimentar pentru a vă aranja blocul. Dar sper că ai învățat ceva aici astăzi.

Construirea de blocuri personalizate nu trebuie să fie o sarcină dificilă cu instrumente precum Genesis Custom Blocks și Lazy Blocks, printre altele. Asta, plus că poți face blocurile tale personalizate complexe sau simple, în funcție de nevoile tale. Dacă trebuie să creați manual blocuri personalizate, urmați câteva lecții JavaScript. Va ajuta

Ceva gânduri sau întrebări? Vă rugăm să ne anunțați în comentariile de mai jos.