Construirea unei biblioteci tipare a blocurilor Gutenberg

Gutenberg reprezintă o schimbare uriașă către designul web bazat pe tipare. În acest articol voi discuta despre abordările pe care le-am luat atunci când am creat propria noastră bibliotecă flexibilă de blocuri personalizate Gutenberg.

fundal

Lansarea din decembrie 2018 a lui Gutenberg a reprezentat cea mai mare schimbare din WordPress de la începuturile sale. Noua interfață „drag & drop” bazată pe blocuri modifică modul în care dezvoltatorii creează teme, modul în care proiectanții iau în considerare divizarea site-urilor în părți componente și modul în care editorii de conținut gestionează și planifică crearea de conținut.

Aceasta este o schimbare fundamentală către proiectarea site-urilor bazate pe tipare; un sistem de elemente reutilizabile care pot fi aplicate în mod consecvent pe un site web, pentru a crea cea mai bună experiență posibilă pentru utilizator și pentru a fluidiza fluxul de lucru. În timp ce mulți dintre noi lucrau deja cu tipare, Gutenberg promovează această schimbare într-un ritm accelerat. Deoarece WordPress alimentează o treime din site-urile din întreaga lume, impactul acestei schimbări nu poate fi exagerat.

Acest articol evidențiază câteva dintre problemele cu care ne-am confruntat ca dezvoltatori atunci când am început să planificăm și să construim o bibliotecă de modele, cum am depășit limitările inerente Gutenberg și abordarea pe care am adoptat-o ​​pentru a crea sistemul nostru flexibil de blocuri personalizate.

Scopul nostru

În calitate de constructori specialiști de site-uri WordPress personalizate, Gutenberg ne-a oferit ocazia perfectă de a crea o bibliotecă unitară de modele; un set de blocuri personalizate pentru a fi utilizate cu multe dintre versiunile noastre personalizate de site-uri web.

Nu numai că am vrut să îmbrățișăm această nouă experiență de editare, dar am dorit să putem oferi o soluție folosind propriul nostru sistem fără să ne bazăm pe un set limitat de blocuri Gutenberg de bază sau pe un pachet de soluții terță parte disponibile.

Un set cuprinzător de blocuri la îndemână înseamnă, de asemenea, că nu trebuie să creăm fiecare bloc de la zero pentru noile versiuni ale site-ului web Gutenberg. Acest lucru ne-ar permite să petrecem și mai mult timp rafinând estetica unui site și să adăugăm tipul de finisaje și optimizări care ajută la separarea unui site web de concurența sa.

Provocări

Flexibilitate de proiectare

Aveam nevoie de un sistem de design versatil cu mai multe modele care să ne ofere flexibilitatea de a crea o varietate de teme personalizate.

Realizarea unui echilibru bun între posibilitatea de a menține un număr finit și realist de tipare, fără a compromite designul tematic, va fi o provocare.

O schimbare în dezvoltarea temei

Înainte de Gutenberg, am adoptat o serie de abordări diferite pentru dezvoltarea temelor. Cea mai obișnuită a fost crearea de șabloane de pagină individuale pentru părți separate ale unui site. Șabloanele ar fi foarte prescriptive și vor include câmpuri personalizate pentru fiecare secțiune proiectată. Un șablon „Studii de caz”, de exemplu, poate include câmpuri pentru un editor de text, galerie de imagini, mărturii etc. Cu toate acestea, odată incluse în șablon, acestea nu pot fi ușor modificate.

Această abordare nu numai că este restrictivă în ceea ce privește aspectul paginii, dar de obicei a însemnat că sunt necesare eforturi repetate pentru fiecare site nou bazat pe șabloane; trebuie create câmpuri, configurate șabloane și componente separate codificate pentru afișare pe partea frontală.

Pentru a ne adapta la Gutenberg, a trebuit să ne schimbăm abordarea de dezvoltare, să înțelegem cum putem crea componente reutilizabile și să adoptăm flexibilitatea pe care Gutenberg o oferă acum pentru noile versiuni de site-uri web.

Gutenberg nu este atât de flexibil

Gutenberg are peste 30 de blocuri disponibile. Totul, de la componente de conținut de bază, cum ar fi elementele de paragraf, titlu și listă, până la widgeturi și încorporări mai complexe.

Pentru multe dintre versiunile noastre de site-uri web, un număr bun din aceste blocuri de bază fie nu sunt relevante, fie nu au nivelul de funcționalitate pe care temele noastre le-ar solicita. Aveam nevoie de o modalitate de a ne crea propriul set de modele care îndeplinesc funcții foarte specifice adecvate designului tematic.

O altă problemă pe care am găsit-o în curând cu Gutenberg este că nu este nici ușor, nici intuitiv să creăm machete mai complexe folosind blocuri de bază.

Un model pentru un bloc „conținut și imagine”, de exemplu, poate necesita un titlu, un paragraf, o listă și un buton pentru a apărea alături de o imagine și cu opțiunea de a afișa imaginea la stânga sau la dreapta conținutului respectiv, iar aceste elemente să fie afișat într-un aspect consistent.

Acest nivel de libertate nu vine ușor cu Gutenberg. În timp ce există mai multe blocuri care pot adăuga text, imagini și butoane, acestea sunt de natură destul de atomică și atunci când sunt adăugate individual apar ca blocuri stivuite separate. De la început a devenit clar că Gutenberg nu era suficient de flexibil și că trebuie să ne putem construi propriile blocuri personalizate.

Soluția noastră

Un sistem de design versatil

Înainte de lansarea lui Gutenberg, investisem deja mult timp în cercetarea și vizualizarea modelelor pentru biblioteca noastră de modele.

Aceasta a presupus auditul mai multor site-uri web și prototipuri existente pentru a compila o bibliotecă wireframe cu elemente utilizate în mod obișnuit.

Designerii și dezvoltatorii noștri au continuat să lucreze împreună pentru a înțelege cum aceste elemente ar putea fi combinate în blocuri Gutenberg și cum ar putea fi creat un anumit tip de bloc, astfel încât, cu opțiuni de personalizare limitate, un singur bloc să poată face să arate semnificativ diferit de la temă la temă.

Odată ce ne-am clasificat tiparele în blocuri, am fost gata să începem să construim.

Blocuri de construcții cu câmpuri personalizate avansate

Fiecare dezvoltator de teme a întâlnit aproape sigur câmpuri personalizate avansate (ACF) la un moment dat. Prin intermediul unei interfețe intuitive, pot fi create o multitudine de tipuri de câmpuri diferite; orice, de la câmpuri de text de bază și editori de conținut la selectoare de date, încorporări de hărți și câmpuri de galerie. Acestea pot fi ușor alocate diferitelor zone ale unui site, cum ar fi tipurile de postări, șabloanele de pagini, categoriile și paginile utilizatorului.

Cea mai recentă versiune a ACF, blocuri ACF, extinde toate aceste funcționalități familiare la Gutenberg. Grupurile de câmpuri pot fi create și alocate diferitelor blocuri bazate pe ACF în același mod ca și în alte zone ale site-ului.

Cu câteva linii de cod necesare pentru a înregistra un bloc și câmpuri de ieșire, este posibil să creați un bloc personalizat de bază în câteva minute. Ușurința cu care se pot crea blocuri cu această abordare ne-a permis să ne concentrăm pe configurarea blocurilor, ieșirea și stilul.

Am reușit acum să creăm o suită de blocuri personalizate care să ofere toată flexibilitatea lui Gutenberg, dar constrânsă la designul temei, care să ajute la aspectele consistente.

Plugin Biblioteca de modele

După crearea câtorva exemple de blocuri, am decis să ne împachetăm blocurile într-un plugin personalizat cu ajutorul echipei de ingineri.

Acest plugin bazat pe blocuri permite implementarea rapidă a modelelor personalizate pentru noile versiuni de site-uri web. Acestea sunt apoi personalizate în continuare la nivel de temă.

Pluginul nostru pentru Biblioteca de modele include câteva caracteristici utile:

1. Fișiere de șablon de bloc de bază pentru a ne permite să adăugăm rapid blocuri noi;
2. Funcții care permit blocurilor de bază și blocurilor personalizate să fie inițializate și să fie incluse în categorii personalizate;
3. Un ecran de setări de administrare în care fiecare bloc poate fi activat sau dezactivat;
4. Abilitatea de a suprascrie aspectul și structura unui bloc în cadrul temei;
5. Capacitatea de a suprascrie stilul blocurilor la nivel de temă;
6. Încărcarea foilor de stil la nivel de temă în Gutenberg, astfel încât previzualizarea administratorului blocului să arate la fel ca blocurile front-end. Utilizarea grilei CSS ne-a ajutat să maximizăm flexibilitatea în estetică și aspect, minimizând în același timp modificările structurale;
7. Blocurile specifice pot fi limitate la anumite tipuri de posturi pentru a menține consistența.

Dezvoltarea pluginului Pattern Library va fi o evoluție continuă, dar acum avem peste 15 blocuri care pot fi folosite pentru a construi o proporție semnificativă din proiectele noastre de teme flexibile.

Suita noastră de blocuri include modele de conținut și imagine, mărturii, articole conexe și blocuri de echipă, împreună cu mai multe modele de stil „prezentare”, inclusiv galerii, statistici și glisante.

rezumat

Suntem cu adevărat entuziasmați de oportunitățile pe care Gutenberg și biblioteca noastră personalizată de modele s-a deschis.

Nu numai că putem continua să conducem oferta noastră personalizată de site-uri web utilizând cea mai recentă experiență de editare, dar suntem capabili să producem site-uri web extrem de flexibile, cu o abordare de dezvoltare unificată, ajutându-ne să creăm experiențe bogate pentru utilizatorii finali.

Au trecut aproape 2 luni de când am început să folosim pentru prima oară Biblioteca de modele a blocurilor Gutenberg pe care le folosim acum pe multe noi versiuni de site-uri. Clienții au fost dornici să folosească Gutenberg, iar feedback-ul clienților a fost cu adevărat pozitiv până acum.

„Matt și Pammy au oferit un tutorial despre elementele site-ului pe care le-ați creat și sunt uimitoare !! Flexibilitatea și profesionalismul sunt fantastice și sunt atât de recunoscător pentru toată munca dvs. uimitoare pe această temă de până acum .. Cu adevărat încântat de site-ul web acum. Mulțumesc"

- Rachel Smith, YMCA Nottingham

Vom continua să extindem biblioteca noastră de modele de blocuri personalizate și să perfecționăm cu îmbunătățiri suplimentare pe măsură ce petrecem mai mult timp cu Gutenberg. În prezent lucrăm la cel de-al cincilea site al nostru, bazat pe Gutenberg, așa că căutați în curând un studiu de caz!

Dacă aveți nevoie de ajutor pentru dezvoltarea WordPress, nu ezitați să ne contactați.