Reutilizați componentele React de la Gutenberg în pluginurile dvs. WordPress

Publicat: 2020-10-01

În urmă cu câteva zile, David a finalizat o serie de patru postări pe blog care prezintă React. Acolo ți-a explicat cum să începi cu React pentru a crea cu ușurință interfețe de utilizator în WordPress. Mai exact, în partea 2 a acestei serii de postări, David a explicat cum să pregătiți mediul de dezvoltare și cum să creați o componentă React simplă. Astăzi vom vedea că, pe lângă crearea propriilor componente React, este o idee foarte bună să reutilizați componentele existente.

Bărbat care merge cu bicicleta pe o bicicletă ciudată fără roată din spate, ci cu o structură mecanică. — Reinventarea roții nu are niciun sens. Profitați de munca existentă realizată cu Gutenberg pentru a reutiliza componentele React pe care le oferă în interfețele dvs. WordPress.

De când Gutenberg a apărut în WordPress, JavaScript și cadrul React au devenit o parte cheie în stiva de dezvoltare WordPress. De aceea, dacă nu ești obișnuit cu aceste tehnologii, ar trebui să le înveți cât mai curând posibil. Am făcut asta și am recodificat complet pluginurile noastre premium folosind React. Aceasta a implicat transformarea tuturor interfețelor utilizator pe care le aveam deja cu componentele React.

Deoarece programatorii nu ar trebui să reinventeze roata, iar în lumea dezvoltării software, mai puțin înseamnă întotdeauna mai mult, astăzi vom vedea cum să reutilizam componentele React existente în WordPress.

Componentele React incluse în WordPress

WordPress oferă peste 80 de componente React pe care le puteți reutiliza în dezvoltarea dvs., prin pachetul @wordpress/components de la Gutenberg:

Lista Gutenberg de componente React este foarte completă și utilă pentru a fi reutilizată în dezvoltările dvs.

În fiecare dintre folderele componente pe care le veți găsi aici pe Github-ul proiectului Gutenberg aveți codul sursă JavaScript al fiecărei componente, precum și stilurile sale CSS și documentația pentru a ști cum și când să le utilizați.

Printre componentele pe care noi, cei de la Nelio, le-am folosit pentru noile noastre interfețe React, merită evidențiate Button și ButtonGroup pentru a defini butoanele. Toate controlerele pentru câmpuri și opțiuni precum CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl sau TextControl . Sau chiar TabPanel pentru interfețe cu file sau Popover și Modal pentru dialoguri plutitoare. Și mai sunt multe…

Dacă ar fi să dezvoltăm aceste componente de la zero, cu siguranță că am programa în continuare noile interfețe React ale pluginurilor noastre premium. Reutilizarea componentelor existente este cel mai bun lucru pe care îl puteți face ca dezvoltator pentru a economisi timp. Iar cele furnizate de Gutenberg pentru WordPress sunt perfecte pentru pluginurile tale.

Cum să reutilizați componentele WordPress React

Imaginați-vă că doriți să utilizați un buton în interfața dezvoltată în React. Datorită componentelor existente în Gutenberg, puteți utiliza componenta Button direct, așa cum puteți vedea în următorul exemplu:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

S-ar putea să vă întrebați că pentru un buton nu ar trebui să utilizați componenta Gutenberg și, în schimb, să utilizați direct o etichetă <button> . Și ai avea dreptate.

Cu toate acestea, folosind Button Gutenberg, ceea ce obțineți este că butonul dvs. are același stil CSS ca și celelalte butoane din interfața WordPress. De asemenea, dacă componenta și stilurile sale sunt actualizate, lucru care s-a întâmplat în aproape fiecare versiune nouă de WordPress, ca dezvoltator nu va trebui să faci nimic. Responsabilitatea pentru actualizarea Button Gutenberg nu este a ta. Dacă ai folosi propriul tău buton, ar trebui să ai grijă de asta.

Stiluri CSS definite în componenta Button din Gutenberg.

Pentru a reutiliza o componentă Gutenberg existentă, trebuie doar să verificați dacă această componentă există și să o importați în codul dvs. prin pachetul @wordpress/components . După cum puteți vedea în fragmentul de cod de mai sus, am importat componenta Button din acest pachet. Și pentru a avea pachetul disponibil în cadrul proiectului, trebuie să îl instalați folosind comanda npm install @wordpress/components în terminal. Dar acest lucru a fost deja explicat de David în postările sale, așa că nu voi mai acoperi asta din nou.

Ceea ce trebuie să rețineți este că, pentru ca aceste componente să preia stilurile WordPress, trebuie să setați wp-components ca o dependență a fișierului de stil CSS atunci când îl puneți în coada în WordPress cu funcția PHP wp_enqueue_style .

Cu excepția cazului în care nevoile dvs. nu sunt acoperite de acele componente React furnizate de Gutenberg, nu reinventați roata și folosiți-le. Beneficiile reutilizarii componentelor existente sunt extrem de mai mari decât folosirea propriilor componente.

Cartea de povești a lui Gutenberg React Components

Una dintre noutățile lui Gutenberg este Cartea de povești pe care o găsim pe Github. Storybook este un instrument open source care oferă un sandbox pentru dezvoltarea și vizualizarea componentelor izolat. În cazul WordPress, acesta servește ca documentație pentru componente, printre altele.

Printre diversele opțiuni incluse în Gutenberg Storybook avem posibilitatea de a încerca editorul de blocuri prin meniul Playground . Dar cea mai interesantă opțiune este să poți vedea documentația componentelor Gutenberg într-un mod prietenos.

Trebuie doar să deschideți meniul Componente și acolo veți găsi lista de componente pe care WordPress le oferă prin pachetul @wordpress/components . Puteți explora fiecare componentă React și puteți vedea exemple de utilizare cu codul JavaScript complet.

De exemplu, în următoarea captură de ecran vedeți exemple ale componentei Button cu diferite proprietăți pe care le pot avea butoanele. Apoi, în fila Povestea aveți codul sursă al exemplului complet:

Cartea de povești a lui Gutenberg vă permite să explorați prietenos componentele React incluse și să vedeți cum să le reutilizați.

În plus, unele componente specifice includ opțiuni în fila Butoane pentru a modifica proprietățile componentei și a previzualiza modificările pe care le provoacă în interfața acesteia.

Una dintre aceste componente este TextControl , care este folosit pentru a adăuga un câmp de text. În următoarea captură de ecran vedem fila Knob cu diferite opțiuni pentru a ascunde eticheta componentei sau pentru a schimba textele atât ale etichetei, cât și ale ajutorului. Deci, putem vedea cum va arăta componenta cu modificările și putem decide cum vrem să o folosim în interfețele noastre React:

Fila Butoane din Cartea de povești a lui Gutenberg vă permite să vă jucați cu proprietățile componentelor pentru a vedea ce efect au acestea asupra vizualizării dvs. — Fila Butoane din Cartea de povești a lui Gutenberg vă permite să vă jucați cu proprietățile componentelor pentru a vedea ce efect au acestea asupra vizualizării lor.

Nu toate componentele pachetului @wordpress/components au o documentație completă în Storybook, așa că va trebui să mergeți la secțiunea pachet de componente de pe Github pentru a vedea cea mai recentă versiune a stării componentelor React în Gutenberg.

Cu toate acestea, pe măsură ce documentația Gutenberg Storybook este finalizată, va deveni din ce în ce mai interesantă pentru dezvoltatori. A avea documentație de acest tip în WordPress este un lux. Utilitatea sa este dincolo de orice discuție.

Ați văzut deja tot ce pot oferi componentele React ale lui Gutenberg pentru dezvoltarea dvs. WordPress. În loc să reinventați roata și să vă dezvoltați propriile componente de bază, aruncați o privire mai întâi la componentele React ale lui Gutenberg pentru a obține coerență cu restul interfeței WordPress și a economisi timp de dezvoltare și întreținere. Reutilizarea software-ului este cheia pentru a fi mai eficient ca dezvoltatori WordPress.

Imagine prezentată de Morning Brew pe Unsplash.