Wie ein Münchener Game Studio WordPress und Gutenberg nutzt, um seine Website zu betreiben

Mimimi, ein preisgekröntes Spielestudio mit Sitz in München, hat eine neue WordPress-Website gestartet, die eine interessante Fallstudie zu Gutenberg in freier Wildbahn bietet. Obwohl Sie es vielleicht nicht vom Frontend aus erkennen können, versorgt der neue blockbasierte Editor hinter den Kulissen das Layout mit benutzerdefinierten Blöcken, sodass das Mimimi-Team verschiedene Bereiche seiner Website problemlos aktualisieren kann.

Luehrsen Heinrich, eine lokale Werbeagentur, erstellte die Website mit einem benutzerdefinierten Thema und sieben Blöcken, die darauf zugeschnitten sind, die Bearbeitungsanforderungen des Mimimi-Teams zu unterstützen.

„Die allgemeine Aufgabe bestand darin, eine elegante Website zu erstellen, die sehr einfach und schnell zu warten ist und die vielleicht später einen Blog-/News-Bereich bekommt“, sagte Hendrik Luehrsen, CEO von Luehrsen Heinrich. „Wir wussten, dass unser Kunde einige erstaunlich kreative und technisch versierte Leute hat, die uns vertraut haben. Das hat uns zuversichtlich gemacht, in Gutenberg einzusteigen.“

Die Website verwendet einen Hintergrundblock, der es Redakteuren ermöglicht, verschiedene Hintergrundmuster und wellenförmige Trennzeichen zu erstellen. Luehrsen sagte, es funktioniert mit „InnerBlocks“, ähnlich wie Spalten, sodass es jeden anderen Block hosten kann.

Die Website verfügt auch über einen benutzerdefinierten Discord-Block, der einige Einstellungen dynamisch abruft, um eine Reihe von Benutzern von Discord anzuzeigen, die Mimimi für die interne Kommunikation verwendet. Der Block zeigt eine aktualisierte Teamliste an. Soziale Medien und Spielblöcke ermöglichen es Redakteuren, Texte und Bilder mit dem bereits festgelegten Layout einfach zu aktualisieren.

„Ich bin mir ziemlich sicher, dass wir zu etwa 80 % dasselbe Layout erstellen könnten, indem wir Spalten, Absätze und Bilder kombinieren, aber wir wollten nicht, dass unser Kunde wie in MS Word herumfummelt, wenn Sie versuchen, ein Bild zu platzieren“, sagte Luehrsen . „Daher war die Erstellung eines einfachen Layoutblocks eine logische Sache.“

Die Website von Mimimi verwendet auch einen benutzerdefinierten Mailchimp-Anmeldeblock und einen benutzerdefinierten Abstandsblock, der mehr Flexibilität und reaktionsfähige Haltepunkte bietet.

„Alles in allem sind wir (und unsere Kunden) mit dem Ergebnis sehr zufrieden“, sagte Luehrsen. „Mit diesem blockbasierten Editor können wir die Zukunft von WordPress voraussehen. Aber es ist noch ein sehr langer Weg, bis wir wirklich nichts mehr zu glätten haben. Es gibt bestimmte Dinge, die noch viel Arbeit erfordern.“

Aus Entwicklungssicht sagte Luehrsen, dass sein Team immer noch mit den Backend-Stilen für den Editor zu kämpfen hat und dass sich Frontend- und Backend-Stile deshalb stark unterscheiden. Sie haben auch noch keinen wartbaren, stabilen Weg gefunden, globale Stile auf den Gutenberg-Editor anzuwenden. Abgesehen von diesen ausstehenden Problemen hat die Agentur Spaß daran, für den neuen Herausgeber zu bauen, und hat bald ein weiteres Gutenberg-Seitenprodukt für eine andere Gruppe von Kunden auf den Markt gebracht.

Gutenberg-Erfahrung von Mimimi Games: Redakteure schätzen das Block-Konzept, stoßen aber immer noch auf Usability-Probleme

Johannes Roth, CEO von Mimimi Games, sagte, sein Team habe WordPress in der Vergangenheit verwendet und sehe in Gutenberg eine große Verbesserung für die Bearbeitung von Inhalten.

„Ich liebe es absolut, ehrlich!“ sagte Roth. „Es ist so viel einfacher, die Einrichtung der Seite zu verstehen und sie anzupassen. Wenn der Gutenberg-Editor ein paar Verbesserungen der Benutzererfahrung erhält, sehe ich ihn definitiv als den neuen Stand der Technik für die Pflege von Seiten an. Aber da ich weiß, dass es immer noch nicht offiziell veröffentlicht wurde, war es aus meiner Sicht super robust und leicht verständlich.“

Roth sagte, sein Team schätze das Block-Setup, die Möglichkeit, Inhalte neu zu organisieren, kleine Inhaltsblöcke zu bearbeiten und maßgeschneiderte Optionen pro Block zu haben.

„Es gibt weniger Ablenkungen durch seltsame Symbolleisten und der Fokus liegt auf dem Inhalt“, sagte Roth. „Es ähnelt auch eher der Art und Weise, wie wir darüber nachdenken sollten, den Formatierungs- und Dekorationsteil vom Inhalt zu trennen und die richtigen Seiten für SEO-Freundlichkeit einzurichten.“

Roth identifizierte zwei Dinge, die das Mimimi-Team gegenüber dem vorherigen Editor vermisst:

• Drücken Sie die Tabulatortaste, um Aufzählungslisten einzurücken, und verschieben Sie die Tabulatortaste, um sie umzukehren
• Verwenden Sie Strg + A, um schnell den gesamten Text in einem Block auszuwählen (es wird manchmal die gesamte Seite ausgewählt, was nicht hilft).

„Das bisher größte Problem bei der Benutzerfreundlichkeit war die Kombination von Blöcken und Spalten, was es manchmal wirklich schwierig macht, das ‚…'-Symbol zu treffen, weil die Mouseover-Zonen gestapelt werden“, sagte Roth.

Ermöglichung von Geschichtenerzählern im modernen Web: Warum Luehrsen Heinrich als Agentur den Sprung in die Gutenberg-Entwicklung wagte

Luehrsen sagte, seine Agentur habe letztes Jahr beim WordCamp Europe beschlossen, in den Gutenberg-Zug einzusteigen, nachdem sie ihre eigenen Ideen für die Erstellung eines neuen Seitenerstellers aufgegeben hatten.

„Ein oder zwei Monate vor der WCEU in Paris saßen wir an einem Konzept und einer Alpha-Version unseres eigenen Seitenerstellungssystems, das dem blockbasierten Ansatz erschreckend ähnlich war“, sagte Luehrsen. „Diese Fragen und Antworten von Matt ließen uns schnell erkennen, dass unser Projekt bereits veraltet war. Wir hatten Glück, dass wir die fünf Phasen der Trauer ziemlich schnell durchlaufen haben (dieser Beitrag zu strukturierten Daten muss „Feilschen“ gewesen sein). Wir haben unsere Prioritäten neu geordnet und Ende Oktober oder November 2017 begonnen, mit und an Gutenberg zu arbeiten.“

Luehrsen Heinrich ist eine kleine Agentur mit nur vier Personen, die alle auf unterschiedliche Weise mit Gutenberg zu tun haben. Luehrsen beteiligt sich aktiv an dem Projekt und reicht seine erste PR über die Weihnachtsferien ein. Das Team hat auch einen Entwickler, der die Blockerstellung in- und auswendig kennt, einen Designer, der die UX und den Stil ihrer Blöcke entwirft, und einen Projektmanager, der mit den Kunden an ihren Gutenberg-Bearbeitungsanforderungen arbeitet.

Luehrsen sagte, ein Gutenberg-Beitragender zu sein, habe bei der Erstellung von Lernblöcken immens geholfen, obwohl er keine Erfahrung mit React und ES6 habe.

„Mit Gutenberg zusammenzuarbeiten, zum Projekt beizutragen und sofortiges Feedback von dem großartigen Gutenberg-Team zu erhalten, hat uns sehr dabei geholfen, unseren Prozess zu beschleunigen“, sagte Luehrsen. „Unser aktueller Blockerstellungsprozess baut stark auf der Arbeit von Gary, Adam, Matias und all den anderen auf, vielleicht mit der Ausnahme, dass wir intern LESS und nicht SCSS verwenden. Aber von der Ordnerstruktur über den Build-Prozess bis hin zur Strukturierung der Datei versuchen wir, dem Gutenberg-Repo-Stil so genau wie möglich zu folgen, da dies das Debuggen und Finden von Problemen sehr einfach macht.“

Nach dem erfolgreichen Sprung zum Aufbau der neuen Gutenberg-basierten Website von Mimimi Games ist Luehrsens Team an Bord, um mit dem neuen Editor weitere Kundenseiten zu erstellen. Er sieht darin eine Möglichkeit, dem Kunden ein besseres Benutzererlebnis zu einem besseren Preis-Leistungs-Verhältnis zu bieten.

„Unsere Kunden teilen unsere Überzeugung, dass das Geschichtenerzählen im modernen Web viel mehr ist als nur das Schreiben von Texten“, sagte Luehrsen. „TinyMCE als 'Rich Text'-Editor hat einen tollen Job gemacht, aber dennoch war das Kombinieren verschiedener Medientypen zu einer zusammenhängenden Geschichte ein Durcheinander mit Metaboxen, Shortcodes und manchmal musste man für Teaser sogar den Bearbeitungsbildschirm verlassen. Gutenberg vereint all dies auf eine schöne, unaufdringliche Art und Weise. Und wie immer gilt: Wenn man schneller zu einem guten Ergebnis kommt, kauft der Kunde diese Zeitersparnis.“