Lo sviluppo moderno dei plugin WordPress usa sempre più React per l'interfaccia admin. WordPress include React integrato, insieme a una libreria completa di componenti sotto il namespace @wordpress. Costruire le pagine admin dei tuoi plugin con React offre una migliore esperienza utente, una gestione dello stato più facile e compatibilità con il più ampio ecosistema di sviluppo WordPress.
Questa guida spiega come creare interfacce admin basate su React per plugin WordPress, dalla configurazione all'uso dei componenti fino alla gestione dei dati.
Configurazione del processo di build
Il codice React richiede un passaggio di build per trasformare JSX in JavaScript compatibile con il browser. Usa @wordpress/scripts, che fornisce una configurazione webpack preconfigurata ottimizzata per lo sviluppo WordPress. Installalo con npm e aggiungi gli script build e start al tuo package.json. Il processo di build compila il tuo JavaScript, gestisce la trasformazione JSX e genera file ottimizzati per la produzione.
Crea una directory src per i tuoi componenti React. Configura i punti di ingresso nel tuo package.json in modo che puntino ai tuoi file JS principali. La build genera un output in una directory build che devi accodare nel tuo plugin.
Utilizzo di @wordpress/components
Il pacchetto @wordpress/components fornisce una libreria di componenti React che corrispondono al sistema di design dell'amministrazione WordPress. Usa questi componenti per creare interfacce che appaiano e si comportino in modo nativo in WordPress. I componenti comuni includono Button, TextControl, SelectControl, ToggleControl, RangeControl, Panel, Modal e Notice.
Importa i componenti da @wordpress/components nel tuo codice React. I componenti gestiscono automaticamente stile, accessibilità e comportamento responsive. Questo fa risparmiare tempo di sviluppo e garantisce che le tue interfacce admin siano coerenti con il core di WordPress.
Gestire lo Stato con wp.data
Il pacchetto wp.data fornisce un sistema di gestione dello stato basato su Redux integrato con WordPress. Usa registerStore per definire il tuo data store con azioni, reducer e selettori. Usa useSelect e useDispatch nei tuoi componenti React per accedere ai dati e attivare le azioni.
wp.data si integra con l'API REST di WordPress tramite i resolver. Quando un componente richiede dati non ancora caricati, il resolver attiva automaticamente una richiesta API. Questo schema elimina il codice boilerplate per il recupero dei dati e la sincronizzazione dello stato.
Registrare le Pagine
Crea la tua pagina admin con add_menu_page() o add_submenu_page() in PHP. Invece di generare HTML complesso, la tua funzione di callback della pagina si limita a restituire un div contenitore con un ID univoco. La tua applicazione React si monta su quel div quando la pagina viene caricata. Accoda il tuo file JavaScript compilato con wp_enqueue_script nell'hook della pagina admin.
Usa wp_localize_script per passare dati PHP alla tua applicazione React. È così che fornisci stato iniziale, nonce, URL dell'API REST e impostazioni del plugin al tuo codice JavaScript.
Testare i componenti React
Testa i tuoi componenti React con @wordpress/jest-console o React Testing Library. Scrivi test unitari per componenti singoli e test di integrazione per flussi di dati collegati. Il pacchetto @wordpress/scripts include una configurazione Jest che funziona subito per progetti WordPress.
Testa l'accessibilità con @wordpress/jest-axe o test manuali di navigazione da tastiera. I componenti React dovrebbero essere navigabili con i tasti Tab, operabili con Invio e Spazio, e includere etichette ARIA appropriate.
Il punto fondamentale
React fornisce la migliore base per costruire interfacce amministrative moderne per WordPress. L'ecosistema @wordpress fornisce tutto ciò di cui hai bisogno — strumenti di build, componenti UI e gestione dello stato — tutto progettato per funzionare con WordPress. Inizia con una semplice pagina di impostazioni costruita con @wordpress/scripts, poi aggiungi interfacce complesse, store di dati e test di integrazione man mano che il tuo plugin cresce.
