Come uno studio di gioco con sede a Monaco di Baviera utilizza WordPress e Gutenberg per alimentare il proprio sito web

Mimimi, uno studio di giochi pluripremiato con sede a Monaco, ha lanciato un nuovo sito Web WordPress che fornisce un interessante case study di Gutenberg in the wild. Anche se potresti non essere in grado di dirlo dal frontend, dietro le quinte il nuovo editor basato su blocchi sta alimentando il layout con blocchi personalizzati, consentendo al team di Mimimi di aggiornare facilmente varie sezioni del proprio sito Web.

Luehrsen Heinrich, un'agenzia pubblicitaria locale, ha creato il sito con un tema personalizzato e sette blocchi su misura per supportare i requisiti di modifica del team Mimimi.

"Il compito generale era creare un sito Web elegante che fosse molto facile e veloce da mantenere e che forse in seguito avrebbe avuto una sezione blog/notizie", ha affermato Hendrik Luehrsen, CEO di Luehrsen Heinrich. “Sapevamo che il nostro cliente ha alcune persone straordinariamente creative ed esperte di tecnologia che si sono fidate di noi. Questo ci ha reso fiduciosi di entrare in Gutenberg".

Il sito utilizza un blocco di sfondo che consente agli editor di creare diversi modelli di sfondo e separatori ondulati. Luehrsen ha detto che funziona con "InnerBlocks", simile alle colonne, quindi può ospitare qualsiasi altro blocco.

Il sito ha anche un blocco Discord personalizzato che recupera dinamicamente alcune impostazioni per visualizzare un insieme di utenti da Discord, che Mimimi utilizza per la comunicazione interna. Il blocco mostra un elenco di squadre aggiornato. I social media e i blocchi di gioco consentono agli editor di aggiornare facilmente testo e immagini con il layout già impostato.

"Sono abbastanza sicuro che potremmo fare lo stesso layout a circa l'80% combinando colonne, paragrafi e immagini, ma non volevamo che il nostro cliente si gingillasse come in MS Word quando provi a posizionare un'immagine", ha detto Luehrsen . "Quindi creare un semplice blocco di layout era una cosa logica."

Il sito Web di Mimimi utilizza anche un blocco di registrazione Mailchimp personalizzato e un blocco distanziatore personalizzato che offre maggiore flessibilità e punti di interruzione reattivi.

"Tutto sommato noi (e i nostri clienti) siamo molto soddisfatti del risultato", ha affermato Luehrsen. “Possiamo vedere il futuro di WordPress in anticipo con questo editor basato su blocchi. Ma c'è ancora molta strada da fare prima che non avremo più nulla da appianare. Ci sono alcune cose che richiedono ancora molto lavoro”.

Dal punto di vista dello sviluppo, Luehrsen ha affermato che il suo team ha ancora problemi con gli stili di back-end per l'editor e che gli stili di front-end e back-end differiscono notevolmente per questo. Inoltre, non hanno ancora trovato un modo manutenibile e stabile per applicare gli stili globali all'editor di Gutenberg. Oltre a questi problemi in sospeso, l'agenzia si è divertita a costruire per il nuovo editore e ha presto lanciato un altro prodotto della pagina di Gutenberg per un diverso gruppo di clienti.

Esperienza Gutenberg di Mimimi Games: gli editori apprezzano il concetto di blocco ma incontrano ancora problemi di usabilità

Johannes Roth, CEO di Mimimi Games, ha affermato che il suo team ha utilizzato WordPress in passato e vede Gutenberg come un importante miglioramento per la modifica dei contenuti.

"Lo adoro assolutamente, onestamente!" ha detto Roth. “È molto più facile comprendere l'impostazione della pagina e personalizzarla. Se l'editor di Gutenberg ottiene alcuni miglioramenti dell'esperienza utente, lo vedo sicuramente come il nuovo stato dell'arte per il mantenimento delle pagine. Ma sapendo che non è ancora stato rilasciato ufficialmente, è stato super robusto e facile da capire dal mio punto di vista".

Roth ha affermato che il suo team apprezza l'impostazione dei blocchi, la capacità di riorganizzare i contenuti, avere piccoli frammenti di contenuti su cui lavorare e avere opzioni personalizzate per blocco.

"Ci sono meno distrazioni con barre degli strumenti strane e l'attenzione è concentrata sul contenuto", ha detto Roth. "Assomiglia anche più da vicino al modo in cui dovremmo pensare a dividere la parte di formattazione e decorazione dal contenuto, oltre a creare pagine adeguate per la compatibilità SEO".

Roth ha identificato due cose che al team di Mimimi mancano rispetto al precedente editore:

• Premendo Tab per rientrare elenchi puntati e MAIUSC per invertire
• Usando ctrl+a per selezionare rapidamente tutto il testo all'interno di un blocco (a volte seleziona l'intera pagina, il che non aiuta).

"Il problema più grande con l'usabilità finora è stata la combinazione di blocchi e colonne, che a volte rende davvero difficile colpire l'icona '...' perché le zone di passaggio del mouse vengono impilate", ha affermato Roth.

Abilitare i narratori nel Web moderno: perché Luehrsen Heinrich ha fatto il salto nello sviluppo di Gutenberg come agenzia

Luehrsen ha detto che la sua agenzia ha deciso di salire a bordo del treno Gutenberg l'anno scorso al WordCamp Europe, dopo aver abbandonato le proprie idee per creare un nuovo generatore di pagine.

"Uno o due mesi prima del WCEU a Parigi, eravamo seduti su un concetto e una versione alfa del nostro sistema di creazione di pagine che era spaventosamente simile all'approccio basato sui blocchi", ha detto Luehrsen. “Quel Q&A di Matt ci ha fatto capire subito che il nostro progetto era già obsoleto. Siamo stati fortunati ad aver attraversato abbastanza rapidamente le cinque fasi del lutto (questo post sui dati strutturati deve essere stato "trattativa"). Abbiamo riordinato le nostre priorità e abbiamo iniziato a lavorare con e su Gutenberg alla fine di ottobre o novembre 2017".

Luehrsen Heinrich è una piccola agenzia di sole quattro persone che sono tutte coinvolte con Gutenberg in modi diversi. Luehrsen contribuisce attivamente al progetto, presentando il suo primo PR durante le vacanze di Natale. Il team ha anche uno sviluppatore che conosce la creazione di blocchi dentro e fuori, un designer che progetta l'UX e lo stile dei loro blocchi e un project manager che lavora con i clienti sui loro requisiti di modifica Gutenberg.

Luehrsen ha affermato che essere un collaboratore di Gutenberg ha aiutato immensamente con la creazione di blocchi di apprendimento, nonostante non avesse precedenti esperienze con React ed ES6.

"Lavorare con Gutenberg, contribuire al progetto e ottenere un feedback immediato dal fantastico team di Gutenberg, ci ha aiutato molto nel avviare il nostro processo", ha affermato Luehrsen. “Il nostro attuale processo di creazione dei blocchi si basa fortemente sul lavoro svolto da Gary, Adam, Matias e tutti gli altri, forse con l'eccezione che stiamo usando LESS internamente e non SCSS. Ma dalla struttura delle cartelle, al processo di compilazione, alla strutturazione del file, cerchiamo di seguire lo stile del repository Gutenberg il più fedelmente possibile, in quanto ciò semplifica il debug e la ricerca dei problemi".

Dopo aver fatto con successo il salto per costruire il nuovo sito Web Gutenberg di Mimimi Games, il team di Luehrsen è a bordo per creare più siti client con il nuovo editor. Lo vede come un modo per offrire una migliore esperienza utente a un valore migliore per il cliente.

"I nostri clienti condividono la nostra convinzione che la narrazione nel web moderno sia molto più che scrivere un semplice testo", ha affermato Luehrsen. “TinyMCE come editor di 'Rich Text' ha fatto un lavoro straordinario, ma comunque, combinare diversi tipi di media in una storia coerente era un pasticcio con metabox, shortcode e, a volte, per i teaser dovevi persino lasciare la schermata di modifica. Gutenberg combina tutto questo in un modo piacevole e discreto. E, come sempre: se riesci ad ottenere un buon risultato in un modo più veloce, quel tempo risparmiato è ciò che il cliente sta essenzialmente acquistando".