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 ermöglicht die Bearbeitung, Anpassung und den Aufbau von Websites in WordPress. Verwende es, um Beta-Funktionen vor ihrer offiziellen Veröffentlichung zu testen.
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?
Wow, ich finde es total klasse, wenn der neue Editor in Richtung eines Page-Builders geht! Ich habe nämlich bisher auf solche Plugins verzichtet, weil sie meine Seite zu sehr ausgebremst haben. So hatte ich stets Hirnrauchen, wie ich bestimmte Dinge gestalte, und musste da mit manchem Trick arbeiten…
Wie ist das bei dem neuen Editor? Da entsteht ja auch mehr HTML, weil die Blocks mit HTML-Kommentaren gekennzeichnet werden. Wirkt sich das negativ auf die Ladezeit der Seite aus?
Herzliche Grüße,
Anne-Barbara Kern
Hallo Anne-Barbara,
Ja, von den existierenden Page Builder Plugins bin ich auch nicht begeistert. Meistens viel zu überfrachtet mit Modulen und Einstellungsmöglichkeiten.
Der Content wird vor der Ausgabe im Theme durch mehrere WordPress Filter geparst. Das passiert schon jetzt mit dem alten Editor. Dabei werden zum Beispiel die Shortcodes in den eckigen Klammern erkannt und durch den eigentlichen Inhalt ersetzt, z.B. einem Kontaktformular.
Oder beim Einfügen einer Youtube URL. WordPress hat ein Embed Feature, welches hier automatisch statt der URL das Video einbinden wird. Das passiert ebenfalls durch die Content Filter.
Mit den neuen Blocks wird es ähnlich sein. Soweit ich bisher gesehen habe dienen die Kommentare wohl hauptsächlich der Strukturierung der Blocks im Backend. Im Frontend selbst werden diese durch die Content Filter entfernt.
Die Ladezeiten sollten sich deshalb meiner Meinung nach bei normalen Beiträgen mit Text und Bildern nicht großartig ändern.
Anders sieht es wahrscheinlich mit den neuen Möglichkeiten für Blocks aus. Eine Seite mit vielen als Blocks eingefügten Widgets und Shortcodes wird natürlich längere Ladezeiten haben als einfacher Text, weil hier im Hintergrund die PHP Funktionen zur Anzeige des Widgets/Shortcodes aufgerufen werden.
LG,
Thomas
Hallo Thomas,
hey, das klingt super, danke Dir für diese ausführliche und verständliche Erklärung! Ich freue mich schon… 🙂
Herzliche Grüße,
Anne-Barbara
Wow – vielen Dank, das lese ich hier zum ersten Mal dank deines Newsletters. Vermutlich wird es noch eine Weile dauern, bis der neue Editor in Sachen Funktionsvielfalt an die besten aktuellen Page Builder herankommt, richtig?
Denn prinzipiell – so sehr ich diese Page Builder auch schätze – mag ich sie nicht sonderlich, da man mit ihnen in eine Abhängigkeit hineinläuft. Manche pumpen einem die Datenbank mit ihren proprietären Shortcodes voll, andere wiederum bieten nur mit Zusatzplugins oder kostenpflichtigen Erweiterungen den gewünschten Funktionsumfang.
Für mich ist es am Anfang jedes WordPress-Projekts eine Gewissensfrage, Kunden über die Vorteile, aber auch Nachteile von Page Buildern aufzuklären – damit sie wissen, welchen Zusatzkomfort und welche Möglichkeiten sie erhalten, welche Nachteile das aber evtl. in Zukunft mit sich bringen kann, zum Beispiel bei einem Theme-Wechsel.
Gerne, danke fürs Abonnieren des Newsletters 🙂
Der Standard-Editor wird vom Funktionsumfang wahrscheinlich nie an aktuelle Page Builder wie Beaver, Divi oder Visual Composer herankommen. Allein die ganzen Optionen, um Farbe, Abstand, Schriftart usw. für jedes Element einzeln festzulegen, die Page Builder oft bieten, widerspricht der WordPress Philosophie.
WordPress Core wird hier (hoffentlich) viel schlanker bleiben. Vorerst wird man wohl versuchen, Shortcodes und Widgets im Editor als Blocks möglich zu machen. Vorerst ist Gutenberg auch nur eindimensional, d.h. mehrere Spalten und Grids sind momentan noch nicht vorgesehen.
Je nachdem wie flexibel und erweiterbar Gutenberg wird, ist aber vorstellbar, dass neue Plugins auf dem Editor aufbauen, und beispielsweise neue Blocks oder Einstellungen/Design-Optionen für Blocks hinzufügen. Und dadurch den Editor mehr in Richtung Page Builder schieben.
Ich bin auch kein Fan der existierenden Page Builder Plugins und sehe die gleichen Nachteile, kann aber die Nachfrage dafür verstehen.
Ich hoffe deshalb, dass nicht versucht wird, den Editor zu einem zu umfangreichen Page Builder auszubauen. Lieber schlank im Core und flexibel erweiterbar mit Plugins, wenn es gewünscht ist.
LG,
Thomas
Oh Gott! Soviel Spam im Quelltext…
Hoffentlich kann man das deaktivieren…
Soweit ich bisher gesehen habe, werden die Kommentare für die Blocks im Frontend nicht angezeigt. Siehe die Kommentare oben.
Und es wird bestimmt Plugins geben, um den Gutenberg Editor zu deaktivieren 😉
Ich hoffe, dass beim neuen Editor noch einiges an der Kompatibilität mit bisherigem Content gemacht wird. Wenn man zum Beispiel einen Beitrag aus dem „alten“ Editor mit Gutenberg bearbeiten will, wird dieser als ein einziger Block dargestellt obwohl z.B. die einzelnen Absätze schon jetzt separate Blöcke sind (kann man sich mit TinyMCE Advonced anzeigen lassen).
Ein weitere Kritikpunkt ist, dass Gutenberg den jetzigen Editor bei Release direkt ersetzen soll, ohne eine offizielle Möglichkeit den jetzigen Editor weiter zu benutzen. Denn durch das klassische Layout eines Textverarbeitungsprogramms (Menüleiste) ist der alte Editor schnell für Neueinsteiger zu verstehen. Beim Gutenberg hab ich so meine Zweifel ob jeder sofort die Funktionalität der Blöcke versteht.
Problematisch ist das neue System auch für Schnell- und Vielschreiber, ja man etwa für einen neuen Absatz zwei mal Enter drücken muss statt nur einmal. Insgesamt fühlt sich Gutenberg noch sehr langsam an, besonders wenn man viel mit Tastatur-Shortcuts arbeitet. Ich schreibe meine Beiträge zum Beispiel meistens komplett am Stück und gehe danach per Tastatur durch den Beitrag um die Formatierung einzufügen. Keine Ahnung ob das dann noch geht, da ja Überschriften wieder ein eigener Block sind…
Ich sehe die ganze Entwicklung eher als kritisch. Klar ist das Konzept hinter Gutenberg toll und das Einfügen vom Medien wird sichtlich erleichtert. Aber für Vielschreiber könnte der Editor eher störend und kontraproduktiv sein.
Danke für den Kommentar. Sehr gute Punkte, die du hier ansprichst.
Inwieweit die Kompatibilität mit altem Content sichergestellt wird, weiß ich nicht.
Schwierig zu verstehen finde ich den Editor persönlich nicht. Ich denke, dass auch Einsteiger gut damit zurechtkommen. Ich bin aber zu tief in der Materie, deshalb kann ich mich hier auch irren.
Blogger und Redakteure, die überwiegend Text-Artikel schreiben und ein paar Bilder einfügen, sind wahrscheinlich mit dem jetzigen Editor schon sehr zufrieden. Ich hoffe, dass Gutenberg von der Usability einfach so gut wird, dass auch diese Zielgruppe mit dem neuen Editor besser zurechtkommt.
Und vieles ist auch Geschmacksache: Mir persönlich gefällt 1x ENTER für eine neue Zeile und 2x ENTER für einen neuen Absatz wesentlich besser als SHIFT+ENTER und ENTER 😉
*edit* Für Tastatur-Shortcuts gibt es einen Github Issue, es steht also auf der ToDo Liste.
Wie ist das denn dann mit bereits fertigem Content? Ich veröffentliche zb. sehr viele Pressemitteilungen. Da muss ich nur per cut and paste einfügen, kurz die Überschriften formatieren und fertig.
Muss ich dann jetzt jeden einzelnen Absatz zusätzlich als Block deklarieren? Das würde mich erheblich behindern.
Und was ist wenn man bei TinyMCE bleiben will? Gibt es dann zukünftig Kompatibilitätsprobleme?
Vielen Dank für den Kommentar. Die Kompatibilität mit dem alten Editor finde ich ebenfalls eine spannende Frage.
Ich habe das eben genauer getestet. Gutenberg enthält einen Block namens Classic Text, welcher ähnlich wie der alte Editor funktioniert. Das heißt, in dem Block lassen sich Text, Überschriften, Listen, Zitate und Bilder einfügen, ohne dass diese eigenständige Blocks sind.
Der Classic Text Block wurde insbesondere eingeführt, um die Kompatibilität mit älteren Beiträgen zu gewährleisten. Werden alte Beiträge und Seiten mit Gutenberg bearbeitet, befindet sich der existierende Content in einem einzigen Classic Text Block.
Bestehende Text können als weiterhin mit Copy&Paste eingefügt und nachträglich formatiert werden, indem einfach der Block Classic Text genutzt wird. Dadurch stehen natürlich manche Features von Gutenberg nicht zur Verfügung, wie die Sortierung der Elemente mit den Navigationspfeilen, weil diese eben keine Blocks sind.
Toller Beitrag, danke für die vielen Infos auch in den Kommentaren.
Danke 🙂
Da kann ich nur hoffen das es wirklich einfacher wird. Ich habe lange gebraucht bis ich WordPress in der jetzigen Form drauf hatte. Gerade für Neueinsteiger wird es Zeit das WordPress auch für diese Zielgruppe einfacher wird, ansonsten verliert WordPress gegen die Konkurrenz. Dabei hatte ich mich gerade erst an die alte Version gewöhnt, na ja mal sehen was der Gutenberg Editor so zu bieten hat?!…
Ich war gestern Abend bei einem Vortrag zu dem Thema. Fazit: einfach cool, ich freue mich sehr auf das offizielle Release. Die perfekte Verschmelzung zwischen Backend und Frontend, so wie man es sonst nur von Concrete5 kennt.
VG,
Slavisa