Der WordPress Gutenberg Editor – für Einsteiger und Fortgeschrittene!

Der WordPress Gutenberg Editor – für Einsteiger und Fortgeschrittene!

Der Editor in WordPress ist der Bereich, in dem man sich wohl die meiste Zeit aufhält. Egal ob es der visuelle Editor ist oder der Texteditor, beide haben sich schon seit sehr langer Zeit nicht verändert.

Allerdings gibt es nun mit WordPress 5.0 den Gutenberg Editor und wird in Seiten und Beiträgen zukünftig als Editor zur Verfügung stehen.

Er ist die logische Weiterentwicklung der Editoren und wird viel Gutes mit sich bringen!

Allerdings ist so ein neuer Editor natürlich auch immer eine große Umstellung und viele fragen sich, ob sie davor Angst haben müssen und was eigentlich auf sie zukommt.

Soviel schonmal vorweg:

Angst brauchst du vor dem Gutenberg Editor nicht zu haben, aber eine gesunde Portion Respekt!

Ach ja, den gesamten Artikel hier habe ich im Gutenberg Editor geschrieben und erstellt. Einen Großteil meiner bisherigen Artikel habe ich bereits auf den Gutenberg Editor umgezogen (und bin auf kaum Probleme gestoßen).

Was ist der Gutenberg Editor?

Der Gutenberg Editor ist ein komplett neuer Editor, mit dem du seit der WordPress Version 5.0 deine Seiten und Beiträge bearbeitest.

Als modularer Editor wird Gutenberg ähnlich sein zu den bekannten PageBuildern, allerdings deutlich schneller und mit (zumindest du Beginn) nicht so vielen Blöcken / Elementen und Möglichkeiten.

So sieht der WordPress Gutenberg Editor aus
So sieht der Gutenberg Editor aktuell aus, wenn eine neue Seite oder ein neuer Beitrag erstellt wird.

Mit dem Gutenberg Editor wird WordPress komplett revolutioniert.

Das WordPress Telegramm
von Jonas Tietgen

Mache es wie mehr als 3.000 andere:

Abonniere das WordPress Telegramm und du bekommst wöchentlich WordPress Tipps per E-Mail, um deine Website zu verbessern!

Durch den auf Blöcken basierenden Editor werden für viele Websites zukünftig keine PageBuilder mehr benötigt (sie haben aber nach wie vor ihre Daseinsberechtigung, weiter unten gibts mehr dazu) und es ergeben sich von Haus aus ganz neue Möglichkeiten bei der Gestaltung von Websites.

Du kannst ganz ohne HTML und CSS Kenntnisse und ohne zusätzliches PageBuilder Plugin deine Beiträge und Seiten aufbauen.

Gutenberg, one of the most important and exciting projects I’ve worked on in my 15 years with this community.

– Matt Mullenweg (WordPress Gründer)

Wieso kann nicht alles beim Alten bleiben?

Das ist recht einfach und schnell geklärt:

Der „alte“ Classic Editor ist sehr in die Jahre gekommen und ist zukünftig weder wettbewerbsfähig noch barrierefrei. (Mit letzterem hat Gutenberg aktuell noch Probleme, es wird aber mit Hochdruck daran gearbeitet)

Die Entwicklung, dass immer mehr Websites zusätzliche PageBuilder Plugins installieren, zeigt ganz klar, dass die Seitenbetreiber mehr Möglichkeiten wünschen und benötigen.

Das von Haus aus zu erfüllen, macht nicht nur aus Sicht der Bedienerfreundlichkeit Sinn. Ein integrierter Editor wird bei ordentlicher Programmierung immer schneller und reibungsloser funktionieren, als ein zusätzlich installiertes Plugin.

Zwischen manchen PageBuilder Plugins und anderen Plugins gab es hin und wieder Kompatibilitätsprobleme. Klar, denn wieso sollte jeder Entwickler sein Plugin an die Vielzahl sämtlicher PageBuilder Plugins anpassen?

Mit dem integrierten Gutenberg Editor wird jeder Hersteller dazu gezwungen, das Plugin an ihn anzupassen. 

Das sorgt für weniger Probleme, weniger Fehler und somit weniger Ärger bei den WordPress Nutzern.

Der WordPress Gutenberg Editor im Video

So kannst du den Gutenberg Editor ausprobieren

Bevor du den Gutenberg Editor auf deiner Website aktivierst bzw. auf WordPress 5.0 aktualisierst, solltest du dich mit dem Gutenberg Editor auch in der Praxis beschäftigen.

Insbesondere zum Start von WordPress 5.0 und dem Gutenberg Editor, wird es noch zu einigen Problemen kommen. Viele davon entstehen durch Kompatibilitätsprobleme zwischen dem Editor und Plugins / Themes.

Darum empfehle ich dir, dich erst einmal in einer sicheren Umgebung mit Gutenberg vertraut zu machen.

Es gibt drei Wege, wie du das tun kannst:

Auf der offiziellen Gutenberg Editor Website

Die offizielle WordPress Website zum Gutenberg Editor zeigt nicht nur sämtliche Infos zum neuen Editor an, sondern ist gleichzeitig mit ihm gebaut und kann von den Seitenbesuchern verändert werden.

Du kannst also einfach auf die Gutenberg Website gehen und dort komplett ohne Installation oder sonstiges den Editor benutzen. Es ist sogar möglich, eigene Bilder hochzuladen und so den Editor rundum auszuprobieren.

Natürlich ist das eine Show-Version, auf der keine Konflikte mit Plugins oder Themes auftreten. Trotzdem ist es ein toller Weg, um dem Gutenberg ein erstes Mal zu begegnen.

🤓 Teste den Gutenberg Editor auf der offiziellen Website!

Auf einer gespiegelten Version deiner Website

Natürlich kannst du, während du den Gutenberg Editor ausprobierst, auch direkt prüfen, ob es bei der Nutzung Probleme auf deiner Website gibt.

Wie gesagt, solltest du ihn nicht sofort auf deiner Live-Website installieren. Lege ein Duplikat deiner Website an. Das kannst du beispielsweise auf einer Subdomain oder einfach einem Unterverzeichnis machen. (Hilfreich ist hier das Plugin „Duplicator„)

Nachdem du deine Website erfolgreich gespiegelt hast, kannst du auf dieser Testversion den Gutenberg Editor installieren bzw. WordPress auf die Version 5.0 aktualisieren.

Anschließend kannst du bei deinen Seiten und Beiträge überprüfen, ob sie reibungslos auf den Gutenberg Editor umgestellt werden oder ob es Probleme gibt. Schaue dich einfach etwas auf deiner Website um und halte nach Fehlern Ausschau.

Nun kannst du natürlich mit dem Gutenberg Editor experimentieren, ohne dass deine Änderungen oder auch auftretende Fehler auf deiner Live-Website sichtbar sind.

🤓 Lege eine Kopie deiner Website an (das Plugin „Duplicator“ hilft) und probiere dort den Gutenberg Editor aus. Teste das Umstellen bestehender Seiten & Beiträge und experimentiere mit dem Editor herum.

Exklusive Testumgebung für Dojo Mitglieder

In meinem WordPress Mitgliederbereich gibt es eine exklusive Testumgebung, damit ohne Angst vor Problemen mit dem Gutenberg Editor rumgespielt werden kann.

Auch hier gibt es keine Kompatibilitätsprobleme mit anderen Plugins oder Themes und sollte etwas schief gehen, kann ich das ganz fix korrigieren.

Zusätzlich zur Testumgebung kommst du natürlich noch in den Genuss von sämtlichen Möglichkeiten, die du als Mitglied im WP Ninjas Dojo hast. Beispielsweise Live-Webinare, exklusive Support und vieles mehr!

🤓 Tritt meinem WordPress Mitgliederbereich „WP Ninjas Dojo“ bei und teste ganz ohne Gefahr den Gutenberg Editor. Zudem bekommst du als Mitglied exklusiven Support, Live-Webinare und vieles mehr!

So gelingt die Umstellung auf den Gutenberg Editor & WP 5.0

Ich werde dich nicht belügen, die Umstellung auf WordPress 5.0 und den Gutenberg Editor ist keine Kleinigkeit.

Es ist eine der größten Änderungen in WordPress überhaupt, seit es WordPress gibt.

Damit du deine Seite ohne Bedenken weiterhin bedienen kannst, erkläre ich dir, wie du den Umstieg möglichst reibungslos hinbekommst und bei Problemen richtig reagierst.

Wann du aktualisieren solltest

Also erst einmal keine Hektik. WordPress lief bisher rund, und wird auch in der bisherigen Version weiterhin rund laufen.

Es besteht also keine Eile, jetzt schnell auf WordPress 5 zu aktualisieren.

Einige Pluginhersteller, darunter große Namen wie WPML und die Hersteller von Advanced Custom Fields, haben sich schon öffentlich geäußert, dass ihre Plugins aufgrund der schlechten Vorbereitung des WordPress Updates noch nicht kompatibel mit dem Gutenberg Editor sind.

Zudem wird es auch Themes geben, die ebenfalls noch nicht zu 100% für den Gutenberg Editor bereit sind.

Wenn du deine Website in einem Klon oder einer Staging Version aktualisieren und prüfen kannst (nicht auf deiner Live-Website), keine Fehler feststellst und Lust drauf hast, kannst du natürlich sofort loslegen.

Ansonsten empfehle ich dir, das Update erst einmal liegen zu lassen. Genieße die Weihnachtsfeiertage in Ruhe und füge deinem vorweihnachtlichen Stress nicht noch ein weiteres Stresslevel hinzu.

Ich schätze, bis Mitte Januar werden sich die meisten Theme- und Pluginhersteller um ihre Produkte gekümmert haben und entsprechende Aktualisierungen zur Verfügung stellen.

Führe das Update also im Zweifel Mitte oder Ende Januar durch, wenn deine Plugins und dein Theme up to date und kompatibel sind.

Egal, wann du die Aktualisierung durchführst, lege auf jeden Fall vorher ein Backup an!

🤓 Wenn du deine Website klonst, aktualisierst und bei einer Prüfung keine Fehler findest, kannst du das Update auf WordPress 5.0 natürlich durchführen.
Ansonsten rate ich dir dazu, bis Mitte oder Ende Januar abzuwarten, damit die Theme- und Pluginhersteller ihre Produkte auf den Gutenberg Editor anpassen können.

Das passiert mit deinen bestehenden Beiträgen und Seiten

Zunächst einmal passiert gar nichts mit ihnen, sie bleiben, wie sie waren.

Erst, wenn du einen Beitrag oder eine Seite anklickst und dadurch mit dem Gutenberg Editor bearbeitest, passiert etwas.

Mit dem Classic Editor erstellte Seiten & Beiträge

Wenn du deine Inhalte im Classic Editor verwaltet hast, wird der Gutenberg Editor sie automatisch in einen Classic-Block einfügen. Dadurch sollte sich bei den meisten Inhalten nichts ändern.

WordPress Classic Editor Beispiel
Der Beitrag vor der Umstellung auf Gutenberg
WordPress Gutenberg Editor Beispiel
Der Beitrag nach der Umstellung auf Gutenberg

Wenn du im Editor Shortcodes oder andere, nicht WordPress native Elemente genutzt hast, kann es durch diese Umstellung zu Problemen kommen. Wie geschrieben, es kann zu Problemen kommen, muss aber nicht.

Nun sind alle Inhalte in diesem einen Classic-Block, du kannst sie aber in tatsächliche Gutenberg-Blöcke umwandeln.

Dafür musst du nur mit der Maus über den Block fahren und kannst nach dem Klick auf die drei Punkte auf „In Blöcke umwandeln“ klicken. Dadurch wandelt WordPress die Inhalte automatisch in passende Blöcke um.

Bei diesem Schritt kann es passieren, dass Inhalte in nicht passende Blöcke umgewandelt oder nicht mehr korrekt dargestellt werden. Prüfe daher auf jeden Fall den gesamten Beitrag bzw. die Seite, ob alles funktioniert.

🤓 Inhalte aus dem Classic Editor werden 1:1 in den Classic-Block des Gutenberg Editors übertragen. Du solltest diese Inhalte umwandeln in Blöcke und anschließend dringend sämtliche Funktionen der Seite / des Beitrags und deren Darstellung überprüfen.

Mit PageBuildern erstellte Seiten & Beiträge

Natürlich nutzen viele von uns gerne PageBuilder Plugins und haben damit bereits die gesamte Website oder Teile davon erstellt.

Die gute Nachricht ist:
Der Gutenberg Editor greift nicht in diese Seiten und Beiträge ein, die Inhalte werden also nicht verändert und weiterhin so dargestellt, wie im PageBuilder festgelegt.

Die teilweise schlechte Nachricht ist:
Es sind noch nicht alle PageBuilder auf WordPress 5 und den Gutenberg Editor angepasst, wodurch die damit erstellten Seiten und Beiträge aktuell nicht mehr bearbeitet werden können.

Diese schlechte Nachricht bezieht sich aber nicht auf alle PageBuilder. Thrive Architect, WPBakery Composer und Elementor funktionieren alle bereits jetzt reibungslos. Bei Divi habe ich noch von Problemen gelesen, aber auch das wird sicherlich bald behoben sein.

🤓 Die Inhalte der PageBuilder werden normalerweise weiterhin korrekt angezeigt und können über den PageBuilder bearbeitet werden. Es gibt möglicherweise noch ein paar PageBuilder Plugins, die noch nicht kompatibel sind und somit eine Bearbeitung aktuell nicht möglich ist (Divi).

So bedienst du den Gutenberg Editor

Das Prinzip des Editors beruht auf modularen Blöcken, die du zur Strukturierung und dem Einbauen von Inhalten nutzen kannst. Diese Blöcke können beispielsweise Tabellen, Medien, Spalten und weiteres enthalten.

An sich ist Gutenberg ein WYSIWYG Editor, also ein „du-bekommst-was-du-siehst“ Editor. Das bedeutet, dass du in dem Editor deine Seiten & Beiträge aufbaust, und sie nach der Veröffentlichung im Frontend deiner Website 1:1 gleich aussehen.

In der Praxis ist dem nicht immer so.

Ja, der grundsätzliche Aufbau der Seite ist natürlich sowohl beim Bearbeiten als auch bei der veröffentlichten Seite identisch, die Darstellung gewisser Elemente wird allerdings abweichen.

Wie die Inhalte letzten Endes auf der Website selber angezeigt werden, ist nicht nur durch den Editor bestimmt, sondern auch durch das genutzte Theme.

Allgemeine Einstellungen zu Seiten & Beiträgen

Allgemeine Seiteneinstellungen im Gutenberg Editor
In der rechten Sidebar findest du die Einstellungen
für die Seite bzw. den Beitrag

Auf der rechten Seite des Gutenberg Editors gibt es eine Sidebar. Dort findest du die beiden Reiter „Dokument“ und „Block“.

Die allgemeinen Einstellungen zu deinen Seiten und Beiträgen kannst du unter „Dokument“ festlegen.

Hier findest du die von WordPress zur Verfügung gestellten Einstellungen zum Status und der Sichtbarkeit, kannst Kategorien und Schlagwörter hinterlegen (bei Beiträgen), ein Beitragsbild einfügen und Diskussionen zulassen (bei Beiträgen).

Plugins, die an Gutenberg angepasst sind, werden sich entweder auch mit in diese Seitenleiste setzen und dort ihre Einstellungsmöglichkeiten einbauen oder aber weiterhin unterhalb des Editors in eigenen Boxen zur Verfügung stehen.

🤓 Die allgemeinen Einstellungen zu deiner Seite / dem Beitrag findest du in der rechten Sidebar unter dem Reiter „Dokument“

Permalinks (URLs) ändern

Die Permalinks (URLs) deiner Seiten und Beiträge anzupassen und sprechende URLs zu erstellen, ist ein wichtiger Bestandteil der Suchmaschinenoptimierung.

Im Gutenberg Editor ist die individuelle Anpassung des Permalinks eines bestimmten Dokuments (Seite oder Beitrag) etwas versteckt.

So änderst du den Permalink eines Dokuments im WordPress Gutenberg Editor
Um den Permalink anzupassen, musst du den Titel des Dokuments anklicken.

Und zwar kannst du den Permalink ändern, indem du auf den Titel des Dokuments klickst. Daraufhin erscheint oberhalb des Titels der Permalink und ein Button, um diesen zu bearbeiten.

Klicke nun einfach den Button an, ändere den Permalink nach deinen Wünschen und bestätige über den „Ok“ Button.

🤓  Um den Permalink zu ändern, klicke auf den Titel deines Dokuments. Dadurch erscheint die Bearbeitungsmöglichkeit oberhalb des Titels.

Wortanzahl & weitere Infos anzeigen lassen

Im Classic Editor wurde die Wortanzahl noch unten links am Rande des Editors angezeigt, nun hat diese Information im Gutenberg Editor einen neuen Platz bekommen.

Die Anzahl der Wörter, weitere Zahlen und die Gliederung findest du oben links bei dem „i“ Icon

Du findest die Wortanzahl nun in der Leiste oben links, versteckt hinter dem „i“ Icon.

Zusätzlich werden dir hier die Anzahl der Überschriften, Absätze und Blöcke angezeigt, sowie eine komplette Gliederung deiner Seite oder deines Beitrags.

Meiner Meinung nach ist vor allem die Neuerung der automatisch generierten Gliederung ein toller Vorteil, um selber eine schnelle Übersicht zu bekommen. Insbesondere bei langen Seiten und Beiträgen (wie diesem hier) ist das unglaublich praktisch.

Kleiner Tipp am Rande:
Wenn du einen Abschnitt in der Gliederung anklickst, wirst du automatisch im Gutenberg Editor dorthin navigiert!

🤓 Die Wortanzahl, weitere Infos und die Gliederung findest du in der oberen Leiste des Gutenberg Editors hinter dem „i“ Icon auf der linken Seite.

So funktionieren die Gutenberg Blöcke

Die grundlegende Funktionsweise der Blöcke im WordPress Gutenberg Editor ist ähnlich zu der Funktionsweise der bekannten PageBuilder wie Thrive Architect, WPBakeryComposer und weiteren.

Allerdings ist die gesamte Benutzeroberfläche deutlich anders, als in den bekannten PageBuildern.

Wie du die Blöcke einfügst, bearbeitest und veränderst, zeige ich dir hier.

Blöcke einfügen

Zum Einfügen von Inhalten oder der Strukturierung der Seite kannst du aus verschiedenen, vorgegeben Modulen wählen. Dafür gibt es oben links im Editor ein „+“ Icon, über das du auf die Blockübersicht kommst.

Blocks im Gutenberg Editor einfügen
So fügst du einen neuen Block in deine Seite / deinen Beitrag ein.

Klickst du einen Block an, wird er in deinen Editor eingefügt. Anschließend kannst du diesen Block direkt im Editor bearbeiten und bekommst zusätzlich weitere Einstellungsmöglichkeiten in der Sidebar auf der rechten Seite.

Zudem gibt es unterhalb eines jeden Blocks die Möglichkeit, über das „+“ Icon einen neuen Block unterhalb einzufügen (mit der Maus über den Block fahren) oder aber einfach per „Return“ in eine neue Zeile zu springen und dann mit dem Shortcut „/“ + „Name des Block“ einen neuen Block einzufügen.

Beispielsweise sieht der Shortcut dann so aus: /Überschrift

🤓 Du kannst auf drei Arten neue Blöcke einfügen:
– über das „+“ Icon oben links
– mit dem „+“ Icon zwischen zwei Blöcken
– per „Return“ und „/“ + „Name des Blocks“

Einstellungen für einzelne Blöcke

Wenn du einen Block anklickst, springt die rechte Sidebar automatisch in den Bearbeitungsmodus für die Blöcke.

In dieser Sidebar findest du eine kurze Übersicht und Erklärung des jeweiligen Blocks und zudem, je nach Block, verschiedene Einstellungsmöglichkeiten wie beispielsweise die Hintergrund- und Textfarbe eines Buttons.

WordPress Gutenberg Editor Bedienung der Sidebar
In der Sidebar findest du weitere Einstellungsmöglichkeiten.

Ein weiteres Beispiel ist der „Columns“-Block. Mit ihm kannst du ganz einfach eine mehrspaltige Struktur erstellen, um mehrere Blocks nebeneinander anzeigen zu lassen.

In der Sidebar kannst du bei der Bearbeitung des Blocks die Menge der Spalten einstellen. Somit kann endlich mit Bordmitteln von WordPress ein mehrspaltiges Layout erstellt werden!

Mehrspaltige Layouts erstellen mit dem Gutenberg Editor
So erstellst du ganz einfach ein mehrspaltiges Layout.

🤓 Wenn du einen Block anklickst, bekommst du in der rechten Sidebar Einstellungsmöglichkeiten zu diesem Block angezeigt. Beispielsweise kannst du Hintergrundfarben, Schriftfarben und weiteres ändern.

Wiederverwendbare Blöcke

Eine sehr praktische Funktion im Gutenberg Editor sind die wiederverwendbaren Blöcke.

Wenn du einen Block erstellst, auf deine Bedürfnisse anpasst und anschließend in dieser Form auf deiner Website häufiger verwenden möchtest, kannst du ihm mit exakt diesen Einstellungen speichern.

Wiederverwendbare Blöcke im Gutenberg Editor
Wiederverwendbare Blöcke können wie „normale“ Blöcke auch eingefügt werden

Du gibst dem Block einen Namen und kannst ihn anschließend an einer beliebigen Stelle auf deiner Website einfügen, ganz einfach wie die anderen Blöcke auch.

Hast du also beispielsweise einen Button-Block erstellt, Hintergrund- und Schriftfarbe angepasst und möchtest das nicht jedes Mal erneut einstellen müssen, kannst du mit der Maus auf der rechten Seite neben dem Block (erscheint erst, wenn du mit der Maus über den Block fährst) auf die drei vertikal angeordneten Punkte klicken und anschließend „Füge zu Wiederverwendbaren Blöcken hinzu“ auswählen.

Anschließend musst du noch einen Namen für diesen Block vergeben und schon kannst du ihn wie jeden anderen Block auch einfügen.

Nachdem du einen Block als wiederverwendbaren Block festgelegt hast, kannst du das Aussehen allerdings nicht mehr anpassen!

🤓 Fahre mit der Maus über einen Block, klicke rechts auf die drei Punkte und wähle „Füge zu Wiederverwendbaren Blöcken hinzu“ aus, um einen Block mit den hinterlegten Einstellungen zu speichern und an beliebiger Stelle mit dem selben Aussehen einzufügen.

Das Verschieben von Blöcken

Blöcke können auf zwei Arten verschoben werden.

Fährst du mit der Maus über einen Block, erscheinen links daneben zwei nach oben bzw. unten zeigende Pfeile. Klickst du sie an, verschiebt sich der Block eine Position nach oben oder unten.

Alternativ kannst du mit der Maus über den linken oder rechten Rand eines Blocks fahren, wodurch sich dein Mauszeiger zu einer Hand verändert und du per Drag & Drop den Block verschieben kannst.

🤓 Verschiebe Blöcke entweder mit den hoch / runter Pfeilen links neben dem Block, oder packe ihn am linken / rechten Rand an und verschiebe ihn per Drag & Drop.

Die Umwandlung von Blöcken

Gewisse Blöcke können in andere umgewandelt werden.

Das ist sehr praktisch, wenn du einen Absatz zu einer Überschrift machen möchtest, oder ein Bild in eine Galerie.

Blöcke umwandeln im Gutenberg Editor
Du kannst Blöcke mit dem linken Icon in der Werkzeugleiste in einen andern Block-Typ umwandeln

Um das zu tun, fährst du mit der Maus über den umzuwandelnden Block und klickst auf das linke Icon der erscheinenden Werkzeugleiste. Anschließend bekommst du die Blöcke angezeigt, in die der ausgewählte Block umgewandelt werden kann.

Hast du beispielsweise einen Abschnitt-Block und wandelst ihn in ein Zitat um, wird der Text automatisch groß, kursiv und zentriert dargestellt.

🤓 Wandle Blöcke mit einem Klick auf das linke Icon in der Werkzeugleiste des Blocks in eine andere Block-Art um.

Blöcke als HTML bearbeiten

Im Classic Editor war es möglich, in der visuellen Ansicht zu arbeiten, oder in der Textansicht. Letzteres hat den HTML Quellcode angezeigt und auch beim Gutenberg Editor ist das möglich.

Wenn du mit der Maus über einen Block fährst und auf der rechten Seite die drei Punkte anklickst, gibt es dort die Auswahlmöglichkeit „Als HTML bearbeiten“.

Klickst du diesen Punkt an, wird der HTML Quellcode dieses Blocks angezeigt und kann von dir bearbeitet werden.

HTML Modus im WordPress Gutenberg Editor
So sieht ein Bild-Block im HTML Modus aus

Sei hier vorsichtig, denn wenn du einen Fehler im HTML Code machst, wird der Block möglicherweise nicht mehr richtig angezeigt und auch die Inhalte werden falsch dargestellt.

Um aus dem HTML Modus wieder herauszukommen, kannst du wieder die drei Punkte anklicken und „Visuell bearbeiten“ auswählen.

🤓 Du kannst einzelne Blöcke im HTML Modus bearbeiten, indem du auf die drei Punkte rechts neben dem Block klickst und „Als HTML bearbeiten“ auswählst.

Diese Blöcke gibt es im Gutenberg Editor

Hier ist eine Liste aller verfügbaren Blöcke im Gutenberg Editor. Es ist zu erwarten, dass zukünftig noch weitere Blöcke dazu kommen werden und zudem können bereits jetzt mit der Hilfe von Plugins weitere Blöcke hinzugefügt werden.

Allgemeine Blocks

Audio
Erlaubt das Einbinden und Abspielen externer Audiodateien.

Titelbild
Ein großes, auffälliges Bild mit optional darüber liegendem Text.

Galerie
Einfache Darstellung mehrer Bilder in der gleichen Größe als Galerie.

Überschrift
Überschriften verschiedener Hierarchieebenen.

Bild
Einfache Darstellung eines Bildes.

Liste
Eine entweder geordnete oder ungeordnete Auflistung.

Absatz
Ein einzelner Textabschnitt.

Zitat
Ein Zitat mit dessen Urheber.

Untertitel
Der Untertitel einer Überschrift.

Video
Erlaubt das Einbinden und Abspielen externer Videodateien

Blöcke zur Formatierung

Code
Stellt eingegebenen Code in Textform dar.

Classic
Der klassische, bisherige WordPress Editor in Block-Form.

Eigenes HTML
Erlaubt das Einfügen von HTML Code und bietet eine Vorschau.

Vorformattiert
Lässt dich Text einfügen, bei dem die Formatierung übernommen wird.

Pull-Quote
Eine weitere Möglichkeit zur Darstellung eines Zitats und dessen Urhebers.

Tabelle
Eine Tabelle mit beliebig vielen Spalten und Zeilen.

Vers
Zur Darstellung von Lyrik.

Layout Elemente

Button
Ein Button mit anpassbarer Hintergrund- und Textfarbe.

Spalten
Erlaubt die Darstellung eines Mehrspaltigen Layouts.

Mehr
Ergänzt den Gutenberg Editor um den klassischen „Mehr Lesen“ Tag.

Abstandshalter
Eine einfache Linie als Trennung zwischen Seitensegmenten.

Seitenumbruch
Es werden auf mehrere Seiten aufgeteilt angezeigt

Widgets als Blöcke

Shortcode
Hier kannst du Shortcodes aus anderen Plugins einfügen

Archiv
Zeigt ein datumbasiertes Archiv deiner Artikel an

Kategorien
Zeigt die Kategorien deiner Beiträge an

Neueste Kommentare
Zeigt die neuesten Kommentare deiner Artikel

Neueste Beiträge
Zeigt die neuesten veröffentlichten Beiträge deines Blogs an

Embed Blöcke

Diese Blöcke stehen dir zur Verfügung um Inhalte aus diversen externen Plattformen einzubauen.

Beispielsweise gibt es Blöcke für Youtube, Facebook, Twitter, Vimeo, Soundcloud und viele weitere. Diese Blöcke sorgen dafür, dass die externen Inhalte ordentlich auf deiner Website angezeigt werden.

Weitere Blöcke per Plugin nachrüsten

Es gibt bereits seit einiger Zeit mehrere Programmierer, die mit der Hilfe von Plugins weitere Blöcke nachrüstbar machen.

Diese Plugins zielen meistens darauf ab, dem Gutenberg Editor mehr Möglichkeiten zu geben und sich großen PageBuildern anzunähern.

Wenn du weitere Blöcke benötigst, schau dir die Plugins gut an und entscheide, ob du wirklich alle Blöcke benötigst oder eh nur einen davon nutzt, aber zehn weitere als Ballast deine Website belasten.

Aktuell sind meine Favoriten der Plugins für weitere Gutenberg Blöcke diese hier:

Keine Lust? Angst? – So verhinderst du den Gutenberg Editor

Meiner Meinung nach sollte sich jeder Betreiber einer WordPress Website dringend mit dem Gutenberg Editor auseinandersetzen und sobald wie möglich darauf umsteigen.

Es gibt allerdings Fälle, in denen es durchaus notwendig ist, den Gutenberg Editor zunächst zu umgehen. Beispielsweise bei Plugins oder Themes, die nicht an den Gutenberg Editor angepasst sind und es auch nicht sofort werden.

Es gibt ein paar Wege, wie du vorerst auf den Gutenberg Editor verzichten und mit dem bisherigen Classic Editor weiterarbeiten kannst. Der einfachste und auf jeden Fall durch WordPress unterstütze Weg, ist das Classic Editor Plugin.

Das Classic Editor Plugin

Classic Editor Plugin Titelbild

Das Classic Editor Plugin ist von WordPress Contributors programmiert worden und lässt dich trotz WordPress 5.0 mit dem Classic Editor arbeiten.

Du kannst mit dem Plugin entweder den Gutenberg Editor komplett deaktivieren, oder einstellen, dass du den normalen Editor als Alternative zum Gutenberg Editor benutzen kannst.

Wenn du beides parallel nutzen möchtest, bekommst du einen alternativen „bearbeiten“ Link bei den Seiten und Beiträgen angezeigt, um sie im Classic Editor zu öffnen.

Um zwischen den beiden Varianten zu wechseln, bringt das Plugin eine Einstellungsseite mit.

Das Plugin wird offiziell bis zum 31.12.2021 unterstützt und weiterentwickelt.

🤓 Wenn du auf Gutenberg verzichten möchtest, kannst du ihn mit dem Classic Editor Plugin entweder komplett deaktivieren oder dir bei jeder Seite / jedem Beitrag aussuchen, ob du mit dem Gutenberg Editor oder dem Classic Editor arbeiten möchtest.

Vor- und Nachteile des Gutenberg Editors

Der Gutenberg Editor steckt noch in den Kinderschuhen. Trotz einer langen Beta-Testphase, gibt es noch einige Bugs und Optimierungspotenziale.

Insgesamt funktioniert der Editor aber bereits echt gut. Ein Beweis ist, dass dieser gesamte Beitrag (und auch noch einige weitere hier im Blog) mit ihm erstellt ist.

Vorteile

  • Elemente wie Buttons, Spalten und weitere in WordPress integriert
  • Gestaltete Blöcke können zur Wiederverwendung gespeichert werden
  • Mehr Platz zum Schreiben
  • Warnung bei der Nutzung schlecht lesbarer Farbkombinationen
  • Es gibt ein internes Inhaltsverzeichnis im Editor, das aus Überschriften erstellt wird
  • Gutenberg ersetzt eine Vielzahl an vorher benötigten Plugins

Nachteile

  • Das Setzen von Links funktioniert nicht immer rund
  • Es gibt aktuell noch Kompatibilitätsprobleme mit Plugins und Themes
  • Spalten funktionieren noch nicht zu 100% responsive

Mein Gesamteindruck

Ich bin insgesamt sehr zufrieden und begeistert!

Der Gutenberg Editor ist die logische und notwendige Weiterentwicklung des bisherigen WordPress Editors. In Zeiten von PageBuildern wurde es nötig, dass ein solcher Editor als Bordmittel kommt.

Ich nutze den Gutenberg Editor selber schon aktiv hier auf der Website, der gesamte Artikel ist mit ihm erstellt.

Es gibt nach wie vor einige kleine Bugs, die mit Sicherheit nach und nach behoben wurden. Wir dürften nicht vergessen, dass die Entwicklung eines solch umfangreichen Produkts einige Zeit dauert, bis es komplett ausgereift ist.

Endlich kommen einfache aber wichtige Elemente wie Buttons oder Mehrspaltigkeit von Haus aus und müssen nicht mehr nachgerüstet werden!

Wie sieht es bei dir aus – Nutzt du den Gutenberg-Editor schon oder wie gehst du vor?

4/5 (4 Reviews)

  1. Hallo Jonas,
    danke für den Einblick in den neuen Editor. Der erste Eindruck ist wirklich sehr gut. Ich bin gespannt auf die Umsetzung. Vielleicht kann ich dann auch meinen PageBuilder beerdigen. 😉
    Viele Grüße
    Simone

    1. Moin Simone,

      gerne doch 🙂
      Insbesondere zum Anfang hin wird der Gutenberg Editor einen PageBuilder nicht ersetzen, solange man keine sehr einfachen Seiten bauen möchte 🙂 Langfristig wäre das natürlich möglich und erstrebenswert!

      Grüße
      Jonas

  2. Ja, der erste Eindruck zeigt wohin sich der WordPress Editor bewegen wird, auch wenn die Beta Version in einem Live-Betrieb derzeit kaum zu verwenden ist. Ob er aber in absehbarer Zeit an gestandene PageBuilder wie Elementor oder Thrive Architect ran kommt wage ich mal zu bezweifeln. Habe ja auch einen umfangreichen Artikel zu Pagebuilder allgemein verfasst und aufgezeigt wie Vielfältig diese heute schon sind.

    Aber ansonsten ist es gut, dass WordPress den Editor ausbaut und in Richtung blockweise Gestaltung geht. Nur so kann man die derzeitigen Gestaltungswünsche der User erfüllen.

    1. Moin Alex,

      da stimme ich dir in jedem Punkt zu 🙂 Auch wenn ich dem Gutenberg Editor ein bisschen mehr zutraue in Hinsicht auf das langfristige Ersetzen der jetzigen PageBuilder als du 😉
      Ich denke, in einigen Jahren mausert er sich zum einzig nötigen PageBuilder, wir werden sehen!

      Grüße
      Jonas

  3. Heute habe ich den Gutenberg auch ich „bekommen“ und war ich voll begeistert .
    Durch ihn ist das Schreiben ( obwohl meinem Deutsch sogar Gutenberg wird nicht helfen ) viel Leichter und Komfortabler leider wie ich heute gemerkt habe besteht kein Verbindung zu NextGen Gallery . Bin ich zu Blöd oder einfach muss ich warten bis Next Gen Ihren app anpasst . Hast Du vieleicht ein Lösung dafür?

  4. Hi, ich finde den Editor eigentlich ziemlich gut. Nur auf einer meiner WordPress-Webseiten wird der Editor plötzlich nicht mehr dargestellt. Die Beitragsseite bleibt leer, auch wenn das das Debugging auf true setze wird nichts angezeigt. Auf den anderen Installationen funktioniert der Editor hervorragend. Ich finde den eigentlich echt super… Liebe Grüße, Michael

    1. Moin Michael,

      es gab und gibt mit Gutenberg noch einige Probleme und vor allem manchmal Kompatibilitätskonflikte mit anderen Plugins.
      Da musst du wohl testen, ob es an einem deiner Plugins liegt (wovon ich stark ausgehe).

      Grüße
      Jonas

  5. Als einfacher Nutzer und Erfahrung mit Layout-Blöcken (scribus) konnte ich mich leicht mit dem Editor anfreunden.
    Allerdings habe ich oft Texte mit „CO2“ und bisher keine Möglichkeit gefunden, die 2 tief zu stellen. Geht das mit Gutenberg? Wie? Doch nicht wieder über html-Code? Den TinyMCE habe ich mir um entsprechende Buttons für Hoch- und Tiefgestellt ergänzt. Geht das bei Gutenberg auch?
    Denke

  6. Hallo Jonas,
    bisher teste ich den Gutenberg Editor noch aus und es gibt definitiv auch Nachteile in der WYSIWYG Darstellung im Editor im Vergleich zur eigentlichen Seite. Kombiniert man linksbündiges Bild mit rechtsbündigem Text und einem Button, hat die Editoransicht nicht viel mit dem zu tun was rauskommt. Bin mir aber sicher, dass es hier in jeder weiteren Version noch mehr Anpassungen geben wird. Freue mich darauf, noch mehr zu testen und womöglich wird mir die Entscheidung abgenommen, ob ich noch einen PageBuilder kaufen sollte bald endgültig abgenommen 😀

    Beste Grüße,
    Andreas

    1. Moin Andreas,

      du hast absolut Recht, da entwickelt sich noch vieles weiter 🙂
      Einen Pagebuilder wird Gutenberg vorerst nur selten ersetzen können. Für Landingpages oder aufwendigere Seiten wird er keine Konkurrenz zu Thrive Architect, Visual Composer und Co darstellen. Das ist aber auch meiner Meinung nach nicht das Ziel.

      Grüße
      Jonas

  7. Hallo Jonas, vielen Dank für deinen Artikel. Weisst du, ob mein optimizeplugin auch noch mit
    Dem neuen Editor funktioniert? Habe meinen gesamten Mtgliederbereich mit OP und digimember gestaltet…🙄

  8. Hallo,
    mir gefällt der aktuelle Gutenberg Editor bereits sehr gut. Eine Sache fehlt aber noch, die dringend benötigt wird: das ist das Einfügen von z.B. Bildern in eine Tabelle. Da muss man aktuell noch sehr umständlich über HTML rangehen. Hoffe das kommt bald. Gibt es da irgendwo eine Roadmap?
    Viele Grüße
    -Peter

  9. Hi,

    danke für diesen so umfang- wie hilfreichen Artikel 🙂
    Kurzes Feedback zur CrossBrowserCompatibilität der Site:
    Im IE 11 (den ich eben, aber nicht freiwillig nutze), entsteht beim Hochscrollen eine komplett weisse Seite.

  10. Zum Gutenberg:

    ich habe bis dato keinen dieser Paygebuilder genutzt und komme aus der Zeit vom eher handprogrammierten HTML und WYSIWYG-Editoren . Aus diesem Grund kann ich mit dem Gutenberg so gar nichts anfangen!
    Für mich besteht eine Website aus sauber strukturiertem Text und Bildern/Multimedia.
    Muss ich jetzt echt bei jeder Überschrift die Maus in die Hand nehmen und ein Kreuzchen anklicken?
    Und dann wieder eins für Fließtext … und dann eins für eine Liste … und zurück??
    Bei mir hat der Gutenberg genau den gegenteiligen Effekt, mit dem er beworben wird: Ich kann mich NICHT mehr auf den Inhalt konzentrieren sondern muss beim ersten Entwurf schon die künftige Struktur im Kopf haben.
    Ne, gefällt mir bis dato eher nicht 🙁

  11. Ich beschäftige mich schon mit Gutenberg, da ich zumindest einen meiner persönlichen Blogs nur noch mit Gutenberg editiere. Aber wir werden keine Freunde

    – Für mich ist ein Text mit Absätzen etwas Ganzes, nicht so mit Gutenberg. Jeder Mousover erzeugt einen blauen Rahmen, über jedem Absatz schwebt ein Formatierungsbalken …
    So kann ich für mich den gesamten Text für eine Korrektur nicht schnell erfassen.

    – Shortcuts funktionieren nicht mehr – für das Einfügen eines Bildes muss ich nun auf den Formatierungsbalken klicken…

    – Um Kategorien einzupflegen brauche ich nun 2 Klicks mehr: Erst auf Settings, dann auf Document…

    Content-orientiertes Arbeiten ist mit diesem Editor (noch nicht) nicht möglich.

    1. Moin Johann,

      das kann ich nicht ganz nachvollziehen.

      – während du schreibst, fährst du doch nicht mit der Maus durchgehend über den Blöcken rum oder? 🙂

      – Um ein Bild einzufügen, musst du einfach nur Return drücken, und anschließend „/bild“ eintippen, ganz schnell gemacht

      – wieso musst du, um bei einem Beitrag eine Kategorie einzufügen, über die „Settings“ gehen? In der rechten Sidebar gibt es doch die Kategorien zur Auswahl

      Ich arbeite nun schon seit einem Jahr mit dem Gutenberg Editor, intensiv seit einigen Monaten. Ich muss, um einen Beitrag zu schreiben, die Hand nicht häufiger von der Tastatur nehmen, als bei dem TinyMCE Editor 🙂

      Grüße
      Jonas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

wordpress traffic plugins headbild
Nächster Beitrag:

7 bewährte WordPress Plugins, für mehr kostenlosen Traffic

7 bewährte WordPress Plugins, für mehr kostenlosen Traffic