Jamie Marsland ricrea la home page di WordPress.org in 20 minuti utilizzando l'editor dei blocchi

In risposta alla recente controversia sul tempo necessario per implementare la nuova home page di WordPress.org e il design della pagina di download, lo YouTuber di Gutenberg Jamie Marsland ha deciso di provare a ricrearlo con l'editor di blocchi.

Matt Mullenweg aveva commentato i piani per il passaggio allo sviluppo dei nuovi progetti, dicendo che avrebbero dovuto impiegare "ore e non settimane per essere implementati". I suoi commenti più incendiari, che hanno acceso una successiva conversazione sulla realtà del lavoro con l'editor di blocchi, hanno fatto riferimento ai concorrenti di WordPress.

"È un layout così semplice, è difficile immaginare che una singola persona richieda più di un giorno su Squarespace, Wix, Webflow o uno dei page builder di WP", ha affermato Mullenweg.

Marsland ha deciso di accettare la sfida usando Gutenberg. Per questo esercizio ha utilizzato il tema predefinito più recente di WordPress, Twenty Twenty-Two. I suoi risultati non sono identici ai nuovi design di WordPress, ma sono molto simili ed è stato in grado di creare la home page in circa 20 minuti.

Nel video (incorporato di seguito), Marsland illustra la creazione di ciascuna sezione della home page. È quello che si potrebbe descrivere come un utente esperto con l'editor di blocchi. Può rimescolare rapidamente righe, colonne e gruppi, regolare il riempimento e i margini secondo necessità e assegnare a ciascuna sezione il colore corrispondente per il disegno. A questo punto, questo non è qualcosa che la maggior parte degli utenti WordPress medi potrebbe fare, motivo per cui il video ha avuto una risposta così forte da parte degli spettatori. Il canale YouTube di Marsland è incentrato sull'aiutare gli utenti a padroneggiare la creazione di pagine utilizzando Gutenberg e i negozi con WooCommerce.

"La mia conclusione è stata che è abbastanza facile completare rapidamente il 95% del progetto, ma è l'ultimo 5% che richiede sempre più tempo nella mia esperienza", ha affermato Marsland. “La mia ipotesi è che sia stato più un processo interno a causare i ritardi, ma senza essere coinvolti è difficile dirlo con certezza. Volevo davvero dimostrare che non era un problema di Gutenberg con la costruzione del design (come Matt Mullenweg ha menzionato Wix e Squarespace e altri pagebuilder di WP.)”

Alex Shiels, un collaboratore del progetto sponsorizzato da Automattic, ha citato alcuni elementi non correlati all'editor di blocchi, che hanno causato i ritardi, incluso il lavoro verso "standard ragionevoli per a11y, reattività, compatibilità del browser, SEO e prestazioni", nonché collaborando con contributori in diversi continenti.

In risposta al tentativo di Marsland, lo sviluppatore di WordPress Patrick Boehner ha commentato come i piccoli dettagli rimangano estremamente importanti. "Puoi sicuramente dire cosa è stato guidato prima dal design rispetto a quello progettato nell'editor", ha detto Boehner.

Cinque anni dopo il debutto di Gutenberg in WordPress, gli sviluppatori di temi devono ancora dare vita a progetti che non sono stati creati pensando a un approccio block-first.

"Rimane oggi fondamentalmente difficile o impossibile prendere un design di pagina tradizionalmente simulato ed eseguire quel design usando i blocchi", ha affermato lo sviluppatore di WordPress Jon Brown. "Questo è un problema.

"Certo, i blocchi vanno bene per 'progettare una pagina nel browser' e accettare ciò che ottieni dai blocchi, ma i blocchi continuano a non avere la flessibilità e i controlli necessari per produrre un layout reattivo, accessibile e perfetto per i pixel basato su un mock-up .

"Ciò che prima richiedeva un giorno e una dozzina di righe di php e una dozzina di righe di CSS, ora richiede settimane di costruzione di blocchi personalizzati perché i blocchi principali non possono essere modificati facilmente tramite hook e mancano dei controlli di base necessari."

I collaboratori di Gutenberg stanno facendo passi da gigante introducendo una tipografia fluida e stanno monitorando una serie di problemi relativi al miglioramento della coerenza degli strumenti di progettazione. Nel frattempo, gli sviluppatori di temi stanno affrontando le difficoltà crescenti necessarie mentre l'editor di blocchi matura per accogliere coloro che sperano di rendere i loro progetti immediatamente reattivi.

"Ho creato un tema FSE completo da zero e sono rimasto sorpreso da quanto del mio design sono stato in grado di replicare con successo con l'editor, theme.json e CSS personalizzato minimo o nullo", ha affermato lo sviluppatore di temi veterano Mike McAlister . “Certo, ci sono voluti molti aggiustamenti, ma sono rimasto comunque colpito.

"Tuttavia, come menziona Jon, nel momento in cui devi regolare qualcosa per uno schermo più piccolo (o più grande se hai il coraggio di provare il design mobile-first nell'editor), colpisci un muro. È particolarmente evidente con margine, riempimento e gap di blocco, che non hanno ancora controlli reattivi. Puoi vederlo modificato tramite CSS nel nuovo tema su .org.

La reattività è uno dei problemi citati da Shiels nel motivo per cui l'implementazione dei progetti ha richiesto più tempo rispetto alla semplice ricreazione del progetto nell'editor dei blocchi.

"Tuttavia, ci sono indizi di miglioramenti in arrivo per la reattività", ha commentato McAlister. "La tipografia fluida e clamp() hanno sicuramente aiutato a tenere sotto controllo la tipografia, ma ci saranno sempre circostanze in cui è necessario un controllo ancora più preciso. Ogni altro costruttore di siti ha risolto questo problema, non c'è motivo di pensare che WordPress non possa o non lo farà. (Di certo lo spero, dato che circa il 50-60% del traffico proviene da dispositivi mobili in questi giorni!)

"Uno dei modi migliori per superare questi dolori crescenti è quello di mangiare più cibo per cani possibile, usando l'editor e FSE per costruire quanti più scenari possibili della vita reale per scoprire questi punti ciechi".

Il breve esercizio di Marsland mostra quanto puoi avvicinarti alla ricreazione del design di WordPress.org in un breve lasso di tempo se conosci l'editor di blocchi. È riuscito a dimostrare che l'interfaccia utente per la creazione di pagine di Gutenberg non è un ostacolo alla riproduzione di progetti creati in altre applicazioni. Piuttosto, sono tutti gli altri elementi dell'elenco di controllo correlati che gli sviluppatori generalmente devono risolvere al di fuori dell'editor, tra cui accessibilità, reattività e considerazioni SEO. Più Gutenberg riuscirà ad avvicinarsi alla riduzione del lavoro extra relativo alla reattività e all'accessibilità, più sarà accessibile per gli utenti regolari che cercheranno di produrre i progetti che sognano da soli.