- Was ist Gutenberg?
- Wie lässt sich Gutenberg installieren?
- Details zum Gutenberg-Editor
- Vorteile des WordPress Gutenberg-Editors
- Nachteile des WordPress Gutenberg-Editors
- Gutenberg-Demo zum Ausprobieren
Was ist Gutenberg?
Gutenberg ist ein neuer Editor für WordPress. Dieser Editor ist nach Johannes Gutenberg benannt worden, der den Buchdruck mit beweglichen Lettern vor mehr als 500 Jahren erfunden hat. Der aktuelle visuelle Editor erfordert die Verwendung von Shortcodes und HTML-Komponente, damit alles richtig funktioniert. Ihr Ziel war also, diesen Vorgang einfacher zu machen, haupstächlich für diejenigen, die gerade erst angefangen haben, mit WordPress zu arbeiten. Es werden Bausteine in Form von „kleinen Blocks“ eingeführt und man will erweiterte Layoutoptionen hinzufügen. Den offiziellen Beispielbeitrag kannst du dir hier ansehen. Um den Entwicklern und dem Team gegenüber, das am Projekt arbeitet, fair zu sein, ist es wichtig zu bermerken, dass sich das Projekt derzeit noch in der Beta- und Testphase befindet, also sollte der Editor auf Live-Seiten nicht benutzt werden. Wir wollten aber jetzt schon den Editor ein bisschen näher ansehen und selber erleben, was dieser Hype um ihn eigentlich soll. Wir sorgen dafür, diesen Beitrag regelmäßig zu aktualisieren, sobald Entwicklungen oder Änderungen vorgenommen wurden. Anscheinend will Matt Mullenweg (der Gründer) noch vor der Integration des Editors in den WP-Core 100.000 aktive Installationen haben. Das ergibt natürlich Sinn, so können sie Bugs und andere Probleme lösen und neue Ideen und Features noch einbringen.Da sich der Gutenberg-Editor noch in der Testphase befindet, will das Team Meschen dazu bringen, den Editor auszuprobieren, sodass sie dann ihre Kommentare und ihr Feedback im WordPress Support-Forum hinterlassen oder auf GitHub ein Issue öffnen. Oder wendet euch im #core-editor-Slack-Channel an die Entwickler. Gutenberg soll mit WordPress 5.0 ausgeliefert werden.“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU
— Bridget Willard (@YouTooCanBeGuru) June 17, 2017
Wie lässt sich Gutenberg installieren?
Zum Zeitpunkt der Erstellung des Blogeintrags verfügt Gutenberg über etwa mehr als 20.000 aktive Installationen mit insgesamt mehr als 290.000 Downloads und ist mit 2,5 von 5 Sternen ausgezeichnet. Gutenberg ist mit WordPress-Installationen ab Version 4.8 kompatibel. Die neueste Version von Gutenberg kannst du aus dem WordPress-Repository herunterladen oder sie im Pluginverzeichnis auf der „Plugin hinzufügen“-Seite des WordPress-Dashboards suchen. Wieder wird dazu geraten, den Editor als Plugin nur auf einer Testseite zu installieren oder zum Testen eine Staging-Umgebung aufsetzen.
Gutenberg WordPress-Plugin installieren
Details zum Gutenberg-Editor
Nach der Installation von Gutenberg werden in der Beitragsliste unter deinen Beiträgen weitere Links sichtbar, mit denen du jeden existierenden Post in Gutenberg aufrufen kannst. Der klassische Editor wird dadurch nicht ersetzt, was ganz gut ist, denn so hast du während der Testphase die Möglichkeit zwischen Klassischem und Gutenberg-Editor zu wechseln. Mit der neusten Version im WordPress-Repository unterstützt Gutenberg nun auch benutzerdefinierte Site-Typen und Pages.
Eintrag „Gutenberg” in der Beitragsliste

WordPress 5.0 Gutenberg-Aufruf

Demo des Gutenberg-Editors

Vergleich von Gutenberg und klassischem Editor

Beitragseinstellungen ausblenden (auf halbem Wege bis zum ablekungsfreien Schreibmodus)
<!-- wp:core/text --> <!-- /wp:core/text -->
Somit kannst du Blocks direkt im Textmodus des Editors erstellen. Jedoch kann diese Weise zu einer gewissen Unübersichtlichkeit führen, wenn du in diesem Modus bist.

Gutenberg Textmodus

Gutenberg-Blöcke bearbeiten

Gutenberg-Editor auf dem Handy-Bildschirm

TinyMCE gibt es nicht mehr
„Wir wollten alles so ändern, sodass man nur einmal die Dinge über Blocks lernen muss und wenn man das tut, sei es in Beiträgen, Sidebars, auf einer Seite oder in einem benutzerdefinierten Beitragstyp, gilt überall das gleiche Funktionsprinzip. Egal, was damit integriert sind, sagen wir mal ein Plugin für deine Google Photos oder dein Dropbox, das wird jetzt überall genauso funktionieren,”– Matt Mullenweg (Quelle: WP Tavern)Auch Andrew Roberts Projektleiter des TinyMCE-Teams hat uns kontaktiert und einiges klargestellt zu dem, was jetzt eigentlich mit TinyMCE und Gutenberg ist.
Ich bin seit der Gründung im Gutenberg-Team. Das war eine gemeinsame Anstrengung. Erwähnenswert ist außerdem, dass TinyMCE die Kern-Editing-Engine ist, die den „bearbeitbaren” Teil antreibt und der wiederum die Mehrheit der Blocks antreibt. Den Tabellen Block zum Beispiel. Dies soll auch für die nächste Zukunft gelten. Außerdem ist der klassische Textblock im Grunde genommen der TinyMCE-Editor. Wie bekannt der Editor wird, hängt wahrscheinlich von den Feedbacks der Community ab. Es gibt tatsächlich eine Pull-Anforderung (#1394), die vorsieht, Gutenberg zum Wrapper für den alten Editor zu machen, sodass vorhandene TinyMCE-Plugins und Schaltflächen weiterhin funktionieren. Es bleibt abzuwarten, ob dies integriert wird. Es ist jedoch wahrscheinlich, dass die Core-Teams von WP und TinyMCE zukünftig zusammenarbeiten wird, um eine Textverarbeitungs-ähnliche Usererfahrung in WordPress zu garantieren. Auch wenn es letzendlich zu einem Plugin wird. In diesem Zusammenhang möchte ich erwähnen, dass einer der Gründe, warum wir am Gutenberg-Projekt mit einem ausgezeichneten Gutenberg-Team arbeiten, ist, diese Konzepte in den nächsten 12 Monaten zur breiteren TinyMCE-Community zu bringen. Das wird einem ermöglichen, Block-basierte Bearbeitungskonzepte in die eigene benutzerdefinierte Anwendung einzubauen. – Andrew RobertsUnten sind einige neue Ergänzungen zum Editor zu finden, die wir ziemlich cool fanden.
Tabellen Block und Textspalten-Block
Einfache Tabellen sind nicht mehr so komplex, denn du kannst sie jetzt einfach als Blöcke innerhalb des Editors einfügen. Früher musstest du entweder Plugins von Drittanbietern oder HTML-Code benutzen. Aktuell kannst du nur 2×2-Tabellen mit der Insert-Option einfügen und du kannst sie nicht formattieren, ohne die Textansicht öffnen zu müssen. Wir denken aber, dass man diese irgendwann mal auch im visuellen Editor tun kann.
Gutenberg-Tabelle

Gutenberg-Spalten
Live HTML Block
Es gibt auch den sogenannten Live-HTML-Block. Du kannst deinen Code einfügen und gleich die Vorschau innerhalb des Blocks sehen. Das ist eigentlich eine ziemlich coole Idee. Somit kann man tatsächlich vermeiden, zwischen dem visuellen Editor und dem Textmodus hin und her zu wechseln.
HTML-Block im Gutenberg-Editor
Bilder mittels Drag and Drop einfügen
Mit dem Gutenberg 0.5.0 können Bilder mittels Drag and Drop direkt in ein Bildblock eingefügt werden, so wie du es im visuellen Editor gewohnt bist. Es gibt jedoch dabei einen Fade-Effekt, was ziemlich komisch ist. Das können wir auch als ein Problem ansehen.
Bilder per Drag and Drop einfügen

Füge CSS-Klasse hinzu
Zuletzt verwendete Blocks
Wegen der hohen Anzahl an Blocks, die in Gutenberg eingebaut sind, und das ist wahrscheinlich noch nicht alles, haben sie eine Suchfunktion integriert, womit die zuletzt verwendeten Blocks direkt angezeigt werden. Ziel ist, das Einfügen von Blocks zu beschleunigen.
Zuletzt verwendete Blocks
Optionen für Cover Text
Mit dem Gutenberg 0.9.0 hat man neue visuelle Styles und Änderungoptionen für den Cover Text Block eingeführt. Du hast nun die Möglichkeit, die Schriftgröße zu ändern, die Option Initialbuchstabe zu wählen und die Farben mittels der neuen benutzerdefinierbaren Farbpalette zu ändern.
Gutenberg Cover Text
Autovervollständigung
Ein cooles Feature wurde in Gutenberg 1.1.0 hinzugefügt, und zwar die Autovervollständigung beim Hinzufügen von Blocks. Für diejenigen unter uns, die Slack tagtäglich benutzen, ist es eine gewohnte Weise, Inhalte schnell so zu formattieren, wie du es gern hättest. Die Möglichkeit zu haben, die Anzahl der notwendigen Klicks zu minimalisieren und öfter das Keyboard zu nutzen, ist immer gut.
Gutenberg Autovervollständigung (Bildquelle: WordPress.org)
Inhaltsverzeichnis und Ankerlinks
Inhaltsverzeichnisse können in der Sidebar positioniert werden. Im Inhaltsverzeichnis sind anklickbare Texte, sodass du einfach an einen bestimmten Abschnitt in deinem Beitrag springen kannst. Dies kann beim Schreiben längerer Inhalte sehr praktisch sein.
Gutenberg Inhaltsverzeichnis

Gutenberg Ankerlinks
Anzahl von Wörtern und Blocks
Die meisten von uns sind daran gewohnt, dass die Gesamtanzahl der Wörter unten im WYSIWYG-Editor zu finden ist. Nun, in Gutenberg 1.2.1 werden diese Angaben über ein Pop-up-Fenster angezeigt. Da wirst du die Gesamtanzahl der Wörter, Blocks und Überschriften lesen können.
Anzahl von Wörtern und Blocks in Gutenberg
Pull Quotes und neue Optionen für Blockausrichtung
Außer der Möglichkeit von Blockzitaten, die wir jahrelang benutzt haben, gibt es jetzt auch Pull Quotes (auch Seitenansprache genannt). Und ja, Pull Quotes sind was anderes. Es ist auch schön zu sehen, dass Pull Quotes ganz unterschiedlich platziert werden können. Jahrelang konnte man die Block-Elemente linksbündig, rechtsbündig und zentriert ausrichten oder keine Ausrichtung für sie festlegen. Mit dem Gutenberg WordPress-Editor hast du jetzt zusätzlich neue Breiten, „align wide”, also breiter als der Inhaltscontainer (siehe unten) oder „align full-width”, d.h. in der vollen Seitenbreite.
Pull Quote in weiter Breite in Gutenberg
Button
Gutenberg verfügt über ein integriertes Method zum Hinzufügen von Buttons. Obwohl es hier nicht so viele Optionen gibt, sind wir froh darüber, denn viele Blogger und andere Publizierende brauchten schon einen einfacheren Weg zur Erstellung von Calls-to-Action in den Blogbeiträgen. Aktuell musst du HTML-Code oder Drittanbieter-Plugins für Buttons oder Shortcodes verwenden.
Gutenberg-Button
Möglichkeiten zum Einbetten von Inhalten
Falls du irgendwann mal nach einfacher zugänglichen Möglichkeiten zum Einbetten von Inhalten gesucht hast, naja, da hast du sie jetzt! Gutenberg macht das Einbetten von Inhalten super einfach. Von YouTube über SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit ist praktisch alles dabei. Obwohl man auch früher alles Mögliche in Beiträge einbinden konnte, wussten viele es nicht, weil nie was von dieser Möglichkeit im visuellen Editor erwähnt wurde. Kombiniert mit dem neuen Block-Erlebnis und Ausrichtungsmöglichkeiten, wissen wir nicht, wie man es noch besser machen könnte. Nun, sie müssten vielleicht mal die Dinge mit der Zeit umorganisieren, denn das hier kann leicht überladen wirken.
Möglichkeiten zum Einbetten in Gutenberg
Vorteile des WordPress Gutenberg-Editors
Im Folgenden wird dargestellt, welche Vorteile Gutenberg unserer Meinung nach hat.- Die Abhängigkeit zu TinyMCE *teilweise* abzuschütteln ist was Gutes, unserer Ansicht nach. Wir würden eine engere Integration zwischen Core, Theme-Entwicklern, Plugins und dem Editor begrüßen.
'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU
— Alex Denning (@AlexDenning) June 17, 2017
- Publizierende, die eher das Editing-Erlebnis vom neuen Medium bevorzugen, werden den WordPress Gutenberg-Editor sehr wahrscheinlich lieben.
- Gutenberg bietet eine weniger ablenkende Umgebung und zudem mehr Bildschirmbereich.
- Blöcke sind unterhaltsam zu benutzen und die neuen Ausrichtungsoptionen sind ein Schritt nach vorn für Bildschirme mit höher Auflösung, sowie für responsive Seiten und die mit voller Breite.
- Bereits jetzt funktioniert der Editor super auf Handys, und wir sind uns sicher, dass künftig immer mehr Menschen diese Option verwenden werden. Willst du schnell unterwegs ein paar Änderungen auf deinem Handy vornehmen? Kein Problem.
- Die Möglichkeit für Theme- und Plugin-Entwickler, eigene Blöcke zu erstellen.
- Für Einsteiger ist es einfacher zu benutzen.
- Noch etwas, das unsere Aufmerksamkeit erregt hat, haben wir in Gutenberg 0.4.0 gesehen. Es wurde im Entwicklungslog erwähnt, dass ein API zur Verwaltung eingefügten Inhalts himzugefügt wird. (Ziel ist, den Inhalt eines Google Docs, Word oder Markdown einfach in einen WordPress-Block zu konvertieren und kopieren.) Das wäre großartig. Jetzt geht das Übetragen von Texten von Quellen wie Google Docs zu WordPress gar nicht.
Nachteile des WordPress Gutenberg-Editors
Im Folgenden erfährst du, welche Vorteile Gutenberg unserer Meinung nach hat. Vergiss immer noch nicht, dass sich Gutenberg in der Testphase befindet, also werden viele dieser Dinge wahrscheinlich später noch korrigiert oder hinzugefügt. - Gutenberg unterstütz derzeit Markdown nicht.
- Während wir früher erwähnt haben, es sei für Anfänger einfacher zu benutzen, können wir uns vorstellen, dass das für manche schwieriger zu erlernen sein wird.
- Seit Oktober 2017 funktionieren auch Metaboxes mit Gutenberg. Es befindet sich jedoch noch im Anfangsstadium, also muss es von den Entwicklern noch einiges getan werden. Es ist aber natürlich ein Schritt in die richtige Richtung. Wenigstens kannst du schon die Konfiguration deines Yoast SEO Plugins optimieren.
-
Gutenberg Metaboxes
- Ein Kritikpunkt an Gutenberg ist die fehlende Unterstützung von responsiven Spalten. Wir hoffen zutiefst, dass es aber noch dazu kommen wird. Oft ist der einzige Grund, warum die Menschen visuelle Page Builder oder Shortcode-Plugins installieren, dass sie dieses Spalten-Feature brauchen. Es ist definitiv an der Zeit, dass Spalten in den Core integriert werden!
- Mit so vielen Themes und Plugins da draußen wird Abwärtskompatibilität mit der Zeit ein großes Problem darstellen. Wahrscheinlich werden deswegen Tausende von Entwicklern eine Menge zu tun haben, zum Beispiel diejenigen, die TinyMCE-Instanzen nutzen. Von allen WordPress-Updates wird dieses den Entwicklern höchstwahrscheinlich die meiste Arbeit verursachen. Doch es wird vielleicht einen Wrapper geben, der die Abwärtskompatibilität für TinyMCE gewährleisten soll. Siehe Pull-Anforderung #1394.
- Manche machen sich Sorgen um die Zugänglichkeit von Gutenberg. Joost de Valk, Entwickler von Yoast SEO hat diese Besorgnis zum Ausdruck gebracht. Lies auch den folgenden Beitrag, in dem die Nutzung von Screenreader mit Gutenberg erläutert wird.
Schreibe einen Kommentar