Die Zukunft von WordPress sind Blocks: Neuer Gutenberg Editor als Beta Plugin veröffentlicht

Seit sechs Monaten arbeiten die WordPress Core Entwickler an einem neuen WordPress Editor, der die Art und Weise, wie wir Content erstellen, revolutionieren soll. Jetzt wurde der neue Gutenberg Editor als Plugin zum Testen veröffentlicht.

Höchste Zeit, einen Blick auf das ambitionierte Projekt zu werfen.

Neuer Fokus von WordPress

Im Dezember kündigte Matt Mullenweg auf dem WordCamp US in Philadelphia eine neue Release-Strategie und den Fokus der zukünftigen Weiterentwicklung von WordPress an.

Dabei soll sich die WordPress Core Entwicklung vor allem auf drei Bereiche konzentrieren:

  • REST-API
  • Editor
  • Customizer

Anfang 2017 wurde deshalb die komplette Neuentwicklung des WordPress Editors in Angriff genommen, welcher nach Johannes Gutenberg benannt worden ist.

Der Gutenberg Editor

Ziel ist ein neuer WordPress Editor, welcher statt Shortcodes, individuellen HTML, TinyMCE Buttons und versteckten Embed Feature auf sogenannten Content Blocks basiert. Damit soll das Erstellen und Bearbeiten von Content wesentlich schneller, bedienungsfreundlicher und einfacher als bisher möglich sein.

Die Entwicklung findet auf Github statt. Dort können auch Issues und Pull Requests erstellt werden. Die wichtigsten Neuerungen und Meilensteine werden im Make Blog auf WordPress.org angekündigt. Diskussionen finden in regelmäßigen Slack Meetings statt.

Der Startschuss für das Projekt fiel im Januar. Im Februar wurde bereits ein erster Prototyp vorgestellt, mit dem das Basis-Konzept der Content Blocks umgesetzt wurde.

Seitdem ist die Entwicklung von Gutenberg in sehr hohem Tempo weiter vorangeschritten.

WordPress Gutenberg Editor als Plugin veröffentlicht

Nahezu zeitgleich mit dem WordCamp Europe in Paris am letzten Wochenende wurde der neue Gutenberg Editor als Beta Version in Form eines Feature Plugins veröffentlicht.

Das Plugin wurde zu Beginn des Interviews mit Matt Mullenweg  von ihm vorgestellt:

http://wordpress.tv/2017/06/19/interview-and-qanda-with-matt-mullenweg/

Damit steht der Gutenberg Editor nun für die breite Öffentlichkeit zum Download im WordPress Plugin Verzeichnis bereit und kann einfach installiert und ausprobiert werden.

Das Gutenberg-Plugin bietet Funktionen zum Bearbeiten, Anpassen und Erstellen von Websites in WordPress. Mit diesem Beta-Plugin kannst du Bleeding-Edge-Funktionen testen …

By Gutenberg Team

(3.736)
Last Updated: 6 Tagen ago
300.000+ Active Installs
Compatible up to: 6.4.3

Einzige Voraussetzung des Plugins ist der Einsatz von WordPress 4.8 oder höher.

Es handelt sich außerdem um eine unfertige Beta Software. Das Plugin sollte deshalb nicht auf Live-Websites eingesetzt werden.

Der Gutenberg Editor im Beta Test

Nach Aktivierung des Plugins wird ein neuer Menüpunkt für Gutenberg hinzugefügt. Das Plugin ersetzt also noch nicht den herkömmlichen Editor.

Unter Demo steht ein fertiger Beitrag mit verschiedenen Content Blocks zum schnellen Ausprobieren bereit. Alternativ kann ein neuer Beitrag angelegt werden.

Der Editor begrüßt uns hier mit einem sehr aufgeräumten und eleganten Layout:

In der oberen Leiste befinden sich die grundlegenden Optionen. Links kann zwischen Visual und Text Editor gewechselt und gespeichert werden. Rechts oben befinden sich Buttons zum Einfügen von neuen Blocks sowie zur Vorschau und Veröffentlichung des Beitrags.

Ebenfalls rechts oben ist der graue Button Post Settings, mit dem die rechte Sidebar deaktiviert und der Content-Bereich in der vollen Breite (Full Mode) dargestellt werden kann.

Die rechte Sidebar zeigt alle Metaboxen des Beitrags, unter anderem Kategorien, Schlagwörter, Beitragsbild, Beitragsauszug (Excerpt), Kommentare, Revisionen und Veröffentlichen.

Insgesamt gefällt mir das Layout schon jetzt wesentlich besser als der bisherige Editor.

Dynamische Blocks als Grundprinzip

Für einen Beitrag mit überwiegend Text kann einfach mit dem Schreiben begonnen werden. Ein zweimaliges Drücken der Enter-Taste erstellt automatisch einen neuen Block für den Textabsatz.

Vielschreiber können damit durchgängig tippen und müssen nicht etwa für jeden neuen Absatz manuell einen Block hinzufügen.

Neue Blocks können mit einem Klick auf das Plus-Zeichen eingefügt werden. Ebenfalls möglich ist, einen Textabsatz zu markieren und den Block mit einem Klick in eine Überschrift oder Zitat zu verwandeln.

Mit dem Markieren eines Blocks wird automatisch eine Toolbar zur Textformattierung eingeblendet, um beispielsweise Links einzufügen, h1-h6 für Überschriften zu wählen oder Text fett zu machen.

Mit den praktischen Navigations-Pfeilen auf der linken Seite kann die Reihenfolge der Content Blocks verändert werden. Dabei können auch mehrere Blocks gleichzeitig markiert und nach oben oder unten bewegt werden.

Neben den klassischen und erwartbaren Blocks für Text, Überschriften, Listen, Zitate und Medien sind in der Beta Version bereits viele weitere Elemente enthalten. So unterstützt Gutenberg unter anderem Tabellen, Buttons, Trenn-Elemente (Separator) und das Einfügen eines Widgets zur Anzeige der letzten Beiträge.

Aufschlussreich ist auch ein Blick in den Textmodus des Editors.

Dort ist ersichtlich, wie die Content Blocks in der Datenbank gespeichert werden. Um die Kompatibilität mit Plugins und Themes zu erhalten, wird der gesamte Content wie bisher auch in einem einzigen Datenbank-Feld post_content gespeichert.

Um die Content Blocks zu kennzeichnen, werden diese von HTML Kommentaren umschachtelt:

<!-- wp:core/text dropCap="false" -->
<p>Mit einem Klick auf das Plus-Zeichen können neue Blocks eingefügt werden.</p>
<!-- /wp:core/text -->

<!-- wp:core/button -->
<div class="alignnone"><a href="https://wordpress.org">Button</a></div>
<!-- /wp:core/button -->

<!-- wp:core/separator -->
<hr/>
<!-- /wp:core/separator -->

<!-- wp:core/image -->
<img src="https://themecoder.de/wp-content/uploads/2017/06/icons.png" class="alignnone" />
<!-- /wp:core/image -->

Bei der Ausgabe des Contents im Frontend werden die Blocks durch entsprechende Filter geparst und die Kommentare entfernt. Das Ganze funktioniert also ähnlich wie der More-Tag im jetzigen Editor.

Wer immer noch nicht genug von Gutenberg gesehen hat, kann auch noch dieses Youtube Video ansehen. Zwar auf Niederländisch, aber das Feeling und User Experience des Editors wird damit sehr deutlich.

Fazit

Der neue Gutenberg Editor hinterlässt schon jetzt einen sehr guten Eindruck.

Als klare Verbesserung empfinde ich das aufgeräumte Layout, wodurch zum Beispiel nerviges Suchen und Scrollen nach Metaboxen entfällt. Das Arbeiten mit den Blocks ist sehr intuitiv und schnell in Fleisch und Blut übergegangen.

Nicht vergessen darf man, dass es sich um eine erste Beta Version handelt. Oft fühlt es sich noch hakelig an, wenn sich beispielsweise Buttons überschneiden oder Blocks überlappen, was bei links oder rechts ausgerichteten Bildern der Fall ist.

Hier ist das WordPress Team auf Feedback angewiesen. Es empfiehlt sich daher, das Plugin selbst auszuprobieren und aktiv mitzuwirken.

Etwas übertrieben finde ich, jeden unterstützten Dienst des Embed Features als extra Block in dem Insert-Dialog aufzuführen. Dadurch ist die Liste der Blocks bereits jetzt sehr lang. Hier würde ein allgemeiner Embed-Block meiner Meinung nach reichen.

Momentan funktioniert der Editor nur mit Core Features und bietet noch keine Integration mit Plugins. Das heißt Metaboxen, welche von Plugins wie z.B. Yoast SEO hinzugefügt werden, fehlen noch. Wie TinyMCE Buttons und Shortcodes von Plugins umgesetzt werden, bleibt auch noch abzuwarten.

Gutenberg Release

Gutenberg wird mit Sicherheit eine der größten Neuerungen in WordPress in näherer Zukunft. Bis zum Release soll das Plugin deshalb ausführlich getestet werden. Gewünscht ist eine Installation auf mindestens 100.000 Seiten.

Deshalb wird der neue Editor nicht mit 4.9 in den Core kommen, mit viel Glück klappt die Einführung des neuen Editors aber mit WordPress 5.0.

Die Zukunft von WordPress sind Blocks

Zum Schluss möchte ich auf den Titel diesen Beitrags zurückkommen.

Im Interview vom WordCamp Europe bemängelt Matt Mullenweg die vielen verschiedenen Elemente in WordPress, die meistens nur in einem bestimmten Kontext verwendet werden können. Shortcodes funktionieren nur im Editor, Widgets nur in Sidebars – für WordPress Einsteiger mühsam zu erlernen.

In Zukunft sollen diese Konzepte als Blocks vereinheitlicht werden.

Sehr deutlich wurde dieser Plan am Anfang des Interviews:

We are going to build a lot more types of Blocks and this is the basis for what is going to be the future of customization. Blocks will replace widgets, Blocks will replace kind of all the other fundamentals and primitives inside WordPress – until everything is a Block.Matt Mullenweg, WordCamp EU 2017

Als Ergebnis könnte ein Editor entstehen, mit dem sich nicht nur sehr einfach Text und Bilder einfügen lassen, sondern auch Widgets und von Plugins registrierte Blocks. Falls Plugins neue Blocks einfach hinzufügen können, würden sich viele neue Möglichkeiten eröffnen.

Werden beispielsweise Plugins für ein Portfolio, Testimonials und Kontaktformular verwendet, könnte mit dem neuen Editor eine Startseite erstellt werden, welche diese Elemente kombiniert anzeigt, indem diese einfach als Block hinzugefügt werden.

Das Ganze geht damit schon in Richtung eines einfachen Page Builders.

Gutenberg könnte damit in der Tat für eine Revolution in WordPress sorgen. Was denkt ihr?