Riutilizza i componenti React di Gutenberg nei plugin di WordPress

Pochi giorni fa, David ha completato una serie di quattro post sul blog che presentavano React. Lì ti ha spiegato come iniziare con React per creare facilmente interfacce utente in WordPress. Nello specifico, nella parte 2 di questa serie di post, David ha spiegato come preparare l'ambiente di sviluppo e come creare un semplice componente React. Oggi vedremo che oltre a creare i propri componenti React, è un'ottima idea riutilizzare i componenti esistenti.

Da quando Gutenberg è apparso in WordPress, JavaScript e il framework React sono diventati una parte fondamentale nello stack di sviluppo di WordPress. Ecco perché se non sei abituato a queste tecnologie, dovresti impararle il prima possibile. Lo abbiamo fatto e abbiamo completamente ricodificato i nostri plugin premium usando React. Ciò implicava la trasformazione di tutte le interfacce utente che avevamo già con i componenti React.

Dal momento che i programmatori non dovrebbero reinventare la ruota, e nel mondo dello sviluppo software meno è sempre di più, oggi vedremo come riutilizzare i componenti React esistenti in WordPress.

I componenti React inclusi in WordPress

WordPress fornisce più di 80 componenti React che puoi riutilizzare nel tuo sviluppo, tramite il pacchetto @wordpress/components di Gutenberg:

In ciascuna delle cartelle dei componenti che troverai qui sul Github del progetto Gutenberg hai il codice sorgente JavaScript di ogni componente così come i suoi stili CSS e la documentazione per sapere come e quando usarli.

Tra i componenti che noi di Nelio abbiamo utilizzato per le nostre nuove interfacce React, vale la pena evidenziare Button e ButtonGroup per definire i pulsanti. Tutti i controller per campi e opzioni come CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl o TextControl . O anche TabPanel per interfacce a schede o Popover e Modal per finestre di dialogo mobili. E ce ne sono molti altri…

Se dovessimo sviluppare questi componenti da zero, sicuramente ora continueremmo a programmare le nuove interfacce React dei nostri plugin premium. Riutilizzare i componenti esistenti è la cosa migliore che puoi fare come sviluppatore per risparmiare tempo. E quelli forniti da Gutenberg per WordPress sono perfetti per i tuoi plugin.

Come riutilizzare i componenti di WordPress React

Immagina di voler utilizzare un pulsante nella tua interfaccia sviluppata in React. Grazie ai componenti esistenti in Gutenberg puoi utilizzare direttamente il componente Button come puoi vedere nel seguente esempio:

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

Ci si potrebbe chiedere che per un pulsante non sia necessario utilizzare il componente Gutenberg e utilizzare invece direttamente un tag <button> . E avresti ragione.

Tuttavia, utilizzando il Button Gutenberg, ciò che ottieni è che il tuo pulsante ha lo stesso stile CSS degli altri pulsanti nell'interfaccia di WordPress. Inoltre, se il componente e i suoi stili vengono aggiornati, cosa che è accaduta in quasi tutte le nuove versioni di WordPress, come sviluppatore non dovrai fare nulla. La responsabilità dell'aggiornamento del Button Gutenberg non è tua. Se hai usato il tuo pulsante, è qualcosa di cui dovresti occuparti.

Per riutilizzare un componente Gutenberg esistente, devi solo verificare se questo componente esiste e importarlo nel tuo codice tramite il pacchetto @wordpress/components . Come puoi vedere nello snippet di codice sopra, abbiamo importato il componente Button da questo pacchetto. E per avere il pacchetto disponibile all'interno del tuo progetto, devi installarlo usando il comando npm install @wordpress/components nel terminale. Ma questo è stato già spiegato da David nei suoi post, quindi non parlerò più di questo.

Quello che devi tenere a mente è che affinché questi componenti prendano gli stili di WordPress devi impostare wp-components come dipendenza del tuo file di stile CSS quando lo accodi in WordPress con la funzione PHP wp_enqueue_style .

A meno che le tue esigenze non siano coperte da quei componenti React forniti da Gutenberg, non reinventare la ruota e usarli. I vantaggi del riutilizzo dei componenti esistenti sono estremamente maggiori rispetto all'utilizzo dei propri componenti.

Il libro di storie dei componenti di reazione di Gutenberg

Una delle novità di Gutenberg è lo Storybook che possiamo trovare su Github. Storybook è uno strumento open source che fornisce una sandbox per lo sviluppo e la visualizzazione dei componenti in isolamento. Nel caso di WordPress, serve, tra le altre cose, come documentazione per i componenti.

Tra le varie opzioni incluse nel Gutenberg Storybook abbiamo la possibilità di provare l'editor dei blocchi tramite il menu Playground . Ma l'opzione più interessante è poter vedere la documentazione dei componenti di Gutenberg in modo amichevole.

Devi solo aprire il menu Componenti e lì troverai l'elenco dei componenti che WordPress fornisce tramite il pacchetto @wordpress/components . Puoi esplorare ogni componente React e vedere esempi di utilizzo con il loro codice JavaScript completo.

Ad esempio, nello screenshot seguente vengono visualizzati esempi del componente Button con le diverse proprietà che i pulsanti possono avere. Quindi, nella scheda Storia hai il codice sorgente dell'esempio completo:

Inoltre, alcuni componenti specifici includono opzioni all'interno della scheda Manopole per modificare le proprietà del componente e visualizzare in anteprima le modifiche che provocano nella sua interfaccia.

Uno di questi componenti è TextControl , che viene utilizzato per aggiungere un campo di testo. Nello screenshot seguente vediamo la scheda Knob con diverse opzioni per nascondere l' etichetta del componente o per modificare i testi sia dell'etichetta che della guida. Quindi possiamo vedere come apparirà il componente con le modifiche e decidere come usarlo nelle nostre interfacce React:

Non tutti i componenti del pacchetto @wordpress/components hanno una documentazione completa nello Storybook, quindi dovrai andare alla sezione del pacchetto dei componenti su Github per vedere l'ultima versione dello stato dei componenti di React in Gutenberg.

Tuttavia, man mano che la documentazione di Gutenberg Storybook sarà completata, diventerà sempre più interessante per gli sviluppatori. Avere una documentazione di questo tipo in WordPress è un lusso. La sua utilità è fuori discussione.

Hai già visto tutto ciò che i componenti React di Gutenberg possono fornire per i tuoi sviluppi WordPress. Invece di reinventare la ruota e sviluppare i tuoi componenti di base, dai un'occhiata prima ai componenti React di Gutenberg per ottenere coerenza con il resto dell'interfaccia di WordPress e risparmiare tempo di sviluppo e manutenzione. Il riutilizzo del software è la chiave per essere più efficienti come sviluppatori di WordPress.

Immagine in primo piano di Morning Brew su Unsplash.