Redesign – zwischen Wut und Wahnsinn

Nach monatelanger Arbeit ist es nun endlich soweit: Ein aktualisiertes Design steht für die Epiphyt-Websites zur Verfügung. Dabei sollte eigentlich alles ganz anders gehen – nämlich bereits viel früher und schneller.

Tschüss Storefront, hallo Goodall v2 👋🏻

Als wir damals das Epiphyt-Projekt starteten, konnten wir uns die Arbeit gut teilen. Während ich primär an den Plugins werkelte, übernahm Simon die Website. Da aber ein Tag immer nur 24 Stunden hat, musste sich Simon leider zeitlich bedingt zwischenzeitlich entscheiden, das Epiphyt-Projekt zu verlassen.

Da aber die erste Version der Website eher schnell als umfangreich erstellt wurde, haben wir dort Einschränkungen in Kauf genommen, die wir eigentlich als gar nicht so wichtig empfanden: das Theme war als Child-Theme von Storefront aufgebaut – dem Standard-Theme für WooCommerce.

Insbesondere bei Updates sowohl des WordPress-Cores als auch von Storefront selbst bemerkten wir, wie immer wieder Dinge kaputt gingen. Daher war uns schnell klar, dass wir unser Theme von Grund auf neu erstellen mussten.

Da wir zudem recht früh hier den Block-Editor produktiv einsetzten, mussten wir uns hier mit Dingen behelfen, die mittlerweile selbstverständlich sind. So war hier noch bis vor kurzem ein Abschnitts-Block aktiv, da es damals den Gruppen-Block noch gar nicht gab. Auch kannten wir uns zu dieser Zeit noch nicht mit der Erstellung von Blöcken aus.

Somit seht ihr hier nun die Weiterentwicklung von Goodall, unserem Theme für Epiphyt, benannt nach Dame Jane Morris Goodall, in seiner vollen zweiten Ausbaustufe und von Grund auf neu.

Block-Theme? Leider nein. 😞

Nachdem ich letztendlich im Dezember 2021 mit der neuen Version des Themes beginnen wollte, stellte sich zuerst die Frage: Block-Theme, ja oder nein? Letztendlich fiel die Entscheidung schnell: Leider nein.

Zum einen ist das Full Site Editing noch in den Kinderschuhen und muss wohl noch reifen, zum anderen gibt es ganz eindeutig noch konzeptionelle Schwächen. So muss ich für Mehrsprachigkeit in den Templates mit Block-Vorlagen arbeiten. Aber was, wenn man nun Inhalte auf Basis dieser Block-Vorlagen ändern will, die man bereits verwendet? Dann bleibt nur die Möglichkeit, wiederverwendbare Blöcke zu verwenden. Aber auch die sind dann auf eine Sprache begrenzt und damit müssen sie dort für jede Sprache neu angepasst werden.

Ebenfalls kann der Logo-Block noch nicht vernünftig mit SVGs umgehen. Das sollte nach meinem Empfinden nach Standard sein, insbesondere für Logos.

Darüber hinaus gibt es noch einige UI-Schwächen, die letztendlich dazu geführt haben, dass Goodall ein ganz normales Theme ist und bis auf weiteres auch bleibt.

Keine gute Idee: Material-UI-inspirierte Eingabefelder 🤯

Auch wenn ich die gesamte Design-Sprache der Material UI von Google nicht vollumfänglich schön finde, gibt es doch einige Elemente, die ich daraus gerne verwende. Allem voran die Eingabefelder. Um diese rein per CSS umzusetzen, benötigt man hauptsächlich zwei Dinge:

Das Eingabefeld muss sich vor dem dazugehörigen Label auf derselben Ebene befinden.
Das Eingabefeld benötigt einen hinterlegten Platzhalter, der ein Leerzeichen beinhaltet (placeholder=" ").

Beides ist standardmäßig in WordPress nicht gegeben.

Während das aber für den Kommentarbereich beispielsweise recht schick gelöst werden kann, schließlich kann man die Felder als Attribute an die Funktion comment_form() übergeben, um sie dementsprechend anzeigen zu lassen, wie man es möchte, war es für WooCommerce unangenehmer.

Dort gibt es leider keine entsprechende Möglichkeit und verwendete Plugins machen es nicht einfacher. Am Ende musste ich die Templates für das Bearbeiten von Konto- und Adress-Details sowie das Template für die Rezensionen überschreiben.

Zusätzlich musste ich aber noch die gesamte Funktionalität für die Ausgabe von WooCommerce-Formfelder überschreiben und mit einer angepassten Version, die sonst identisch zur Originalfunktion ist, ersetzen.

Alles in Allem also eine schlechte Idee – das Ergebnis mag ich dennoch.

Mehr geht immer …

Noch ist das Theme nicht bis auf’s letzte optimiert. Dazu gehört unter anderem das Aufteilen des CSS, sodass wirklich nur noch das CSS geladen wird, das auf der aktuellen Seite auch benötigt wird. Für die erste Iteration denke ich aber, ist das Theme schon zeigenswert.

Zudem ging es mir insbesondere auch darum, die zusätzlichen Informationen, die nun in besserem Licht dargestellt werden, auch schnellstmöglich zu veröffentlichen, damit ihr auch etwas davon habt.

Migration über Migration 🙈

Etwas unterschätzt habe ich tatsächlich die Migration, um im neuen Theme alles sauber zu haben. Während ich die Inhaltsseiten noch gut in der lokalen Entwicklungsumgebung vorbauen und dann nur die Bilder austauschen musste, war es bei bestehenden Seiten schon schwieriger. Insbesondere, da sie sich teilweise inhaltlich von der Entwicklungsumgebung unterschieden und nicht 1:1 kopiert werden konnten.

Weiterhin kommt noch hinzu, dass ich un endlich auch hier auf den Syntax-highlighting Code Block (with Server-side Rendering) setze, wodurch ich alle Beiträge durchgehen und gegebenenfalls Ersetzungen bestehender Blöcke vornehmen musste. Von den Dokumentationen ganz zu schweigen …

Next up: welcome English people 📣

Das Theme ist bereits für die Mehrsprachigkeit vorbereitet – inklusive Sprachwechsler. Was noch fehlt, ist die Übersetzung der Website sowie eine Lösung für die Anbindung der Lizenz-API, sodass Updates funktionieren, egal über welche Sprache man ein Produkt gekauft hat. Denn die von mir eingesetzte simple Lösung setzt zwei separate Shops für beide Sprachen voraus.

Ein Dank geht an Pia, die für das grundlegende Design als Mockup verantwortlich war. ❤️