[Ce sunt] WordPress Gutenberg Blocks & Cum să le folosești bine

Editorul WordPress Gutenberg a sosit cu WordPress 5.0 în decembrie 2018. Cunoscut mai frecvent ca „editor de blocuri”, noua caracteristică schimbă pagina și creează postarea de la designul simplă al cutiei versiunilor anterioare la o experiență mai asemănătoare constructorului de pagini.

Gutenberg blocks oferă acum o abordare modulară pentru crearea de conținut. În loc să utilizați cod pentru a adăuga un alt element pe o pagină, puteți schimba un bloc în schimb. De exemplu, puteți schimba un bloc de text pentru un bloc video sau un tabel la fel cum ați face atunci când creați o pagină Beaver Builder sau Elementor. Este o evoluție care a urmat mult timp, dar acum este aici vă veți întreba rapid cum ați creat vreodată pagini fără ea!

Gutenberg blocks

Dacă actualizați versiunea WordPress 5.0 și versiunile ulterioare și ar trebui să faceți acest lucru, veți observa că interfața de utilizare a evoluat puțin. Veți vedea în continuare meniul lateral tradițional în stânga și meniul de conținut în dreapta, dar în centru, totul sa schimbat.

Înainte de actualizare, ați văzut un titlu și o casetă de conținut goale în care v-ați construit pagina sau postarea. Acum veți vedea o secțiune goală în centru cu un bloc de titlu și un bloc de text deja populate. Meniul din dreapta se va schimba dinamic în funcție de ceea ce faceți. La început, arată categoriile tradiționale, eticheta și opțiunile pentru imaginea caracteristică ca înainte, dar acum introduce o filă Blocare.

Fila Blocare vă permite să editați blocul individual, precum acei constructori de pagini care oferă multă libertate în ceea ce privește designul. Ceea ce vedeți în fila Blocare depinde de blocul în cauză, dar toți vor avea opțiunea de a adăuga CSS personalizat.

Gutenberg blocks introduceți o abordare cu adevărat modulară în proiectarea paginilor. Aveți opțiunea de a continua să faceți lucrurile în același mod sau de a vă scufunda mai adânc. Puteți modifica fiecare bloc pentru a arăta subtil sau semnificativ diferit sau pentru ca toate să funcționeze ca o cusăturăless întreg. Este un sistem foarte puternic și iertător.

Cum să utilizați Gutenberg blocks

Lucrul grozav despre reproiectarea WordPress este că este suficient de similar cu modul în care lucrurile au funcționat înainte ca interfața de utilizare să fie încă familiară. Chiar dacă nu v-ați familiarizat cu noile blocuri, puteți adăuga în continuare titlul paginii, adăugați conținutul, adăugați coduri și widgeturi și publicați ca înainte. S-ar putea să arate puțin diferit, dar funcționează la fel.

Acest lucru este ideal pentru bloggerii ocazionali sau pentru cei noi pentru WordPress. Deoarece un element cheie al CMS este ușurința sa de utilizare, dezvoltatorii au reușit cumva să adauge funcții mai avansate fără a face ca sistemul general să fie mai greu de utilizat.

Puteți crea în continuare o pagină în câteva minute folosind opțiunile implicite, dar acum puteți merge mult mai adânc, fără a fi nevoie să învățați o linie de cod sau chiar să știți cum arată un shortcode.

Aceste lucruri sunt cele care fac Gutenberg blocks atât de util.

Puteți folosi fie Gutenberg blocks sau nu.

Setarea implicită a paginii și a postării înseamnă că puteți preformata conținutul paginii în altă parte și pur și simplu copiați și lipiți pe pagină. Lipiți titlul în blocul de titlu și conținutul paginii în blocul de text. Dacă de asta aveți nevoie, procesul de creare este la fel de simplu ca înainte. Dacă doriți să mergeți mai departe, puteți.

Dacă doriți să vă scufundați în modul în care funcționează editorul de blocuri, veți vedea câteva alte opțiuni:

• Selectați pictograma mică „+” de lângă blocul central pentru a adăuga un bloc nou.
• Selectați „H” pentru a adăuga un titlu.
• Selectați pictograma listă pentru a adăuga o listă la bloc.
• Selectați pictograma imagine pentru a adăuga o imagine.

Toate aceste patru opțiuni sunt disponibile din meniul de conținut, dar dacă le aveți disponibile pentru fiecare bloc, vă puteți crea conținutul în orice design doriți. Blocurile individuale individuale pot fi editate și încadrate individual și fiecare va fi reflectat în pagina finalizată.

Asta e ceva Elementor (și constructorilor de pagini le place, cum ar fi Divi) fac de ani de zile cu mare efect. Acum puteți face cam același lucru în WordPress.

Puteți găsi mai multe despre Divi în nostru Elegant Themes comentarii.

Crearea unei pagini utilizând editorul de blocuri este simplă:

1. Selectați Pagină nouă sau Postare nouă din meniul lateral WordPress.
2. Scrieți sau lipiți titlul paginii în blocul de titlu.
3. Scrieți sau lipiți conținutul în blocul de text.
4. Selectați pictograma „+” din dreapta blocului pentru a adăuga un bloc nou.
5. Selectați cel mai potrivit bloc din caseta pop-up.
6. Completați elementele blocului principal din panoul central.
7. Selectați pictograma cu trei puncte din partea de sus a blocului pe care l-ați adăugat pentru a schimba designul sau a personaliza.
8. Pentru a adăuga CSS personalizat, selectați Avansat din meniul din dreapta.
9. Selectați Publicați de două ori pentru a intra în direct.

În timp ce folosirea editorului de blocuri este foarte simplă, vă puteți scufunda mult mai adânc dacă este necesar. Acea pictogramă de meniu cu trei puncte de la fiecare bloc deschide o multitudine de opțiuni de personalizare, în funcție de bloc. Poti duplicat blocul, introduceți alte blocuri înainte sau după, modificați atributele HTML, grupați blocurile împreună și multe altele în funcție de opțiunile disponibile.

Mai mult, alături de blocurile standard care vin cu WordPress, dezvoltatorii își pot crea propriile pluginuri de blocuri. Având în vedere talentul imens al utilizatorilor și dezvoltatorilor WordPress, există deja o mulțime de pluginuri de blocare disponibile după doar un an de utilizare.

Blocuri utilizate în mod obișnuit

WordPress a inclus o serie de blocuri care acoperă crearea principalelor pagini. Fiecare face o lucrare ușoară de a adăuga diferite elemente de pagină, permițând în același timp caracteristici de proiectare personalizate numai pentru acel bloc. Este o opțiune de editare puternică, care poate fi folosită cu un efect excelent.

Standardul Gutenberg blocks în cadrul WordPress includ:

• Bloc text - Blocul de conținut tradițional unde puteți lucra exact ca înainte și modificați folosind HTML sau coduri scurte.
• Titlu - Blocuri de titlu cu setările standard H1, H2, H3, H4.
• Listă - Un bloc separat pe care îl puteți utiliza pentru a crea liste remarcabile fie ordonate, fie neordonate.
• Galerie - Un bloc de galerie care a permis formatarea personalizată a imaginilor pentru a se potrivi conținutului paginii dvs.
• Imagine - Un bloc de imagine specific care funcționează într-un mod similar cu galeria, dar pentru imagini individuale.
• Citat - Un bloc remarcabil care vă permite să evidențiați citate sau recenzii într-o pagină.
• Audio - Un bloc specific pentru a face clic pentru a reda clipuri audio în conținutul paginii.
• Acoperi - Un nou bloc care vă permite să plasați o imagine de copertă pentru pagina sau postarea dvs. care poate completa imaginea prezentată.
• Video - Un bloc video care funcționează ca audio și simplifică prezentarea videoclipurilor într-o pagină sau într-o postare.

Tot ce poți face cu Gutenberg blocks obișnuiai să poți face cu editorul original, dar nu era întotdeauna ușor de utilizat sau accesibil pentru noii utilizatori. Acest design de bloc face ușor pentru oricine să își construiască paginile într-un mod logic și liniar.

Cele mai bune pluginuri pentru blocuri Gutenberg

WordPress standard Gutenberg blocks acoperiți cea mai mare parte din ceea ce este posibil să aveți nevoie din CMS. Cu toate acestea, am menționat mai devreme că dezvoltatorii au început, de asemenea, să producă propriile pluginuri pentru blocuri Gutenberg pentru a adăuga și mai multe caracteristici. Există zeci de blocuri de pluginuri de diferite calități și am adunat aici unele dintre preferatele noastre.

Să aruncăm o privire la unele dintre acestea acum.

Ne vom uita la:

1. Blocuri set de instrumente
2. Blocuri finale
3. Completele finale pentru Gutenberg
4. Avansat Gutenberg Blocks
5. Stackable Gutenberg Blocks
6. Blocuri atomice
7. Blocuri de vidră
8. Blocuri de Templatic
9. Blocuri Kadence

Multe dintre aceste pluginuri pentru blocuri Gutenberg sunt complet gratuite, în timp ce altele vor oferi blocuri gratuite cu opțiunea de a face upgrade la blocuri premium mai avansate. Am menționat în fiecare descriere cele care sunt gratuite și unde există opțiuni premium.

Fiecare se va instala în același mod în care instalați orice alt plugin WordPress. Selectați-l din WordPress.org și instalați și activați sau descărcați fișierele pe computer și încărcați-le în instalarea dvs. WordPress. Odată instalat, ar trebui să vedeți că noile opțiuni de blocare apar cu standardul blocat atunci când selectați „+” într-o pagină.

1. Blocuri set de instrumente

Blocuri set de instrumente este unul dintre pluginurile noastre preferate de editor de blocuri pentru WordPress. Este un plugin premium care demonstrează că, deși puteți obține lucruri bune gratuit, uneori merită să plătiți un pic suplimentar pentru putere și comoditate. Pluginul se instalează în același mod ca și alte pluginuri și va adăuga noile blocuri în meniul existent.

Blocurile includ tipuri de posturi personalizate, taxonomie personalizată, câmpuri personalizate, șabloane, vizualizări, paginare, derulare infinită, blocuri Ajax, WooCommerce, Google Maps, formulare, plăți și chiar control acces. Unele dintre aceste blocuri nu le veți găsi în niciun plugin gratuit, motiv pentru care am evidențiat Toolset Blocks.

Una dintre cele mai bune caracteristici ale Toolset este capacitatea de a crea conținut generat dinamic FĂRĂ să fie nevoie să faceți orice cod PHP personalizat. Toolset se integrează direct cu Editorul de blocuri WordPress și vă permite să extrageți conținut dinamic de oriunde.

Ca câteva exemple, despre ceea ce puteți face: 

• Creați titluri pe baza titlurilor
• Setați textele butoanelor și CTA-urile din câmpurile personalizate
• Setați surse de imagine pentru câmpuri sau câmpuri personalizate
• etc

Următorul videoclip este o explicație excelentă a capabilităților Toolset Blocks:

Cei mai mulți dintre noi știu cât de puternice pot fi câmpurile personalizate și tipurile de postări și este superb să putem implementa acest lucru într-o pagină. Pe lângă formulare, machete, vizualizări, controale de acces și alte caracteristici puternice, este incredibil de ușor să recomandați acest plugin, chiar dacă este un produs premium.

Ocazional gratuit nu este cel mai bun preț și acesta este unul dintre acele timpuri.

2. Blocuri finale

Blocuri finale este lansat la bloggeri, dar ar funcționa la fel de bine pe orice site web WordPress. Pluginul este gratuit și conține o selecție de blocuri de editare promoționale și foarte utile, care sunt ideale pentru bloggeri, dar s-ar putea dovedi, de asemenea, utile pentru specialiștii în marketing, site-urile de comerț electronic, întreprinderile mici și oricine dorește ca conținutul lor să iasă în evidență.

Blocurile includ recenzii, cuprins, apeluri la acțiune, comutare de conținut, glisor de imagini, fișiere de conținut, mărturii, partajare socială, temporizatoare cu numărătoare inversă, bare de progres, grile de postare și evaluări de stele. Dezvoltatorul spune că și ei au mai multe pe drum.

Ultimate Blocks are un alt truc în mânecă în managerul său de blocuri. O interfață simplă care vă ajută să activați sau să dezactivați blocurile pentru a simplifica crearea paginii. Înseamnă că puteți descărca colecția și puteți activa numai blocurile pe care probabil le veți utiliza, păstrând pagina fără dezordini în timp ce creați.

3. Gutenberg Blocks - Completele finale pentru Gutenberg

Gutenberg Blocks - Completele finale pentru Gutenberg este de la aceiași dezvoltatori ca și superbul Tema Astra WordPress. Pluginul gratuit adaugă o gamă largă de blocuri pentru utilizarea de zi cu zi, care sunt simplu de utilizat și oferă o gamă largă de opțiuni de personalizare. Toate vor funcționa și cu Astra, ceea ce este grozav dacă utilizați acea temă.

Blocurile includ infobox-uri, butoane, titluri avansate, blocuri de echipă, prețuri, distribuiri sociale, mărturii, liste de pictograme, blocuri Gravity Form, blocuri de marketing, cotații, îndemnuri, blocuri Formular de contact 7, Google Maps și multe altele.

Dezvoltatorii spun că aceste blocuri au fost optimizate pentru viteza paginii, oferind în același timp cusăturiless integrarea cu tema Astra și în cadrul oricărei alte teme. Aveți opțiuni de personalizare similare cu aceste alte pluginuri pentru a glisa blocuri în paginile existente. Numai acest lucru face ca acest plugin să merite verificat.

4. Gutenberg avansat

Gutenberg avansat de la Joom United adaugă peste douăzeci de blocuri de editor ca un plugin WordPress gratuit. Există o gamă decentă de opțiuni aici, de la coloana obișnuită și titlu până la blocuri mai avansate. Sunt bine concepute, cu o interfață minimă, care oferă cumva toate opțiunile de personalizare de care probabil veți avea nevoie.

Blocurile includ profiluri de autor, blocuri CCS personalizate, WooCommerce, butoane avansate, formulare de contact, liste avansate, hărți, mărturii, contoare, blocuri de autentificare și înregistrare, blocuri video și de imagini, partajare și conectare socială, rezumate postate, bloc Lightbox și multe altele .

Fiecare integrează cusăturălessIntr-o pagină și vine complet cu opțiunea avansată de personalizare utilizând meniul cu trei puncte. Opțiunile exacte diferă în funcție de blocul în cauză, dar acoperă cele mai frecvente situații, culoare, dimensiune, liniuță, aliniere și așa mai departe.

5. Stivuibil Gutenberg Blocks

Stackable Gutenberg Blocks a fost o altă sosire timpurie la actualizare și a lansat câteva blocuri personalizate foarte utile pentru editorul WordPress. Majoritatea blocurilor stivuibile sunt gratuite, dar dezvoltatorul oferă și câteva blocuri premium care se adresează utilizărilor specifice, dacă aveți nevoie de ele.

Blocurile gratuite includ blocuri de postări, grilă de caracteristici, acordeon, chemare la acțiune, card, antet, fereastra pop-up video, bloc de prețuri, bloc de notificare, distanțier, divizor, listă de caracteristici și altele. În total sunt 23 de blocuri gratuite.

Ca un beneficiu suplimentar, Stackable este un sistem modular, astfel încât să puteți adăuga blocurile de care probabil aveți nevoie, lăsându-le pe celelalte. Acest lucru poate avea un mic avantaj de stocare și viteză a paginii, în funcție de modul în care este configurat site-ul dvs. web. Oricum ar fi, este o funcție adăugată drăguță, care poate menține lucrurile subțiri în partea din spate.

6. Blocuri atomice

Blocuri atomice a fost un altul dintre primele pluginuri de pe scenă și oferă acum 15 blocuri gratuite și câteva teme WordPress pentru a completa această nouă libertate de design. Blocurile includ mărturii, prețuri, buletin informativ, grilă de postare, coloane avansate, pictograme de partajare, îndemn, profil de autor și alte blocuri utile.

Pluginul este gratuit, la fel ca majoritatea temelor. Odată instalat, veți vedea o nouă serie de blocuri în secțiunea de blocuri a unei noi pagini sau postări. Căutați AB Post Grid etc. pentru a identifica caracteristicile blocului atomic.

La fel ca aceste alte pluginuri de blocuri de editor, puteți personaliza aspectul acestora în meniul avansat. Aveți opțiuni similare în ceea ce privește opacitatea, culoarea, poziționarea și așa mai departe, cu avantajul suplimentar al alegerilor suplimentare dacă utilizați o temă Atomic Block. Este o caracteristică suplimentară minoră, dar este acolo!

7. Gutenberg Blocks și Biblioteca de șabloane de Otter

Gutenberg Blocks și Biblioteca de șabloane de Otter este o gură de nume mult mai digerabilă din punct de vedere al caracteristicilor. Este un plugin gratuit, ușor, care include câteva blocuri bine proiectate, care se bazează pe cele oferite de WordPress doar cu mai multe opțiuni de proiectare.

Blocurile includ secțiuni, titluri avansate, butoane, prețuri, mărturii, Google Maps, blocuri bio de autor, post grid, Font Awesome, partajare și bloc de card. Toate sunt optimizate atât pentru viteza paginii, cât și pentru funcții și, deși sunt ușoare pentru aceste caracteristici, acestea sunt un supliment excelent la blocurile implicite.

Există personalizări suplimentare și câteva opțiuni de bibliotecă pentru fiecare bloc. Puteți modifica fiecare bloc în funcție de nevoile dvs. specifice sau puteți utiliza o opțiune de bibliotecă pentru a lua un design gata de utilizare și a-l utiliza în cadrul blocului. Este rapid și foarte simplu.

8. Blocuri de Templatic

Blocuri de către dezvoltatorul Templatic este o altă intrare solidă în lista noastră de superbe pluginuri pentru blocuri Gutenberg. Avem mult respect pentru temele template și aceste blocuri vor funcționa cu sau fără una dintre temele lor. Dacă utilizați o temă templatică, aceste blocuri alunecă direct și sunt bune. Dacă nu utilizați o temă Templatic, aceste blocuri vor integra în continuare cusăturalessîn designul tău.

Blocurile sunt gratuite și includ o biografie a autorului, alerte, partajare pe rețelele sociale, separatoare, imagine de copertă, opțiuni de titlu, hartă, prețuri, butoane și un bloc Tweet Fiecare are caracteristicile de bază din față și centru, cu personalizări disponibile prin meniu. Sunt foarte simple de utilizat și vor apărea alături de toate blocurile implicite din noua pagină sau ecranul de postare.

Există câteva blocuri bune aici, dar pluginul nu a fost actualizat de aproape un an. Acestea funcționează cu versiunea actuală a WordPress, deoarece le-am testat la timp pentru acest articol, dar nu știm când vor sosi noi blocuri.

9. Blocuri Kadence

Blocuri Kadence are atât opțiuni gratuite, cât și premium care susțin blocurile implicite din WordPress. Versiunea gratuită are douăsprezece blocuri și un editor încorporat, în timp ce versiunea premium de 59 USD pe an adaugă șapte blocuri premium, opțiuni de animație unice și suport. Există, de asemenea, o a treia opțiune, pentru 99 USD pe an puteți accesa toate blocurile de editare premium plus toate temele și produsele Kadence.

Blocurile includ blocuri de aspect de pagină, casete de informații, galerii avansate, mărturii, blocuri video, acordeon, butoane, file, pictograme, titluri avansate și imagini. Versiunea premium adaugă blocuri de rețea și carusel, carusele de produse, blocuri de modele, suprapuneri de imagini, conținut împărțit și ferestre pop-up video.

Fiecare bloc are o secțiune de editare personalizată, unde puteți schimba poziția, conturul, culoarea, dimensiunea imaginii, opacitatea și o serie de alți factori. Dacă lucrați într-un anumit design sau cadru, puteți implementa blocuri în acel design cu ușurință folosind editorul.

Rezumatul Gutenberg blocks și pluginurile lor

Gutenberg blocks sunt o evoluție excelentă a WordPress. Ei iau tot ceea ce știm și ne place despre crearea rapidă a paginii sau a postărilor și o împing înainte. WordPress oferă în continuare semnăturii sale ușurința de utilizare și bariera redusă la intrare pentru începători, oferind în același timp utilizatorilor mai experimentați sau orientați spre design posibilitatea de a se remarca. Acest echilibru între formă și funcție merită sărbătorit.

La fel ca pluginurile pentru blocuri Gutenberg pe care le prezentăm în această listă. Pluginurile gratuite oferă aproape tot ce aveți nevoie de la crearea paginii. Posibilitatea de a sparge o pagină sau de a posta în componente individuale și de a stiliza fiecare individual până când este pur și simplu perfectă.

Chiar și acele pluginuri premium merită costul. Acestea tind să ofere standarde mai ridicate în ceea ce privește designul și utilizabilitatea, precum și unele blocuri care nu sunt disponibile în altă parte. În timp ce este premium, Toolset Blocks se remarcă prin faptul că oferă o serie de blocuri pe care nu le veți găsi în niciun plugin gratuit, cum ar fi căutarea, controlul accesului, WooCommerce și postările personalizate și câmpurile personalizate.

Aveți un plugin preferat pentru blocul Gutenberg? Îți place unul pe care nu l-am menționat aici? Spuneți-ne despre ele mai jos dacă faceți acest lucru!

Despre autor

Autor: Jamie KavanaghSite-ul: https://www.coastalcontent.co.ukE-mail: jamie@collectiveray.com

Jamie, inginer de educație, este principalul nostru scriitor tehnic și cercetător. Jamie conduce, de asemenea, Coastal Content, o companie de marketing de conținut, copywriting și web design cu sediul în Cornwall, în Regatul Unit.