Vor achtzehn Jahre kam ich in die Schweiz und begann meine Karriere als CMS-Entwickler. Während der Entwicklungsarbeit für ein Zeitungsredaktionssystem hat mein damaliger Chef gerne über die Vorteile von Wiederverwendbarkeit gepredigt. Er bestand darauf, dass wir möglichst viele unserer Entwicklungen als wiederverwendbare Module umsetzen sollen.
Dadurch habe ich gelernt, wie man effizienter entwickelt und die aufwendigen Module einer Website durch Wiederverwendbarkeit rentabel macht. Viele Jahre später waren dann Techniken wie Vue.js, React, Bootstrap, Object Oriented CSS und Every Layout et. Al. in aller Munde, die alle auf den gleichen Prinzipien gebaut sind. Man zerstückelt das grosse Ganze in kleinere Komponenten und setzt diese dann entsprechend vermehrt ein.
Die klassischen «Page-Builder»
Seit 2004 bietet WordPress die Möglichkeit, eigene Customisierungen des CMS mittels Plugins einzubauen. Fehlt eine benötigte Funktion, kann man diese entweder aus dem Plugin-Repository installieren, oder selber entwickeln. Als WordPress sich vom Blogging-System immer mehr zu einem vollwertigen CMS entwickelte, kamen auch diverse «Page-Builder»-Plugins auf der Markt. Diese sollen dem User eine Möglichkeit bieten, Seiten und Beiträge im Seitenbaukasten-Modus zu erstellen. Heute sind einige dieser Plugins immer noch beliebt. Sie bringen aber zwei grosse Probleme mit sich. Die Website-Betrieber und Entwicklungsteams sind von den Drittherstellern abhängig und je nach Plugin werden Inhalte in Formaten abgespeichert, welche ohne passendes Plugin nicht mehr editierbar sind.
Codename Gutenberg
Mit Gutenberg hat die WordPress-Community deshalb an einer eigenen Lösung gearbeitet, die einen modernen Arbeitsablauf ermöglicht und trotzdem nicht auf eine standardisierte Struktur verzichten muss. Die Wegbereiter dafür waren diverse Entwicklungen aus der Vergangenheit, wie zum Beispiel die REST API, die wir bereits seit 2016 in diversen Kontexten nutzen. Der Editor setzt diese API für eigene Funktionen ein.
Ende 2018 wurde WordPress 5.0 mit seinem neuen Block-Editor veröffentlicht. Anstatt die Seite als statisches Template und unflexiblen Layouts zu sehen, sollten Entwickler die einzelnen Inhaltselemente als Blöcke (oder eben wiederverwendbare Komponenten) planen. Bei Say Hello haben wir nun seit ungefähr zehn Monaten für Gutenberg entwickelt und das für WordPress neue Vorgehen fliesst seit diesem Frühling in alle Projekte ein.
Im einfachsten Fall stellt man Seiteninhalte und Beiträge aus Blöcken zusammen, die WordPress mitliefert. Daneben haben wir in unseren Projekten diverse eigene Custom-Blöcke konzipiert und entwickelt. So hat die/der Kundin/Kunde sehr viele Freiheiten in der Inhaltserfassung und muss nicht jedes mal zu uns kommen, wenn er z. B. die Reihenfolge der Blöcke umstellen möchte.
Sobald wir die Basics im Griff hatten, fingen wir gleich mit erweiterten Verfahren an. So können Blöcke u. A. Unterelemente bekommen – sogenannte Nested Blocks – die es ermöglichen, Seitenlayouts mit im Voraus gruppierten Blöcke zu bauen. Im folgenden Screenshot aus unserem neusten Projekt siehst du ein Beispiel davon.
Bei einem Beitrag in dieser Website kommt nach einem vollflächigen Bild immer ein dreispaltiger Übersichts-Block vor. Anstatt dem User eine manuelle Zusammensetzung zuzumuten, stellen wir hier also einen Custom-Block («Outer Block») mit drei inneren Blöcken zur Verfügung: eine Auflistung der Schlagwörter, ein Inhalt bestehend aus grossem und kleinem Text, und ein Bild. Jeweils mit Dummy-Inhalt zum überschreiben. Die Redaktion kann der Inhalt direkt im Block editieren: nicht in einem separaten Eingabefeld. Das Aufteilen der enthaltenen Blöcke gibt uns die Möglichkeit, Teile wie z.B. der Bild-Block in diversen anderen «Outer-Blocks» einzusetzen.
Neue Ideen und Konzepte in der Gutenberg-Entwicklung nehmen wir jeweils genau unter die Lupe und lassen diese Erfahrungen direkt in unsere Projekte einfliessen. Ausserdem tauschen wir uns oft in der Community über neue Techniken oder Best-Practices aus, wodurch wir im letzten Projekt auch eine der allerneuesten Entwicklungen einsetzen konnten: Block Areas. Diese erlauben der/dem NutzerIn nicht nur den Inhalt eines Beitrags, sondern auch die Randbereiche – Footer, Seitenspalte oder Navigation – mit eigenen Blöcken zu steuern. Das macht die gesamte Website mit Gutenberg editierbar, was die Entwicklung vereinfacht und dem Kunden eine breitere Flexibilität mittels WYSIWYG -Inhaltsverwaltung anbietet.
Blick in die Zukunft
Und was kommt als nächstes? Zur Zeit sammeln wir Erfahrung mit einer jungen Technik. Diese wird es uns ermöglichen, der/dem NutzerIn eine Auswahl an vorgefertigten Seiten-Templates für das Projekt anzubieten. Dazu gibt es bereits Projekte, die z. B. von WordPress.com stark vorangetrieben werden. Da die Firma hinter WorPress.com sich auch im Open Source Bereich sehr stark engagiert, werden die breitere WordPress-Community und nicht zuletzt auch unsere Kunden bald davon profitieren.
