Der Gutenberg Editor in WordPress

Spätestens seit WordPress 5.6 sollte bereits jeder Laie vom Gutenberg-Editor gehört haben. Er gilt mittlerweile als DER WordPress-Editor. Eingeführt wurde er im Dezember 2018 mit WP 5.0. und hat somit den klassischen Editor(auch TinyMCE-Editor genannt) ersetzt. Das primäre Ziel von Gutenberg ist die einfachste und zeitgleich eleganteste Lösung für Designer und Developer zu bieten, eine Website mit ansprechenden Inhalten zu erstellen.

Begonnen hat alles mit der Einführung des Block-Editors. Dieser Editor ermöglicht den Aufbau Deiner Seite durch Blöcken zu strukturieren, welche willkürlich verschoben werden können. Das bietet Dir den enormen Vorteil, dass Du das Design auf Deiner Website individuell so gestalten kannst, wie Du es für richtig und sinnvoll befindest. Außerdem kannst Du dadurch vor allem im Hinblick auf Marketingmaßnahmen schneller und einfacher Landingpages transformieren und im Anschluss abtesten. Mit fortschreitenden Gutenberg Updates wird es immer einfacher auch komplexere Layouts auf Deiner Seite zu kreieren. Allein mit WP 5.9. bist Du mittlerweile in der Lage sogar das gesamte Design Deiner Website einheitlich zu steuern und Blöcke seitenübergreifen wiederzuverwenden – Full Site Editing.

Unterschiede und Vorteile gegenüber dem Classic Editor bzw. gängigen Pagebuildern

Beim klassischen Editor handelt es sich um eine Word-Prozessor-ähnliche Benutzeroberfläche, die wenig mit modernen Websites hat. Wir alle kennen die „uralten Blogs“, die so aufgebaut sind. Pagebuilder wie Elementor und Divi-Builder bieten hingegen durch ihre Drag-and-Drop Option eine visuell deutlich mehr anregende Erfahrung als der TinyMCE Editor. Damit WordPress auch langfristig mit anderen CMS wie WIX und Squarespace mithalten kann, müssen sich die Entwickler etwas einfallen lassen, das auch ohne der Installation von externen Plugins zu mehr Flexibilität führt.

Mit Gutenberg soll dieses Problem langsam, aber sicher gelöst werden. Anfangs konntest Du mit Gutenberg schließlich nur einzelne Blöcke aneinander reihen und eingeschränkt verschieben. Update für Update geht zwar schon einiges mehr, noch kann aber Gutenberg mit Elementor und Co. nicht mithalten. Das liegt allerdings weniger an einem faulen Entwicklerteam als an der Komplexität dahinter Gutenberg als Core-Feature richtig und möglichst lean zu implementieren. Konkret bedeutet das, dass Gutenberg irgendwann mit allen Plugins und Themes kompatibel sein soll und zugleich einen schlanken Code ausgibt, was infolgedessen Deine Website schneller macht und die User Experience verbessert. Bereits jetzt lädt dasselbe Design – soweit man es so sagen kann – dass mit dem Gutenberg Editor erstellt wurde, viel schneller als mit gängigen Pagebuildern.

Technische Details zu dem Gutenberg Editor

Der Gutenberg Editor basiert auf Javascript / React (ES2015 Environment). Ziel des Editors ist ein deterministisches Herangehen für den User, d.h. ein Organisation des Inhaltes über Inhaltsblöcken.
Die Syntaxhinweise werden über HTML Kommentaren realisiert. Ein Beispiel dafür:

 <!-- wp:paragraph -->
<p>Das ist ein Paragraph Tag 😉 Beachte die HTML-Kommentare davor und nach dem HTML</p>
<!-- /wp:paragraph -->

Der Prozessablauf sieht so aus:

Unsere Beiträge

In dieser Kategorie findest Du die relevantesten Fakten zur Revolution Gutenbergs. Du erfährst immer als Erstes wann neue Updates anfallen und vor allem wie sie Dir in Deinem WordPress Alltag weiterhelfen können. Um es Anwendern und Entwicklern einfacher zu machen nach der richtigen Lektüre zu suchen, haben wir sämtliche Themen in zwei Unterkategorien unterteilt. Mit Anwender bezeichnen wir Themengebiete, die leichter verständlich sind und von jedem angewendet werden können. Bei den Entwicklerthemen ist dann mehr Code involviert und setzt ein umfassenderes Verständnis voraus.

Gutenberg geht in die nächste/ zweite Runde:

Wie Du bereits wissen solltest, macht WordPress als Plattform über 1/3 des Internets aus – der Wahnsinn nicht? Der nächste Konkurrent ist Shopify mit nicht mal 6% Marktanteil. Allerdings hat WordPress leider geschlafen, als es um die User Experience ging und was die Einfachheit eine Website zu erstellen betrifft. Die meisten anderen CMS lassen sich mit Drag & Drop wesentlich einfacher bearbeiten als WordPress. Keine Frage, WordPress ist 100% anziehender für Entwickler und Fortgeschrittene. EPU’s und Kleinunternehmen ohne Know-How wählen dann aber doch lieber WIX oder Webflow…

Das will WordPress mit dem Gutenberg-Editor, welcher mit WP 5.9 bereits in die zweite Phase übergeht, ein für alle Mal ändern.

1. Die erste Phase kam damals mit dem Launch des Gutenberg Editors und wird als „Easier Editing“ bezeichnet. Sie beschreibt die Bearbeitung von Blöcken innerhalb von Seiten und Beiträgen. Nichts Aufregendes, da jeder Designer und Developer dieses Feature mittlerweile kennen sollte. Header, Footer, einzelne Widgets und globale stile konnten allerdings nicht innerhalb der jeweiligen Seite bearbeitet werden. Hier hast Du in der Regel auf den Customizer zurückgegriffen.
2. Mit der zweiten Phase des Gutenberg-Editors fällt bei Block-Themes der Customizer und andere Tools wie die Menü-Einstellung weg und wird durch den Editor Beta ersetzt. Dieser ist die sogenannte All-in-One Lösung für die Bearbeitung Deiner Website. Wir haben den Editor weiter oben schon unter Full Site Editing kennenlernen dürfen. Keine Frage, es handelt sich bei WP 5.9 um eine Beta-Version des Editors, welche noch definitiv ausbaufähig ist – vor allem was die Kompatibilität mit den gängigsten Themes betrifft. Der Grundstein für eine seitenübergreifende Customization wurde aber bereits eingeleitet.
3. In der dritten Phase, welche voraussichtlich 2023 am Markt sein wird, geht es um das gemeinsame Bearbeiten von Inhalten – zu English auch Collaboration genannt.
4. Die vierte Gutenberg-Editor Phase wird dann auf die Mehrsprachigkeit abzielen – ohne jegliche Plugins und automatisierte Übersetzung. Wann diese Phase gelauncht wird, steht in den Sternen.

Full Site Editing ab WordPress 5.9

Nun hast Du bereits 2-mal gehört und fragst Dich was es mit dem Full Site Editing auf sich hat. Full Site Editing ist der erste Schritt von WordPress eine eigene Art Pagebuilder als Core-Feature zu integrieren! Das bedeutet, dass Du von nun an in bestimmten Themes auf den Customizer und den Menu-Builder unter „Design“ verzichten musst und stattdessen Deine Seite auf globaler Ebene wesentlich einfacher anpassen kannst. Zudem bietet Full Site Editing auch die Möglichkeit dynamische Inhalte an einem Ort zu gestalten, das natürlich seiten- bzw. beitragsübergreifend, klingt das nicht großartig? Du kannst den globale Stile flexibler anpassen und siehst in Echtzeit die Änderung. Das erspart Dir sowohl Zeit als auch Nerven!

Lies Dir mehr in unserem Beitrag zum Full Site Editing durch.