Wenn du die Entwicklung von WordPress und dem Block Editor in den letzen Monaten mitverfolgt hast, dann hast du vermutlich die Begriffe «Fullsite Editing», «Block Themes» oder «Site Editor» in der ein oder anderen Form schon einmal gehört. Worum es dabei geht und wie wir diese neue Art der WordPress Themes heute in unseren eigenen sowie auch in Kundenprojekten einsetzen, möchten wir in diesem Artikel zeigen.
Was sind Fullsite Editing / Block Themes?
Hinter dem Begriff Full Site Editing oder FSE verbirgt sich eine neue Art, Themes für WordPress zu entwickeln. Ein Block Theme ermöglicht es dem Benutzer statt «nur» der Inhalte auch die Layouts der gesamten Webseite über den Site Editor zu bearbeiten, was früher den Templates im Theme vorbehalten war. Dies ist im Grossen und Ganzen flexibler und bietet für Endbenutzer einige neue Möglichkeiten, hat aber auch einige Tücken. Für uns als Agentur stellte sich zudem die Frage, ob diese neue Art von Themes auch für unsere Kundenprojekte einen Mehrwert bieten kann und inwiefern wir diese in unserer Arbeit sinnvoll einsetzen können.
Erstes Block Theme
Nachdem der Begriff «FSE» resp. Block Themes nun schon einige Jahre umhergeisterte und wir immer mal wieder damit herum experimentierten, war es letztes Jahr an der Zeit sich, eingehender damit zu befassen. Um kein unnötiges Risiko einzugehen, machte ich (Claudio) mich Ende 2023 daran, das neue Design meiner eigenen Website in Form eines Block Themes umzusetzen.
Nach einigen eher ernüchternden ersten Experimenten 2022 war ich positiv überrascht, wieviel sich in der Zwischenzeit getan hatte! Vieles, was ein Jahr zuvor noch unmöglich oder nur mit viel Fantasie umsetzbar war, wurde unterdessen unterstützt und war kein Problem mehr. Parallel zu meinen ersten Experimenten begannen wir mit der Arbeit an einer neuen Website für unser eigenes Plugin picu, ebenfalls als Block Theme. Die Erfahrung aus diesen beiden Projekten gab uns die nötige Sicherheit, um ein erstes ein Kundenprojekt mit einem Block Theme in Angriff zu nehmen.
Vorteile eines Block Themes
Bevor wir näher auf die technischen Details eingehen, hier ein kurzer Exkurs in die Vorteile von Block Themes.
WYSIWYG: Einer der Hauptvorteile von Block Themes ist, wie bereits beim Block-Editor (Gutenberg), dass das Design im Editor so dargestellt wird, wie es auch die Besucher:innen später sehen. Also WYSIWYG oder What you see is what you get. Das macht die Arbeit für die Editor:in wesentlich einfacher, da keine Unsicherheiten bestehen wie eine Änderung sich auswirken wird, und man nicht ständig zwischen den Ansichten hin und her wechseln muss.
Performance: Gegenüber «Classic» Themes bieten Block Themes diverse Verbesserungen, was die Geschwindigkeit betrifft. Zum Beispiel können die CSS Styles statt in einem einzigen, riesigen File in einzelne Files je Block aufgeteilt werden, und diese werden dann nur bei Bedarf geladen, also nur wenn die entsprechenden Blöcke auch tatsächlich auf der Seite vorhanden sind. WordPress geht hier sogar noch einen Schritt weiter und bindet die Styles bis zu einer gewissen Grösse direkt im Header der Seite ein, so dass zusätzliche Requests gespart werden können. Alles in Allem wurde hier schon an sehr vieles gedacht. Man gibt zwar ein wenig Kontrolle ab und muss seine Workflows teilweise etwas anpassen, erhält dafür im Gegenzug viele Performance Benefits sozusagen kostenlos dazu.
Landing Pages mit Vorlagen super schnell umsetzbar: Es lassen sich exakt auf die Bedürfnisse zugeschnittene Vorlagen (sogenannte Block Patterns) erstellen, mit denen Bausteine oder auch gesamte Seiten sehr einfach umzusetzen sind. Dies ermöglicht es neue Landingpages oder sonstige Seiten sehr schnell und unkompliziert aufzubauen, ohne dazu Änderungen am Code vornehmen zu müssen.
Schwierigkeiten / Kinderkrankheiten
Neben aller Liebe für Block Themes, gab es natürlich auch einige Punkte, die noch nicht optimal sind oder die uns etwas Kopfzerbrechen bereiteten. Vieles davon ist aber bereits aktiv in Arbeit oder wurde unterdessen sogar schon verbessert.
Git Versionierung: In unserer täglichen Arbeit nutzen wir Git zur Versionierung, um eine sichere Umgebung zu haben, Checks laufen zu lassen und jederzeit die Kontrolle über alle Änderungen zu behalten. Dabei werden alle Änderungen, die an Dateien vorgenommen werden protokolliert und dadurch nachvollziehbar (und notfalls umkehrbar) gemacht. Block Themes brechen hier mit einigen Konventionen, was uns für die professionelle Agenturarbeit anfangs vor einige Herausforderungen stellte und wir mussten unsere Workflows entsprechend anpassen. In diesem Artikel (englisch) habe ich meine ersten Erfahrungen und einige technische Details etwas detaillierter dokumentiert.
Navigation Blocks: um die Menus einer Website zu steuern, gibt es neu einen Navigation Block, der im Site Editor in das Seiten-Template eingefügt und bearbeitet werden kann. Dies funktioniert zwar für Enduser recht gut, stellte uns aber in Kombination mit der oben genannten Versionierung vor einige Probleme. Zum Beispiel wird die Trennung zwischen Template und Inhalt an manchen Stellen erschwert und wir mussten teilweise manuell nachbessern.
Zugriffsrechte Site Editor: in unserem Alltag definieren wir das Design und die Aufgabe der Kund:innen ist es in der Regel, alle Inhalte zu erstellen und pflegen zu können. Dazu stellen wir alle Designelemente und Bausteine zur Verfügung, damit dies einfach vonstatten gehen kann. In keinem Fall soll es aber möglich sein, dass Kunden bewusst oder versehentlich Änderungen an Templates vornehmen oder die Styles der gesamten Seite ändern – erst recht nicht auf einer Live Seite. Hier wäre es wünschenswert, wenn die Zugriffsrechte zum Site Editor in Zukunft einfacher und genauer eingestellt werden könnten.
Design to Block Theme
Im Falle des beschriebenen Kundenprojektes haben wir vom Designer des Kunden ein figma File erhalten, welches es umzusetzen galt. In einem ersten Schritt sind wir die Elemente durchgegangen und haben und erste Notizen gemacht und überlegt, wie wir diese mittels Blöcken umsetzen könnten. Nachdem klar war, dass vom grundsätzlichen Aufbau her alles passt, kam das Thema Mehrsprachigkeit an die Reihe. Da die Seite in mehreren Sprachen aufgebaut werden sollte, mussten wir hier noch einige Tests durchführen und abklären, ob alles bereits so funktioniert wie wir uns das von Classic Themes gewohnt sind. Dazu setzen wir seit Längerem auf Polylang (Pro), was uns auch hier nicht im Stich liess und auch mit Block Themes ohne Probleme funktionierte.
Insgesamt lässt sich sagen, dass die Kund:innen – und speziell deren Designer – mehr als zufrieden mit dem Endergebnis waren. Vor Allem die Arbeit mit den von uns vorgefertigten Block Patterns machten das Erstellen von neuen Inhalten sehr einfach, was vom Kunden rege genutzt wird. Während der Inhaltserstellung gab es ausserdem sehr wenige Nachfragen seitens des Kunden zur Umsetzung, was immer ein gutes Zeichen ist.
Fazit
Alles in Allem bieten Block Themes bereits heute sehr viele Möglichkeiten, die vor einigen Jahren noch undenkbar gewesen wären und die uns die Arbeit mit Kund:innen erleichtern können. Wie immer steckt der Teufel allerdings im Detail und die Probleme, die es heute noch gibt, können sehr spezifisch sein und einem eine Menge Arbeit kosten. Es ist deshalb unbedingt zu empfehlen, eine mögliche Umsetzung sauber zu planen und vorgängig ausreichende Tests zu machen. Sind alle technischen Aspekte geklärt steht einer Umsetzung als Block Theme aber heute nichts im Wege!
Hast du Fragen zum Block Editor, Fullsite Editing oder WordPress im Allgemeinen? Melde dich bei uns und wir beraten dich gerne!
