Das Content-Management-System WordPress wird seit 2019 von einem Drittel der Top 10 Millionen Webseiten weltweit genutzt. Und hier auf MarcTV. Seit einigen Releases liegt der Fokus des Open-Source Projektes auf Blöcken. Mit WordPress 5.9 werden damit nicht nur die Artikel, sondern die gesamte Seite gebaut. Das bedeutet, dass man die Seite statt mit Themes aus Blöcken oder einer Sammlung aus Blöcken („Patterns„) zusammenbaut. Und zwar mit dem Block Editor Gutenberg.
Demokratisierung der Webseitengestaltung
Den mächtigen Editor Gutenberg aus dem WordPress Core als „Klickibunti“ zu bezeichnen, grenzt an Blasphemie. Letztendlich gibt man dem Redakteur die Kontrolle über das Layout des Artikels und über die gesamte Seitengestaltung. Entwickler erstellen in Zukunft hauptsächlich Plug-ins, die Blöcke bereitstellen. Damit kann dann jeder Menschen ohne Vorkenntnisse von PHP, CSS oder Webseiten allgemein die Webseite umfassend gestalten.
Twenty-Twenty-Two statt einem angepassten Child Theme
In den 15 Jahren MarcTV habe ich immer mehr auf Standards gesetzt und dabei Code zurückgebaut. Somit waren meine Child Themes A Field of Flowers (2019) und Anor Londo (2017) ein Prozess zur Vereinfachung. Mit dem Block Thema Twenty-Twenty-Two verzichte ich auf den Einsatz eines Child-Themes. Dafür mussten Funktionen in Plug-ins umgewandelt werden, die Blöcke unterstützen. Das heißt, neben PHP musste ich mir React beibringen.
Gruppen in Gutenberg sind das Wundermittel
Viele Blöcke erlauben keine Anpassungen der Farben und Typografie. Steckt man sie in eine Gruppe, kann man Eigenschaften wie die Hintergrundfarbe plötzlich bequem anpassen. Selbst die Farbe der Links separat ist anpassbar.
Die Gutenberg Stile sind versteckt aber mächtig
Oben rechts im Editor ist ein Symbol, dass eher nach einem Schalter für einen Dark Mode aussieht. Jedoch steckt dahinter der Stile-Editor. Damit können weiter unten die Stile der einzelnen Blöcke angepasst werden. Anpassungen in Gutenberg im Artikel werden trotzdem bevorzugt. Beispiel: Die Submit-Buttons für das Kommentarformular können dort farblich angepasst werden. Oder die Farbe aller Überschriften. Für Letztere fehlt noch die Auswahl der Schriftfamilie. In WordPress 6.0 wird beides aber noch detailliert anpassbar sein.
Custom CSS ist noch erlaubt
Die WordPress Funktion „Zusätzliches CSS“ wurde uns nicht genommen. So kann man trotzdem schnell mal für alle Überschriften im Artikelbereich mit den CSS Variablen von Twenty-Twenty-Two die Schriftart ändern. Man muss ja nicht päpstlicher als der Papst werden.
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5 {
font-family: var(--wp--preset--font-family--system-font);
}
Neue Blöcke braucht das Land
Einige Funktionen im Blog hatte ich bereits als Plug-in ausgelagert. Nun mussten diese auch als Block im Full-Site Editing funktionieren. Dabei ist die Entwicklung von WordPress Entwicklung mit React deutlich komplexer als nur mit PHP. Plötzlich findet man sich in einer Welt mit JSX und Build-Prozessen wieder.
Mein erstes Block Plugin SimpleTOC nutze ich weiterhin für die Inhaltsverzeichnisse. Das ist auch bislang das einzige Plug-in, dass noch andere Leute außer mir nutzen.
Auf der Startseite werden unten zufällige Spieletitel angezeigt, zu denen es hier im Blog einen Review gibt. Und die Liste der Top 100 Spiele ist genau so Block wie die Reviewbox am Ende eines Artikels.
Auch die Darstellung der ähnliche und neuen Artikel am Ende eines Artikels musste nun auch als Block funktionieren und war eine Neuentwicklung in Absprache mit dem Entwickler des Elternplugins YARPP.
Ein kleines aber für mich wichtiges Detail ist die Liste der zuletzt kommentierten Artikel unten im Footer. Mein Plugin listet bewusst nicht die letzten Kommentare und verlinkt deswegen keine Artikel doppelt.
Änderungen gehen nun schnell
Was vorher Änderungen am Template oder Anpassungen am Template bedeutet hat, ist nun ein Klick entfernt. Die Lernkurve ist Steil weil alles aufeinander aufbaut. Nur eine Stunde am Abend hat das Zusammenklicken gedauert.
Auswirkungen auf die Core Web Vitals
Webseiten müssen auf jedem Gerät lesbar sein und rasant laden. Google fasst das als Core Web Vitals zusammen. Vorher hatte ich im Chrome Lighthouse Test durch diverse Tweaks in allen Bereichen die volle Punktzahl von 100. Das erreiche ich mit dem jungfräulichen Twenty-Twenty-Two Theme nicht mehr. Allerdings liegen die Werte alle im sprichwörtlich grünen Bereich. Wenn ich mir dann die Warnmeldung „Avoid an excessive DOM size“ anschaue, habe ich sogar meinen Frontend-Mentor Nico Brünjes im Ohr: „DIV-teritis“. Denn die Kehrseite von Flexibilität ist die damit verbundene Komplexität.
Full-Site Editing mit Gutenberg ist die Zukunft
Als WordPress den klassischen WYSIWYG-Editor gegen Gutenberg ersetzt hat, war wahrscheinlich jeder WordPress Nutzer skeptisch. Mich eingeschlossen. Aber was zum Standard im Core geworden ist, sollte man meiner Meinung nach umarmen. Sonst verbiegt man sich und die Software. Nun sind wir mit Full-Site Editing erst in der zweiten Phase von insgesamt vier:
Die vier Phasen von Gutenberg
- Einfacheres Bearbeiten – bereits in WordPress enthalten, mit kontinuierlichen Verbesserungen
- Anpassung – Full Site Editing, Block-Vorlagen, Block-Verzeichnis, blockbasierte Themes
- Kollaboration – ein intuitiver Weg, Inhalte gemeinsam zu verfassen
- Mehrsprachig – Core-Implementierung für mehrsprachige Websites
Quelle: WordPress Roadmap
Meiner Ansicht nach wurde der wichtigste Schritt nun getan. Das Konzept funktioniert und ist die Zukunft für WordPress. Glückwunsch an das gesamte WordPress 5.9 Projektteam! Solche Entscheidungen in einem Open-Source-Projekt mit Menschen auf der ganzen Welt umzusetzen ist etwas, auf das die Beteiligten stolz sein dürfen. Und die haben schon lange vor Covid-19 in „Heimarbeit“ entwickelt. Da kann man einiges lernen.
Schreibe einen Kommentar