Comment un studio de jeux basé à Munich utilise WordPress et Gutenberg pour alimenter son site Web

Mimimi, un studio de jeux primé basé à Munich, a lancé un nouveau site Web WordPress qui fournit une étude de cas intéressante sur Gutenberg à l'état sauvage. Bien que vous ne puissiez pas le dire depuis l'interface, dans les coulisses, le nouvel éditeur basé sur des blocs alimente la mise en page avec des blocs personnalisés, permettant à l'équipe Mimimi de mettre facilement à jour diverses sections de leur site Web.

Luehrsen Heinrich, une agence de publicité locale, a créé le site avec un thème personnalisé et sept blocs adaptés pour répondre aux exigences d'édition de l'équipe Mimimi.

"La tâche générale était de créer un site Web élégant, très facile et rapide à entretenir et qui recevra peut-être plus tard une section blog/actualités", a déclaré Hendrik Luehrsen, PDG de Luehrsen Heinrich. « Nous savions que notre client avait des gens incroyablement créatifs et férus de technologie qui nous faisaient confiance. Cela nous a donné confiance pour aller à Gutenberg.

Le site utilise un bloc d'arrière-plan qui permet aux éditeurs de créer différents motifs d'arrière-plan et des séparateurs ondulés. Luehrsen a déclaré que cela fonctionnait avec les "InnerBlocks", similaires aux colonnes, de sorte qu'il pouvait héberger n'importe quel autre bloc.

Le site dispose également d'un bloc Discord personnalisé qui récupère dynamiquement certains paramètres pour afficher un ensemble d'utilisateurs de Discord, que Mimimi utilise pour la communication interne. Le bloc affiche une liste d'équipe mise à jour. Les médias sociaux et les blocs de jeu permettent aux éditeurs de mettre à jour facilement le texte et les images avec la mise en page déjà définie.

"Je suis presque sûr que nous pourrions faire la même mise en page à environ 80 % en combinant des colonnes, des paragraphes et des images, mais nous ne voulions pas que notre client bricole comme dans MS Word lorsque vous essayez de placer une image", a déclaré Luehrsen. . "Donc, créer un bloc de mise en page simple était une chose logique."

Le site Web de Mimimi utilise également un bloc d'inscription Mailchimp personnalisé et un bloc d'espacement personnalisé qui offre plus de flexibilité et des points d'arrêt réactifs.

"Dans l'ensemble, nous (et nos clients) sommes très satisfaits du résultat", a déclaré Luehrsen. «Nous pouvons voir l'avenir de WordPress avec cet éditeur basé sur des blocs. Mais il reste encore un très long chemin à parcourir avant que nous n'ayons vraiment plus rien à aplanir. Il y a certaines choses, qui demandent encore beaucoup de travail.

Du point de vue du développement, Luehrsen a déclaré que son équipe avait toujours du mal avec les styles de backend pour l'éditeur et que les styles frontend et backend différaient énormément à cause de cela. Ils n'ont pas encore trouvé de moyen stable et maintenable d'appliquer des styles globaux à l'éditeur Gutenberg. Outre ces problèmes en suspens, l'agence a apprécié la construction pour le nouvel éditeur et lancera bientôt un autre produit de la page Gutenberg pour un ensemble différent de clients.

Expérience Gutenberg de Mimimi Games : les éditeurs apprécient le concept de bloc mais rencontrent toujours des problèmes d'utilisabilité

Johannes Roth, PDG de Mimimi Games, a déclaré que son équipe avait utilisé WordPress dans le passé et considérait Gutenberg comme une amélioration majeure pour l'édition de contenu.

"J'adore ça, honnêtement!" Roth a dit. « C'est tellement plus facile de comprendre la configuration de la page et de la personnaliser. Si l'éditeur Gutenberg obtient quelques améliorations de l'expérience utilisateur, je le considère définitivement comme le nouvel état de l'art pour la maintenance des pages. Mais sachant qu'il n'est toujours pas officiellement sorti, il a été super robuste et facile à comprendre de mon point de vue.

Roth a déclaré que son équipe apprécie la configuration des blocs, la possibilité de réorganiser le contenu, d'avoir de petits morceaux de contenu sur lesquels travailler et d'avoir des options personnalisées par bloc.

"Il y a moins de distractions avec des barres d'outils bizarres et l'accent est mis sur le contenu", a déclaré Roth. "Cela ressemble également plus à la façon dont nous devrions penser à séparer la partie mise en forme et décoration du contenu, ainsi qu'à configurer des pages appropriées pour la convivialité SEO."

Roth a identifié deux choses qui manquent à l'équipe Mimimi dans l'éditeur précédent :

• Appuyer sur la tabulation pour mettre en retrait les listes à puces et décaler la tabulation pour inverser
• Utiliser ctrl+a pour sélectionner rapidement tout le texte à l'intérieur d'un bloc (il sélectionne parfois toute la page, ce qui n'aide pas).

"Le plus gros problème avec la convivialité jusqu'à présent a été la combinaison de blocs et de colonnes, ce qui rend parfois très difficile d'appuyer sur l'icône '...' parce que les zones de survol sont empilées", a déclaré Roth.

Permettre aux conteurs d'histoires sur le Web moderne : pourquoi Luehrsen Heinrich a fait le saut dans le développement de Gutenberg en tant qu'agence

Luehrsen a déclaré que son agence avait décidé de monter à bord du train Gutenberg l'année dernière à WordCamp Europe, après avoir abandonné ses propres idées pour créer un nouveau constructeur de pages.

"Un ou deux mois avant la WCEU à Paris, nous étions assis sur un concept et une version alpha de notre propre système de création de pages qui ressemblait effroyablement à l'approche basée sur les blocs", a déclaré Luehrsen. « Ce Q&A de Matt nous a rapidement fait réaliser que notre projet était déjà obsolète. Nous avons eu la chance d'avoir traversé assez rapidement les cinq étapes du deuil (ce post sur les données structurées a dû être un « marchandage »). Nous avons réorganisé nos priorités et commencé à travailler avec et sur Gutenberg fin octobre ou novembre 2017. »

Luehrsen Heinrich est une petite agence de seulement quatre personnes qui sont toutes impliquées avec Gutenberg de différentes manières. Luehrsen est un contributeur actif sur le projet, soumettant son premier PR pendant les vacances de Noël. L'équipe compte également un développeur qui connaît parfaitement la création de blocs, un concepteur qui conçoit l'UX et le style de leurs blocs, et un chef de projet qui travaille avec les clients sur leurs exigences d'édition de Gutenberg.

Luehrsen a déclaré qu'être un contributeur de Gutenberg a énormément aidé à apprendre la création de blocs, malgré l'absence d'expérience préalable avec React et ES6.

"Travailler avec Gutenberg, contribuer au projet et obtenir des commentaires immédiats de la formidable équipe de Gutenberg nous a beaucoup aidés à démarrer notre processus", a déclaré Luehrsen. "Notre processus de création de blocs actuel s'appuie fortement sur le travail de Gary, Adam, Matias et de tous les autres, à l'exception peut-être du fait que nous utilisons LESS en interne, et non SCSS. Mais de la structure des dossiers au processus de construction, en passant par la structuration du fichier, nous essayons de suivre le style de dépôt Gutenberg aussi étroitement que possible, car cela facilite le débogage et la recherche de problèmes.

Après avoir réussi le saut pour créer le nouveau site Web alimenté par Gutenberg de Mimimi Games, l'équipe de Luehrsen est à bord pour créer plus de sites clients avec le nouvel éditeur. Il y voit un moyen d'offrir une meilleure expérience utilisateur à un meilleur rapport qualité-prix pour le client.

"Nos clients partagent notre conviction que la narration sur le Web moderne est bien plus que la simple écriture de texte", a déclaré Luehrsen. "TinyMCE en tant qu'éditeur de 'Rich Text' a fait un travail incroyable, mais combiner différents types de médias pour une histoire cohérente était un gâchis avec des métaboxes, des codes abrégés et parfois pour les teasers, vous deviez même quitter l'écran d'édition. Gutenberg combine tout cela d'une manière agréable et discrète. Et, comme toujours : si vous pouvez obtenir un bon résultat plus rapidement, ce temps gagné est essentiellement ce que le client achète. »