Componenti G2, una rivisitazione da zero dei componenti di WordPress

Aggiorna alcune cose.

Questo era l'obiettivo che Jon Quach, un designer principale di Automattic, ha delineato nella tabella di marcia per l'integrazione del progetto G2 Components in Gutenberg e, infine, nel core di WordPress. Il progetto è una rivisitazione dei pezzi che compongono l'editor di blocchi, una revisione "da zero" del sistema di componenti. Aggiornare tutte le cose o anche molte cose contemporaneamente corre il rischio di rompere tutto.

"Idealmente, ciò che dovrebbe accadere è che dovresti aggiornare solo alcune delle cose in modo molto controllato e intenzionale", ha scritto Quach nel post. Ha paragonato la transizione di una città, sezione dopo sezione, all'energia solare fino a quando la tradizionale fabbrica di energia non potrebbe essere chiusa. Puoi convertire un pezzo, testare, trovare problemi e correggerli prima di passare alla sezione successiva.

Questo è il piano per l'integrazione dei componenti G2 in Gutenberg.

"G2 Components è un progetto che incarna l'idea di migliorare le interfacce utente e le esperienze utente per gli altri", ha affermato Quach. "Al momento, si è materializzato come un sistema di componenti progettato per funzionare nel contesto e negli ambienti di Gutenberg e WordPress".

L'obiettivo è fornire le risorse per migliorare l'interfaccia utente del progetto Gutenberg. I componenti dovrebbero semplificare la creazione di interfacce utente più recenti senza modificare il codice insieme. Quach ha affermato che la coerenza e le esperienze del Component System dovrebbero scalare e avere un effetto a catena su tutta la piattaforma WordPress. Ciò si estenderà anche agli sviluppatori di blocchi di terze parti.

"I componenti del codice sono solo il punto di partenza", ha affermato. "Il mio obiettivo finale è che questo trascenda il codice e influenzi ed elevi anche il design, creando un sistema di progettazione unificato che consenta e consenta alle persone di creare esperienze dell'interfaccia utente coese e ricche di funzionalità nel mondo di WordPress".

Quach ritiene che le piattaforme abbiano tratto vantaggio dall'avere approcci simili. Ha menzionato il Material Design di Google per aver elevato la piattaforma Android e portare coesione tra i prodotti dell'azienda.

Il team di Gutenberg ha già iniziato a integrare i componenti G2 nel progetto. Questa integrazione sostituisce i componenti di WordPress (@wordpress/components) in modo controllato che non dovrebbe interrompere le implementazioni esistenti all'interno dell'editor principale o progetti di terze parti. I nuovi componenti verranno sostituiti non appena saranno pronti. "Come premere un interruttore", ha detto Quach.

Il seguente video è una guida dettagliata di un'ora dei componenti G2 che Quach ha pubblicato su YouTube:

Pubblica regolarmente aggiornamenti sul blog dei componenti G2. Accanto a queste ci sono immersioni più profonde nel suo pensiero progettuale sul progetto. Quasi ogni giorno parla del progetto anche sul suo stream Twitch.

Cosa sono i componenti?

I componenti sono di tutto, dai pulsanti agli interruttori alle caselle di controllo. Sono pezzi standardizzati che costituiscono l'interfaccia utente dell'editor di blocchi. Sono disponibili sia per gli sviluppatori principali che di terze parti per creare ciò con cui gli utenti finali vedono e interagiscono. Tuttavia, si è verificato un problema con il modo in cui è stato costruito il sistema di componenti originale.

"I componenti attuali non sono costruiti pensando a un sistema, ma piuttosto per soddisfare un'esigenza immediata", ha affermato Quach. “Questo particolare dettaglio di design è fondamentale. Un approccio incentrato sui sistemi supporta più facilmente l'aggiunta di nuove funzionalità e, soprattutto, la personalizzazione!

Il nuovo approccio riguarda la creazione di un sistema di progettazione nativo per WordPress. Un tale sistema consentirebbe a chiunque di costruirci sopra e creare esperienze native.

Quach ha affermato che uno dei modi più semplici per guardare a questo è da una prospettiva di temi di back-end: il sistema dei componenti ha anche un sottosistema di temi. "Invece del metodo tradizionale di scrivere CSS come una "pelle" da sovrapporre, l'estetica dell'interfaccia utente può essere regolata attraverso i valori di configurazione, in modo simile a come WordPress può essere configurato con le definizioni nel file wp-config.php ", ha affermato. “Questa distinzione è importante in quanto questi valori attingono direttamente al sistema Style, consentendo agli stili di caricarsi correttamente al posto giusto e al momento giusto. Il tutto senza influenzare gli stili dell'ambiente attuale e, cosa più importante, non essere influenzato dagli stili dell'ambiente attuale".

Stava rispondendo alla mia domanda sul perché il sistema dei componenti dovrebbe essere ricostruito da zero. L'idea è quella di avere componenti che "funzionano" in un ambiente come l'amministratore di WordPress, come assicurarsi che l'esistenza di un foglio di stile di un tema WordPress non rompa i componenti semplicemente caricandoli.

"Perché ripensare, ricostruire e migliorare input, pulsanti, modali, menu a discesa e altri?" ribatté Quach in risposta. "In modo che tu lo sviluppatore non debba."

Cosa significa questo per gli sviluppatori?

Il rispetto della compatibilità con le versioni precedenti è qualcosa che Quach ha affermato di aver preso molto sul serio durante la progettazione dell'architettura del progetto G2 Components. Ha anche affermato che faceva parte della strategia di integrazione da lui proposta.

"Ho detto che questo progetto 'incarna l'idea di migliorare le interfacce utente e le esperienze utente per gli altri'", ha affermato. "La considerazione della compatibilità con le versioni precedenti e il supporto della migrazione di terze parti rientrano assolutamente nella categoria dell'esperienza utente".

Poiché il team di Gutenberg continua a integrare nuovi componenti, non dovrebbe cambiare ciò che gli sviluppatori hanno già fatto. Tuttavia, potrebbe aprire alcune nuove possibilità.

"Il nuovo Component System aiuterà sicuramente il reparto UI", ha affermato Quach. “Un'area di cui sono particolarmente entusiasta è lo spazio di sviluppo rapido/prototipazione. Poiché questi componenti sono unità autonome, possono essere inseriti in piattaforme come CodeSandbox e... semplicemente... funzionano. Puoi iniziare a correre e costruire e condividere rapidamente prototipi (che vanno da piccoli ma potenti a grandi e in carica)."

Ha affermato di aver avuto successo nel testare i progetti dei componenti e nel dimostrare idee per un rapido feedback. Ha anche lavorato nella direzione opposta, costruendo componenti complessi in CodeSandbox e riportandoli nel Component System.

"Come designer e sviluppatore front-end, non posso sottolineare quanto sia efficiente, efficace e creativamente liberatorio questo flusso di lavoro di 'micro edificio'", ha affermato. "È qualcosa che sono entusiasta che anche gli altri possano sperimentare."