Elementele de bază ale constructorului: explorarea tiparelor de bloc

Cea mai recentă versiune de WordPress va sosi la sfârșitul lunii pe 25 ianuarie. Poate că până când citiți acest lucru, versiunea 5.9 a fost deja lansată în lume. Nu aș putea fi mai entuziasmat. Există nenumărate îmbunătățiri și funcții noi, multe dintre care le vom acoperi în articolele viitoare, dar subiectul de astăzi este „modelele” de blocuri.

Deși nu sunt noi pentru WordPress, modelele primesc multă atenție datorită funcționalității activate de versiunea 5.9, în special temelor bazate pe blocuri. Modelele devin rapid o componentă fundamentală a WordPress în sine și par gata să se remodeleze astfel încât proiectăm și construim site-uri web. Deci, ce moment mai bun pentru a explora ce sunt cu adevărat modelele de bloc și cum le puteți folosi?

Cele elementare

Înainte de a ne scufunda în modelele de bloc, să începem cu elementele de bază și să stabilim o terminologie. WordPress s-a schimbat destul de mult în ultimii ani. Este bine să ne asigurăm că suntem cu toții pe aceeași pagină.

bloc

Un bloc este „unitatea” fundamentală de conținut în WordPress. De la un paragraf de text la o galerie de imagini, un bloc poate lua aproape orice formă. Îmi place să-mi imaginez o singură bucată de LEGO . În timp ce fiecare bloc poate arăta diferit sau poate îndeplini o funcție unică, toate se potrivesc frumos, creând conținutul unei pagini web.

Model

Un model de bloc este pur și simplu o colecție predefinită de blocuri care formează un aspect specific. Un model poate fi un singur bloc sau format din mai multe. După cum vom vedea mai târziu, modelele fac construirea unor aspecte complexe de pagină ușoară și distractivă.

Editor

Editorul este interfața cu utilizatorul pe care o folosim pentru a crea pagini și postări din blocuri. De la introducerea sa în WordPress 5.0 până în 2018, Editorul a fost numit cu multe nume. Acestea includ Gutenberg, Gutenberg Editor, Block Editor și altele. În scopul acestui articol, vom folosi pur și simplu termenul „Editor”.

Inserator

În Editor, Insererul este folosit pentru a adăuga blocuri și modele în pagină. Puteți accesa Inserer făcând clic pe semnul albastru (+) din colțul din stânga sus al Editorului.

Captura de ecran de mai jos ilustrează termenii definiți.

De ce blocați modelele?

Editorul ne dă putere să construim practic orice design din blocuri, fie că este o simplă postare pe blog sau o pagină de destinație elaborată. Să folosim chiar acest articol ca exemplu. Ceea ce citiți acum este un bloc Paragraf. Titlul de mai sus este un bloc Heading, iar captura de ecran este doar un bloc Imagine. Adăugarea acestor elemente de conținut pe pagină a fost ușoară. Am deschis Insererul, am găsit blocul corespunzător și am făcut clic pentru a insera.

Sfat rapid: Știați că blocurile pot fi inserate și folosind comanda slash? Începeți un nou paragraf cu tasta „/” și va apărea o listă de blocuri disponibile. Tastarea de litere suplimentare va optimiza rezultatele căutării. Incearca!

Ce zici de ceva un pic mai complicat? Luați în considerare următorul tabel de prețuri, un design folosit în mod obișnuit pentru a prezenta produse sau servicii pe un site web.

Priviți cu atenție și s-ar putea să recunoașteți blocurile individuale care au fost folosite pentru a crea acest aspect. Baza este un bloc de coloane cu trei coloane la distanță egală. În interiorul fiecărui bloc Coloane se află un bloc Separator, Titlu, Paragraf, Butoane și Distanțiere. Câte ai reușit să vezi?

De fapt, acest tabel de prețuri este format din 25 de blocuri individuale. Indiferent de nivelul tău de calificare cu WordPress, replicarea acestui aspect de la zero ar fi atât obositoare, cât și puțin provocatoare.

Acum imaginați-vă dacă acest grup de 25 de blocuri a fost deja configurat pentru dvs. Cu un singur clic, puteți introduce tabelul complet de prețuri și îl puteți modifica pentru a se potrivi nevoilor dumneavoastră individuale. Și mai bine, ce se întâmplă dacă ar fi o colecție vastă de modele la îndemână, fiecare potrivindu-se cu estetica temei tale? Gândiți-vă la aspecte creative de imagine și text, îndemnuri, anteturi, subsoluri și chiar aspecturi de pagină completă. Având acest tip de „conținut de pornire” ar economisi mult timp și chiar ar face Editorul mai accesibil pentru utilizatorii WordPress mai noi.

Aici intervin modelele de bloc. Tabelul de prețuri de mai sus este de fapt un model care este inclus în următoarea temă Twenty Twenty-Two, care va fi lansată împreună cu WordPress 5.9!

Sper că acest mic exercițiu a ilustrat de ce sunt atât de încântat de potențialul tiparelor bloc, dar cum le folosim de fapt?

Cum să utilizați modelele

La fel ca blocurile, modelele pot fi adăugate la o pagină folosind Inserer. Cu dispozitivul de inserție deschis, navigați la fila „Modele” care dezvăluie toate modelele disponibile segmentate pe categorii. Selectați aspectul potrivit pentru dvs. și faceți clic pentru a insera. Puteți edita apoi blocurile individuale care alcătuiesc modelul, la fel ca orice alt bloc. Nu există limită pentru numărul de modele pe care le puteți introduce. Combinați și potriviți pentru a crea modele de pagină unice.

În timp ce dispozitivul de inserție oferă acces ușor la modelele de bloc, veți observa că previzualizarea fiecărui model este destul de mică și toate sunt stivuite într-o singură coloană. Poate fi dificil să vizualizați și să comparați machetele, ceea ce face dificilă alegerea celei potrivite.

Pentru a rezolva această problemă, WordPress 5.9 include Pattern Explorer. Această nouă funcție interesantă poate fi accesată făcând clic pe butonul „Explorare” de lângă meniul drop-down de categorii din fila „Modele”.

Explorer deschide o fereastră modală care oferă o experiență de navigare îmbunătățită cu modelele afișate într-o grilă. Ele pot fi, de asemenea, căutate sau filtrate cu ușurință pe categorii.

Captura de ecran de mai sus este prima iterație a Pattern Explorer. Versiunile viitoare WordPress sunt de așteptat să extindă funcționalitatea Explorer. Experimentele actuale adaugă previzualizări pentru dispozitive mobile/tablete și opțiunea de a modele demo în mod individual, spre deosebire de aspectul grilei. Deși nimic nu este confirmat, fii atent pentru îmbunătățiri suplimentare în WordPress 6.0 spre mijlocul anului 2022.

Cu toată această discuție despre tipare, s-ar putea să vă întrebați, de unde provin ele de fapt?

Unde să-i găsești

Modelele să fie înregistrate într-unul din trei moduri, fie prin tema curentă, un plugin terță parte sau WordPress însuși prin directorul de modele. Să explorăm fiecare metodă.

Temă

Tema dvs. va fi probabil cel mai direct mod prin care modelele sunt disponibile pe site-ul dvs. web. După cum am văzut în tabelul de prețuri de mai sus, multe teme bazate pe blocuri includ propriile colecții de modele personalizate. Acesta este doar o altă modalitate prin care temele se diferențiază și un set robust de opțiuni de aspect va fi un beneficiu imens pentru utilizatori. La momentul scrierii, tema Twenty Twenty-Two va fi livrată cu peste 60!

Director de modele (WordPress)

Începând cu lansarea WordPress 5.9, WordPress își va oferi propriile modele prin Directorul de modele.

Directorul de modele este un depozit de modele condus de comunitate, la fel ca pluginul WordPress și depozitele de teme și va fi deschis pentru trimiteri publice până la versiunea 5.9. Toate modelele trimise și aprobate vor fi disponibile cu ușurință pentru a le răsfoi și a le introduce direct din Pattern Explorer. Aceasta înseamnă că utilizatorii WordPress vor avea acces la sute, dacă nu la mii, de modele de bloc.

Sfat rapid: Unele teme pot dezactiva modelele incluse de WordPress din Directorul de modele. Acest lucru se face adesea atunci când dezvoltatorii de teme includ propriile lor colecții de modele și doresc să ofere o experiență de utilizator mai curată.

Pluginuri de la terți

În sfârșit avem pluginuri. Deoarece modelele există de câțiva ani, multe pluginuri terțe, cum ar fi Genesis Blocks și Redux, au creat biblioteci extinse de modele. Adesea, aceste biblioteci nu sunt integrate direct cu funcții precum Pattern Explorer și prezintă blocuri personalizate care nu se găsesc în nucleul WordPress. De asemenea, au tendința de a folosi propriile metode de inserare a modelelor, dar în timp mă aștept ca mulți să înceapă să se conformeze noii abordări standardizate a WordPress.

Dacă sunteți în căutarea unor blocuri de nișă și machete în timp ce Pattern Directory continuă să se maturizeze, sau dacă nu utilizați o temă cu propriile modele, vă recomand cu siguranță să explorați ce au de oferit pluginurile terțe.

Viitorul tiparelor

WordPress 5.9 va aduce multe îmbunătățiri pentru blocarea tiparelor. După cum am discutat, Pattern Explorer va facilita alegerea designului potrivit pentru site-ul dvs. web. Directorul de modele vă va oferi acces la o colecție vastă de modele construite în comunitate care se vor integra perfect în tema dvs.

Deși veți putea întotdeauna să creați modele unice din blocuri individuale, cred că cei mai mulți dintre noi se vor îndrepta direct către Pattern Explorer. Vom alege un aspect, fie unul oferit de tema noastră, fie din Director, apoi vom modifica după cum este necesar. Știu că voi.

În plus, ne putem aștepta ca noi teme bazate pe blocuri să fie judecate după cât de extinsă este colecția lor de modele de blocuri încorporate. Temele cu peste o sută de modele, toate bine clasificate și care acoperă o gamă largă de cazuri de utilizare, vor deveni probabil norma. În timp ce estetica unei teme este importantă, furnizarea utilizatorilor cu instrumentele de care au nevoie pentru a crea fără efort pagini web frumoase este esențială.

Modelele sunt viitorul WordPress, iar viitorul este luminos.

Încheierea

În acest articol am analizat ce sunt modelele de blocuri, cum le puteți utiliza și de ce vor schimba fundamental modul în care construim site-uri web WordPress. În următorul articol Noțiunile de bază ale constructorului, vom aprofunda puțin și vă vom învăța cum să vă creați propriile modele!

Deci, ce părere aveți despre modele? Le folosești pe site-ul tău? Aveți întrebări care nu au fost abordate în acest articol? Spune-ne în comentarii.