Componentele G2, o reimaginare de la zero a componentelor WordPress

Actualizați unele dintre lucruri.

Acesta a fost obiectivul pe care Jon Quach, designer principal la Automattic, l-a stabilit în foaia de parcurs pentru integrarea proiectului G2 Components în Gutenberg și, în cele din urmă, în WordPress de bază. Proiectul este o reimaginare a pieselor care fac editorul de blocuri, o revizuire „de la zero” a sistemului de componente. Actualizarea tuturor lucrurilor sau chiar a multor lucruri deodată riscă să rupă totul.

„În mod ideal, ceea ce ar trebui să se întâmple este să actualizați doar câteva dintre lucruri într-un mod foarte controlat și intenționat”, a scris Quach în postare. El a comparat tranziția unui oraș, secțiune cu secțiune, cu energia solară până când fabrica tradițională de energie ar putea fi închisă. Convertiți o piesă, testați, găsiți probleme și le corectați înainte de a trece la următoarea secțiune.

Acesta este planul pentru integrarea G2 Components în Gutenberg.

„G2 Components este un proiect care întruchipează ideea de a face interfețele și experiențele utilizatorului mai bune pentru alții”, a spus Quach. „În acest moment, este materializat ca un sistem de componente conceput pentru a funcționa în contextul și mediile Gutenberg și WordPress.”

Scopul este de a oferi resurse pentru a îmbunătăți interfața de utilizare a proiectului Gutenberg. Componentele ar trebui să faciliteze crearea de interfețe de utilizare mai noi fără a pirata codul împreună. Quach a spus că consistența și experiențele sistemului de componente ar trebui să se extindă și să aibă un efect de undă în întreaga platformă WordPress. Acest lucru se va extinde și la dezvoltatorii de blocuri terți.

„Componentele codului sunt doar punctul de plecare”, a spus el. „Scopul meu final este ca acest lucru să depășească codul și să influențeze și să ridice și designul – crearea unui sistem de design unificat care să le permită și să le împuternicească oamenilor să creeze experiențe de UI coezive și bogate în funcții în lumea WordPress.”

Quach consideră că platformele au beneficiat de abordări similare. El a menționat că Material Design by Google a ridicat platforma Android și a adus coeziune în produsele companiei.

Echipa Gutenberg a început deja integrarea componentelor G2 în proiect. Această integrare înlocuiește componentele WordPress (@wordpress/components) într-o manieră controlată, care nu ar trebui să distrugă implementările existente în editorul de bază sau proiectele terțe. Componentele noi vor fi schimbate pe măsură ce devin gata. — Ca și cum ai porni un comutator, spuse Quach.

Următorul videoclip este o prezentare de o oră a componentelor G2 pe care Quach a postat-o ​​pe YouTube:

El postează în mod obișnuit actualizări pe blogul G2 Components. Alături de acestea, există și mai multe scufundări în gândirea sa de proiectare a proiectului. De asemenea, vorbește despre proiect în fluxul său Twitch aproape zilnic.

Ce sunt componentele?

Componentele sunt totul, de la butoane la comutatoare la casete de selectare. Sunt piese standardizate care alcătuiesc interfața de utilizare a editorului de blocuri. Sunt disponibile atât pentru dezvoltatorii de bază, cât și pentru cei terți, pentru a crea ceea ce utilizatorii finali văd și cu care interacționează. Cu toate acestea, a existat o problemă cu modul în care a fost construit sistemul de componente original.

„Componentele actuale nu sunt construite având în vedere un sistem, ci mai degrabă pentru a satisface o nevoie imediată”, a spus Quach. „Acest detaliu special de design este crucial. O abordare bazată pe sisteme mai ușor acceptă adăugarea de noi funcții și, mai important, personalizarea!”

Noua abordare se referă la construirea unui sistem de design nativ pentru WordPress. Un astfel de sistem ar permite oricui să construiască pe el și să creeze experiențe native.

Quach a spus că una dintre cele mai ușoare moduri de a privi acest lucru este dintr-o perspectivă de tematică backend - Sistemul de componente are și un subsistem de tematică. „În locul metodei tradiționale de a scrie CSS ca „față” pentru stratul de deasupra, estetica interfeței de utilizator poate fi ajustată prin valorile de configurare – similar modului în care WordPress poate fi configurat cu definiții în fișierul wp-config.php ”, a spus el. „Această distincție este importantă deoarece aceste valori intră direct în sistemul Style, permițând stilurilor să se încarce corect la locul potrivit și la momentul potrivit. Totul fără a afecta stilurile mediului actual și, mai important, să nu fie afectat de stilurile mediului actual.”

El a răspuns la întrebarea mea despre motivul pentru care sistemul de componente ar trebui reconstruit de la zero. Ideea este de a avea componente care „funcționează” într-un mediu precum administratorul WordPress, cum ar fi să te asiguri că existența unei foi de stil a unei teme WordPress nu sparge componente doar prin încărcare.

„De ce să regândim, să reconstruiești și să îmbunătățești intrările, butoanele, modalele, meniurile derulante și altele?” replică Quach ca răspuns. „Pentru ca tu, dezvoltatorul, să nu fii nevoit.”

Ce înseamnă acest lucru pentru dezvoltatori?

Respectarea retrocompatibilității este ceva ce Quach a spus că l-a luat incredibil de în serios atunci când a proiectat arhitectura proiectului G2 Components. El a mai spus că face parte din strategia de integrare pe care a propus-o.

„Am menționat că acest proiect „întruchipează ideea de a face interfețele și experiențele utilizatorului mai bune pentru alții”, a spus el. „Să ține cont de compatibilitatea cu versiunea anterioară și sprijinirea migrării terțelor părți se încadrează absolut în categoria experienței utilizatorului.”

Pe măsură ce echipa Gutenberg continuă să integreze noi componente, nu ar trebui să schimbe ceea ce dezvoltatorii au făcut deja. Cu toate acestea, ar putea deschide noi posibilități.

„Noul sistem de componente va ajuta cu siguranță în departamentul UI”, a spus Quach. „Un domeniu de care sunt deosebit de entuziasmat este spațiul de dezvoltare rapidă/prototipări. Deoarece aceste Componente sunt unități autonome, pot fi aduse în platforme precum CodeSandbox și ele... pur și simplu... funcționează. Puteți porni la sol și puteți construi și partaja rapid prototipuri (de la minuscule, dar puternice la mari și încărcate).

El a spus că a avut succes în testarea designului componentelor și în demonstrarea ideilor pentru feedback rapid. De asemenea, a lucrat din direcția opusă, construind componente complexe în CodeSandbox și aducându-le înapoi în sistemul de componente.

„Ca designer și dezvoltator front-end, nu pot sublinia cât de eficient, eficient și eliberator din punct de vedere creativ este acest flux de lucru pentru „micro clădire”,” a spus el. „Este ceva ce sunt încântat ca și alții să experimenteze.”