Der ultimative Guide zum Gutenberg WordPress-Editor

Es ist zum Kotzen, oder?

Gerade ist der Stress mit der DSGVO vorbei.

Und dann kommt wieder etwas Neues. Etwas, womit mit du dich befassen musst. Etwas, wofür du deine eh schon knappe Zeit opfern musst:

Ein neuer WordPress-Editor.

Auweia!

Aber, um es vorweg zu nehmen:

So schlimm ist der neue Editor, der auf den Namen Gutenberg hört, gar nicht. Wenn du ihm eine Chance gibst, wirst du dich vielleicht sogar in ihn verlieben.

In meinem Guide zeige ich dir alles, was du als WordPress-Nutzer über Gutenberg wissen musst. Wie er funktioniert. Wie du ihn am besten nutzt. Welche Vor- und Nachteile er hat.

Und wie du auf Gutenberg sch**ßst, wenn du ihn abscheulich findest. Und einfach den klassischen Editor weiter nutzt, als wäre nichts gewesen.

1. Was ist Gutenberg?

Gutenberg ist ein neuer Editor, der mit der kommenden WordPress-Version 5.0 den bestehenden TinyMCE-Editor ersetzen wird.

Geplant ist WordPress 5.0 für 2018. Ein genauer Termin steht allerdings noch nicht fest.

Allerdings:

Dass Gutenberg kommt, ist beschlossene Sache. Es ist also wichtig, dass du dich schon jetzt damit befasst!

Aber was ist denn so toll und neu daran?

Ist er eine neue Revolution wie die Druckerpresse von Johannes Gutenberg, die als erste ihrer Art mit beweglichen Lettern arbeitete?

Eher nicht. Aber eine sinnvolle Entwicklung in die richtige Richtung:

Gutenberg ist ein Page-Builder.

Das heißt bei komplexeren Post-Layouts mit Bilder, Spalten, Multimedia-Elementen etc.  bist du nicht mehr auf HTML und CSS angewiesen.

Du kannst es mit Gutenberg einfach aus Blöcken zusammenstellen (jeder blaue Kasten im Screenshot steht für einen Block):

Blöcke in Gutenberg

2. Gutenberg ausprobieren

Wenn du WordPress-Version 4.9.7 oder darunter installiert hast, kannst du Gutenberg als Plugin herunterladen.

Wenn du bereits WordPress-Version 4.9.8 installiert hast (was du solltest), wirst du bereits zum Testen von Gutenberg aufgefordert:

Aufforderung Gutenberg zu testen im WordPress-Dashboard

Wenn du Gutenberg installierst und aktivierst, dann wird er zum Standard-Editor in WordPress.

Dies ist jedoch kein Zwang.

Du kannst Gutenberg jederzeit in der Plugin-Übersicht wieder ausstellen.

Und, selbst wenn Gutenberg aktiviert ist, kannst du immer noch den klassischen Editor auswählen:

Klassischen Editor verwenden bei aktiviertem Gutenberg-Plugin

Was du auch im Screenshot sehen kannst:

Rechts neben dem Post erscheint die Kennzeichnung — Gutenberg.

Dadurch kannst du in der Beitragsübersicht immer sehen, welche Posts schon auf den neuen Editor umgestellt sind und welche nicht.

Warnung: Gutenberg hat immer noch einige Bugs und manche Plugins und Themes sind noch nicht mit dem neuen Editor kompatibel. Ich empfehle deshalb, vorsichtshalber den Editor nur auf einer Test-Seite zu installieren. Alternativ kannst du Gutenberg auch online ausprobieren.

3. Allgemeine Post-Einstellungen

Allgemeine Post-Einstellungen, wie z. B. Veröffentlichungsdatum, Beitragsformat, Kategorien oder Schlagwörter findest du (wie im klassischen Editor) in der rechten Sidebar.

Diese öffnest du durch Klick auf das Zahnrad () oben rechts in der Top-Bar:

Post-Einstellungen bei Gutenberg

Hinweis: Da viele Entwickler ihre Plugins oder Themes noch nicht an Gutenberg angepasst haben, kann es sein, dass manche Post-Einstellungen noch nicht angezeigt werden.

3.1 Permalink ändern

In Gutenberg ist der Permalink eines Posts standardmäßig ausgeblendet.

Wenn du auf den Beitragstitel klickst, wird er angezeigt und kann durch Klick auf den grauen Button daneben bearbeitet werden:

Permalink in Gutenberg anzeigen und ändern

3.2 Anzahl der Wörter anzeigen

Im alten Editor wurde die Wörteranzahl immer am Ende des Textfeldes angezeigt.

Bei Gutenberg kannst du dir diese anzeigen lassen, wenn du oben links in der Top-Bar auf das Info-Symbol () klickst.

Zusätzlich wird die Anzahl der Überschriften, Absätze und Blöcke anzeigt sowie die Gliederung deines Dokuments:

Anzahl der Wörter in Gutenberg anzeigen

 

4. Blöcke nutzen

Jetzt geht's ans Eingemachte. Nämlich an das, was Gutenberg ausmacht:

Blöcke.

So fügst du sie hinzu, verschiebst, duplizierst und gestaltest sie:

4.1 Einen Block hinzufügen

Einen neuen Block kann auf verschiedene Arten hinzufügen, z. B.

a) Durch Klicken auf das Plus-Zeichen () oben links in der Top-Bar:

Gutenberg-Block hinzufügen durch Pluszeichen in der Top-Bar

b) Durch Drücken der Enter-Taste:

Gutenberg-Block hinzufügen durch Entertaste

Durch anschließendes Klicken auf das Plus-Zeichen (), das links neben dem neuen Block erscheint, oder durch Eingabe eines Slashs (/) kannst du die Blockart auswählen.

c) Durch durch Klicken auf das Plus-Zeichen () am oberen Rand eines Blocks:

Gutenberg-Block hinzufügen durch Pluszeichen auf dem Rahmen

4.2 Wiederverwendbare Blöcke

Du kannst einen Block aus demselben oder einem anderen Post wiederverwenden.

Das machst du durch Klicken auf die Block-Optionen ().

Block zu wiederverwendbaren Blöcken hinzufügen

Den gespeicherten Block ganz unten in der Blockauswahl-Liste unter Wiederverwendbar ():

Wiederverwendbare Blöcke auswählen

Einen Block aus den Wiederverwendbaren Blöcken zu löschen ist in den Block-Optionen () möglich.

Dort klickst du auf Entferne von Wiederverwendbaren Blöcken ().

Wiederverwendbaren Block löschen

4.3 Block duplizieren

Um dir Arbeit beim Erstellen von ähnlichen Blöcken zu ersparen, kannst du Blöcke duplizieren.

Dies ist durch Klicken auf die Block-Optionen () möglich oder durch den Shortcode Umschalt + ⌘ bzw. STRG + D:

Block duplizieren

4.4 Einen Block verschieben

Leider ist es nicht möglich Blöcke einfach per Drag & Drop an eine andere Stelle zu ziehen.

Das Verschieben eines Blocks nach oben oder unten ist nur durch zwei Pfeile an der linken Seite möglich:

Block verschieben

4.5 Styling von Blöcken verändern

Je nach Block stehen dir verschiedene Styling-Einstellungen zur Verfügung. Diese werden dir in der rechten Sidebar angezeigt, wenn du auf einen Block klickst:

Block-Styling

Beim Textblock kannst du z. B. zusätzlich noch die Text- und Hintergrundfarbe ändern:

Farbeinstellungen beim Textblock

Bei Überschriften die Textausrichtung und die Überschriftenebene (H1, H2, H3 etc.):

Überschrift-Einstellungen

Bei allen Blöcken kannst du unter Erweiterte Einstellungen auch eine zusätzliche CSS-Klasse festlegen, was ich persönlich sehr praktisch finde:

Zusätzliche CSS-Klasse für Blöcke

5. Welche Blöcke gibt es?

Es gibt schon eine große Auswahl an Standardblöcken für Gutenberg.

Mit der Zeit werden es noch mehr werden, denn Plugin- und Theme-Entwickler können selbst Blöcke zur Auswahl hinzufügen.

Diese Blöcke gibt es aktuell:

5.1 Allgemeine Blöcke

BlocknameSymbolBeschreibung
AbsatzFügt einen neuen Absatz ein. Standard-Block, der durch Drücken der Enter-Taste eingefügt wird.
AudioEinfügen einer Audio-Datei durch Drag & Drop, Auswahl in der Mediathek oder per Eingabe einer URL.
BildEinfügen eines Bildes durch Drag & Drop, Hochladen oder aus der Mediathek.
DateiEinfügen einer beliebigen Datei durch Drag & Drop, Hochladen oder aus der Mediathek.
GalerieEinfügen einer Bildergalerie mit 2 bis 8 Spalten.
ListeEinfügen einer nummerierten oder nicht nummerierten Liste.
TitelbildEinfügen eines Bildes, das über die gesamte Breite geht. Wahlweise fixiert und mit Bildtitel. Deckkraft änderbar.
ÜberschriftEinfügen von H1-, H2-, H3-, H4-, H5- oder H6-Überschrift. Ausrichtung anpassbar.
UntertitelBlock mit grauer und kursiver Schrift (z. B. für Bild- oder Videounterschriften geeignet).
VideoEinfügen eines Videos durch Drag & Drop, Auswahl in der Mediathek oder per Eingabe einer URL.
ZitatEinfügen eines Zitats inkl. Quelle (mit dickem schwarzem Strich an der linken Seite).

5.2 Formatierung

BlocknameSymbolBeschreibung
ClassicLässt dich den klassischen Editor innerhalb von Gutenberg nutzen.
CodeBlock zur Darstellung (nicht Ausführung!) von Code
Eigenes HTMLErlaubt es dir, eigenes HTML einzufügen, das du in einer Vorschau ansehen kannst.
Pull-QuoteGroßes, auffälliges Zitat, das mit Trennstrichen abgegrenzt ist
TabelleZum Einfügen einer Tabelle (standardmäßig 2 x 2). Du kannst beliebig viele Zeilen und Spalten per Mausklick hinzuzufügen oder löschen.
VersLeicht eingerückter Block für lyrische Texte.
VorformatiertBlock, der Text genau anzeigt wird, wie du ihn eintippst (Absätze bleiben erhalten). Styling wird durch dein Theme bestimmt.

5.3 Layout-Elemente

BlocknameSymbolBeschreibung
AbstandshalterEinfügen von Abstand zwischen zwei Blöcken. Höhe in Pixel ist einstellbar.
ButtonFügt einen Button ein. Hintergrund- und Textfarbe anpassbar.
MehrDient dazu den Artikel an dieser Stelle abzutrennen, sodass dieser z. B. in Kategorien oder auf der Startseite nur bis dort angezeigt wird.
SeitenumbruchDadurch kannst du deinen Blogartikel auf mehrere Seiten aufteilen.
Spalten (Beta)Fügt 2 bis 6 Spalten ein, durch die man Inhalte nebeneinander anzeigen lassen kann. In jede kann man beliebig viele andere Blöcke einfügen.
TrennzeichenFügt einen Trennstrich ein.

5.4 Widgets

BlocknameSymbolBeschreibung
ArchiveZeigt ein nach Datum sortiertes Post-Archiv an. Wahlweise mit der Beitragsanzahl und als Dropdown-Menü.
KategorienZeigt deine Kategorien an. Wahlweise als Dropdown-Menü, mit der Beitragsanzahl und mit Hierarchie.
Neueste BeiträgeZeigt deine neusten Beiträge an. Reihenfolge, Kategorie und Anzahl der Elemente wählbar. Wahlweise auch mit Beitragsdatum.
Neuste KommentareZeigt die neuesten Kommentare an. Wahlweise mit Avatar, Datum und Textauszug. Anzahl der Kommentare ist ebenfalls wählbar (von 1 bis 100).
ShortcodeFügt einen Shortcode ein.

5.5 Embeds

Wie auch im klassischen Editor, lassen sich auch mit Gutenberg Embeds (zu Deutsch eingebettete Inhalte) einfügen, wie z. B. YouTube-Videos, Facebook-Posts oder Songs von Spotify.

Eine komplette Liste an verfügbaren Embed-Blöcken, findest du im Gutenberg Codex.

5.6 Inline-Elemente

Hierbei handelt es sich um Elemente, die innerhalb eines Blocks hinzugefügt werden können:

BlocknameSymbolBeschreibung
Inline-BildFügt ein Bild ein.

6. Vom visuellen Editor auf Text-Editor umstellen

Wie beim klassischen Editor ist es auch in Gutenberg möglich vom visuellen Editor zum Text-Editor zu wechseln, um den Code deines Posts zu sehen.

Das kannst du durch Klick auf die drei senkrechten Punkte () ganz rechts in der Top-Bar:

Wechsel vom visuellen Editor zum Code-Editor

Blöcke werden dabei in dieser Form dargestellt (hier ist ein Absatz-Block zu sehen):

<!-- wp:paragraph -->
<p>Das hier ist der Inhalt.</p>
<!-- /wp:paragraph -->

Sind Styling-Optionen bei einem Block ausgewählt (im Beispiel ist der Text rechtsbündig), ist dies ebenfalls innerhalb der Block-Tags zu finden:

<!-- wp:paragraph {"align":"right"} -->
<p style="text-align:right">Rechtsbündiger Inhalt.</p>
<!-- /wp:paragraph -->
Hinweis: Im Gegensatz zum Text-Modus beim klassischen Editor werden <p>– und </br>-Tags im Code-Editor von Gutenberg angezeigt.

7. Beiträge vom klassischen Editor zu Gutenberg migrieren

Vielleicht hast du dich schon gefragt:

Und wie ist das mit meinen alten Beiträgen? Werden die mit Gutenberg jetzt anders angezeigt? Muss ich jetzt alle Beitrag händisch anpassen?

Keine Panik!

Auch mit aktiviertem Gutenberg Plugin werden deine alten Beiträge werden so angezeigt wie vorher. Und du musst erst einmal gar nichts machen.

Für eine reibungslose Migration hat Gutenberg den Block Classic integriert, der dich den klassischen Editor innerhalb von Gutenberg weiter nutzen lässt.

Wenn du einen alten Beitrag mit Gutenberg bearbeitest, wird der gesamte Inhalt im Classic-Block anzeigt. Dort kannst du ihn ganz normal bearbeiten:

Gutenberg Classic Block

Wenn du dich dann mit Gutenberg wohlfühlst, kannst du den Classic-Block in den Block-Optionen () einfach in normale Blöcke umwandeln ():

Classic-Block in Blöcke umwandeln

8. Gutenberg & DSGVO

Laut meinen Recherchen werden durch den neuen Gutenberg-Editor keine personenbezogenen Daten von Website-Besuchern verarbeitet.

Er speichert weder Informationen von Besuchern in der Datenbank noch werden externe Scripte geladen.

Aufpassen musst du allerdings (wie vorher) mit Embeds, denn über eingebundene YouTube-Videos, Audio-Dateien, Slides oder Social-Media-Posts werden möglicherweise personenbezogene Daten an Drittanbieter übertragen.

Wenn du ein Plugin installiert hast, das Zwei-Klick-Lösungen für Embeds anbietet, solltest du überprüfen, ob dieses mit dem Gutenberg-Editor kompatibel ist.

Ich habe bereits YouTube Lyte und Borlabs Cookie mit Gutenberg getestet und beide haben bei mir einwandfrei funktioniert.

Im Backend wird die Schriftart Noto Serif über Google Fonts geladen, was jedoch nur für registrierte Autoren oder Redakteure von Relevanz ist:

Gutenberg-Editor lädt Google Fonts im Backend

9. Ladezeit

Eine meiner Befürchtungen bei Gutenberg war, dass sich durch zusätzliche CSS- oder Javascript-Dateien die Ladezeit verschlechtert.

Dies hat sich aber nicht bestätigt.

Durch Gutenberg wird eine kleine CSS-Datei mehr geladen, die gerade einmal 3,4 KB groß ist:

CSS-Datei, die von Gutenberg geladen wird

Diese wirkt sich nur minimal auf die Ladezeit aus.

Hier ein WordPress-Beitrag mit aktiviertem Gutenberg-Plugin (ohne Caching und nicht minified):

Ladezeit mit klassischem Editor

Hier derselbe WordPress-Beitrag mit klassischem Editor (ohne Caching und nicht minified):

Ladezeit mit Gutenberg

10. So sch**ßst du auf Gutenberg!

Du findest Gutenberg abscheulich und hast auch (noch) keine Lust darauf, dich damit zu befassen?

Dann hast du zwei Möglichkeiten:

Entweder du schenkst dir das kommende Update auf WordPress 5.0. Das ist allerdings nicht empfehlenswert. Denn dadurch bekommst du keine neuen Features mehr und Sicherheitslücken werden möglicherweise nicht behoben.

Oder du installierst den Classic Editor:

Classic Editor
Classic Editor
Entwickler:
Preis: Kostenlos

Das Plugin bietet dabei zwei Modi (zu finden bei WordPress unter Einstellungen > Schreiben).

Modi des Classic Editors

Mit der Einstellung Den Editor Gutenberg mit dem Klassischen Editor ersetzen kannst du den klassischen Editor einfach weiter nutzen. So als ob es Gutenberg nie gegeben hätte.

Dann werden alle Spuren des Editors verborgen. Einschließlich des Dashboard-Widgets, das Nutzer auffordert, Gutenberg auszuprobieren.

Mit dem zweiten Modus kannst du Gutenberg als Standard-Editor belassen.

Dann fügt das Plugin lediglich in Admin-Menü, Werkzeugleiste und Bearbeiten-Fenster Links ein, mit denen du für einen einzelnen Beitrag auf den klassischen Editor zurück wechseln kannst.

11. Gutenberg-Shortcuts

Gutenberg bringt einige neue Shortcuts mit, die das Arbeiten mit dem Editor erleichtern. Manche Shortcodes, die man aus dem klassischen Editor kennt, funktionieren auch weiterhin:

11.1 Global

MacWindowsFunktion
STRG + Alt + HShift + Alt + HÜbersicht über Tastenkombinationen anzeigen
⌘ + SSTRG + S
Änderungen speichern
⌘ + ZSTRG + Z
Aktion rückgängig machen
⌘ + Shift + ZSTRG + Shift + Z
Aktion wiederherstellen
⌘ + Shift + ,STRG + Shift + ,
Einstellungen (Sidebar) schließen
STRG + ,STRG + ,
Zum nächsten Teil des Editors springen
STRG + Shift + ,STRG + Shift + ,Zum vorherigen Teil des Editors springen
Shift + Alt + NShift + Alt + N
Zum nächsten Teil des Editors springen
Shift + Alt + PShift + Alt + P
Zum vorherigen Teil des Editors springen
+ Shift + Alt + MSTRG + Shift + Alt + M
Vom Visuellen Editor zum Code-Editor wechseln und umgekehrt.

11.2 Auswahl

MacWindowsFunktion
⌘ + ASTRG + ADen gesamten Text innerhalb eines Blocks auswählen. Durch zweite Eingabe wird das gesamte Dokument ausgewählt.
EscEscAuswahl löschen

11.3 Blöcke

MacWindowsFunktion
EnterEnterDadurch wird ein neuer Block erstellt. Funktioniert gut in Kombination mit Slash.
/ + Suchbegriff/ + SuchbegriffWenn du einen Slash in einen neuen Block eingibst, kannst du per Schnelleingabe die Blockart auswählen.
⌘ + Shift + DSTRG + Shift + DAusgewählten Block duplizieren
⌘ + Alt + RücktasteSTRG + Alt + RücktasteAusgewählten Block löschen
⌘ + Alt + TSTRG + Alt + TBlock über ausgewähltem Block einfügen
⌘ + Alt + Y
STRG + Alt + YBlock unter ausgewähltem Block einfügen

11.4 Text

MacWindowsFunktion
+ BSTRG + B Text fett markieren.
+ USTRG + U Text unterstreichen.
+ ISTRG + I Text kursiv machen.
+ KSTRG + KWandelt den Text in einen Link um.
STRG + Alt + SSTRG + Alt + SEntfernt einen Link.
STRG + Alt + DSTRG + Alt + DText durchstreichen.
STRG + Alt + XSTRG + Alt + XZeigt Text als Monospace Schrift.

12. Kompatiblität

Einige Plugins und Themes sind (wie zu erwarten) noch nicht kompatibel zu Gutenberg.

Das ist meist bei Plugins und Themes der Fall, die den WordPress-Editor entweder um einen Button oder um eine Metabox ergänzen.

Das äußert sich darin, dass diese Buttons bzw. Metaboxen nicht angezeigt werden oder nicht richtig funktionieren.

Bei folgenden Plugins kann es zum Beispiel zu Fehlern kommen:

  • All in One SEO Pack
  • Yoast SEO (wurde mit Version 8.0.0 behoben)
  • YouTube Embed Plus
  • WooCommerce
  • Jetpack
  • Social Warfare

Eine umfangreiche Liste mit kompatiblen und inkompatiblen Plugins hat Daniel Hubacher zusammengestellt (mittlerweile nur noch als Archiv herunterladbar).

Wie man ein Plugin auf Kompatibilität bzw. Inkompatibilität testen kann beschreibt er auf GitHub.

12.1 Gutenberg vs. andere Page-Builder

Da Gutenberg selbst ein Page-Builder ist, stellt sich für dich vielleicht die Frage:

Was ist eigentlich mit bestehenden Page-Buildern, wie z. B. Elementor, Visual Composer oder Beaver Builder? Oder mit Themes wie Avada und Divi?

Viele Entwickler sind glücklicherweise schon auf die kommende WordPress-Version 5.0 vorbereitet. Oder arbeiten bereits daran, ihre Page-Builder mit Gutenberg kompatibel zu machen:

  • Theme Fusion beobachtet laut eigenen Angaben die Entwicklung von Gutenberg genau und wird Nutzer darüber informieren, falls es etwas zu beachten gibt.
  • Elementor soll vollkommen kompatibel mit Gutenberg werden. Es soll möglich sein, Posts in Gutenberg zu schreiben und anschließend mit Elementor zu designen.
  • Mit Visual Composer kann man laut Dokumentation Gutenberg Blöcke innerhalb des eigenen Editors nutzen oder wahlweise Gutenberg in den Plugin-Optionen komplett deaktivieren.
  • Divi bietet seit Ende Juli die Möglichkeit zwischen dem eigenen Editor und Gutenberg zu wechseln.
  • Der Beaver Builder bietet seit Version 2.1 die Möglichkeit zwischen dem eigenen Editor und Gutenberg zu wechseln
  • Den Page-Builder von SiteOrigin kann man laut diesem Hilfeartikel innerhalb des Gutenberg Editors nutzen

13. Fazit

Zugegeben: Anfangs hat mir Gutenberg gar nicht gefallen.

Nach längerem Ausprobieren (und nach diversen Verbesserungen im Laufe der Zeit durch das Entwickler-Team) fällt mein Urteil über Gutenberg nicht mehr ganz so verheerend aus wie am Anfang.

Man gewöhnt sich recht schnell an den neuen Workflow und für WordPress-Anfänger ist Gutenberg mit Sicherheit ein Gewinn.

Aber:

Das Schreiben einfacher Blogposts geht mit dem klassischen Editor schneller. Diverse Bugs und unausgereifte Funktionen nerven auch noch. Und mobil mit Gutenberg zu arbeiten ist ein Krampf.

Aber die generelle Richtung, die WordPress mit Gutenberg einschlägt, ist meiner Meinung nach die richtige. Und ich bin gespannt, was aus Gutenberg noch in den nächsten Monaten wird.

Was du jetzt tun solltest?

Gutenberg ausprobieren. Und zwar schleunigst!

Du wirst ihn vielleicht nicht von Anfang an mögen und ihn verteufeln (so wie ich). Aber du wirst dich daran gewöhnen. Und ihn vielleicht sogar lieben lernen.

Und, wenn du ihn schon ausprobiert hast:

Schreib mir einen Kommentar und erzähl mir, was du vom neuen Editor hältst! Top oder doch eher Flop?

13.1 Vorteile von Gutenberg

  • Übersichtlichere Schreibumgebung mit weniger Ablenkungen
  • Beeinflusst die Ladezeit nicht negativ
  • Man kann die Gliederung des Dokuments sehen sowie weitere Statistiken über Anzahl der Absätze, Überschriften und Blöcke
  • Einfügen von Widgets in Posts ohne Zusatzplugin
  • Erstellung komplexerer Layouts ist für Anfänger einfacher, wie z. B. das Einfügen von Tabellen oder Spalten
  • Theme- und Plugin-Entwickler können eigene Blöcke erstellen
  • Wiederverwendbare Blöcke ersparen die Erstellung von Shortcodes

13.2 Nachteile von Gutenberg

  • Das Schreiben einfacher Blogposts ist mit Gutenberg nicht so angenehm wie mit dem klassischen Editor
  • Man muss sich an die neue Benutzeroberfläche gewöhnen und den eigenen Workflow anpassen
  • Noch Inkompatibilitäten mit manchen Themes und Plugins
  • Zum Teil noch Bugs, manche Funktionen sind noch nicht ausgereift
  • Spalten-Blöcke sind noch nicht ausgereift (Bedienung ist hakelig und Spalten sind noch nicht responsive)
  • Bedienung auf dem Smartphone oder Tablet noch nicht ideal
  • Manche Shortcodes funktionieren nicht mehr (wie z. B. ## für eine H2-Überschrift)

Du meinst es mit dem Bloggen ernst?

Dann abonniere unseren Newsletter, um exklusive Tipps, Bonus-Content und Angebote rund um’s Bloggen und Online-Business zu erhalten. Und keinen Blogartikel mehr zu verpassen.

Die Einwilligung umfasst unsere Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß unserer Datenschutzerklärung. Wir versenden unseren Newsletter ca. 2 bis 5 Mal im Monat. Wir spammen dich nicht voll, großes Indianer-Ehrenwort!

22 Gedanken zu “Der ultimative Guide zum Gutenberg WordPress-Editor

  1. Hi Finn,
    ich habe gerade den Gutenberg-Editor nach einem Monat Schreibpause genutzt. Und viel Zeit mit Hyperlink nebst „title“ einfügen verloren.

    Wenn der Editor was taugen soll, dann muß er auch das Befüllen des title-Attributs liefern, ohne in den Text-Modus wechseln zu müssen. Sonst halte ich ihn für schrottig – positiv formuliert: stark entwicklungsbedürftig. Das Vereinfachen via Blöcken ist mir als einfacher, aber Effizientz-bewußtem Nutzer schlichtweg zuviel Magerkost.

    Es heißt unter in der Gutenberg-Werbung im WordPress-Backend: „Code is Poetry“. Damit das für Gutenberg gilt, muß wohl noch ein sehr langer Weg gegangen werden.

    • Hi Bernhard,

      ja, es gibt auch noch einiges, was mir an Gutenberg sauer aufstößt.

      Die Entwicklung von Gutenberg geht jedoch rasant voran. Bis zum Erscheinen von WordPress 5.0 wird sich da bestimmt noch einiges tun.

      LG

      Finn

  2. Moin Finn,
    wie immer ein schön ausführlicher Artikel. Beim Blogumzug habe ich mich dann auch gleich mal mit Gutenberg beschäftigt und nach anfänglicher Skepsis bin ich mittlerweile echt zufrieden damit.
    Man muss sich ein paar neue Routinen angewöhnen, aber dann läuft das Schreiben wieder schön flüssig.

    Was mir Google bisher allerdings nicht sagen konnte, aber vielleicht weißt du ja was: Welche CSS Befehle sind bei Bildern möglich? Also für das Feld „Zusätzliche CSS Klasse“.
    Denn theoretisch müsste ich die Bilder für Pinterest damit ja verstecken können… praktisch hat bisher aber nichts funktioniert, was ich testete.

    LG Lexa

    • Das ist auch meine Erfahrung: Erst ist Gutenberg ungewohnt, mit der Zeit wird der Workflow flüssiger 🙂

      Du kannst in das Feld nur Klassen einfügen, keine Styles. Die Klassen musst du an anderer Stelle noch einmal definieren, z. B. mit dem Custom CSS über den Customizer.

      Für dein Pinterest-Bild könntest du die Klasse „pinterest-bild“ für den Block angeben (ohne Anführungszeichen). Und sie dann im Custom CSS wie folgt definieren:

      .pinterest-bild {
      display: none;
      }

      LG

      Finn

  3. Hi, bin ein ein totaler WP Noob und werkel seit 2 Tagen an meinem Blog. 0 Programmierkenntnisse bring ich auch noch mit. Ich hab den Gutenberg direkt installiert und denke, wenn er ausgereift ist, dann taugt er schon. Aber jetzt vermisse ich so einfache Dinge wie: Möglichkeit einen Rahmen um die Blöcke anzuschalten, das würde dem ganzen mehr Übersichtlichkeit geben. Schriftart ändern. Blöcke verschieben via Drag & Drop. Intuitiv empfinde ich ihn noch nicht, aber das mag evtl. mit der Übung kommen. VG Alisha

    • Momentan ist es nur möglich Sachen wie Rahmen oder Schriftart über CSS zu regeln. Aber vielleicht kommt das ja noch 😉

      Und ja es ist in der Tat schade, dass Gutenberg kein Drag & Drop bietet. Empfinde ich auch als Manko.

  4. Great work here, Finn! I would love to hear more about where you’re seeing incompatibility with Social Warfare. Our team is already digging into a few issues that other users have brought to our attention, so we’d love to get your specifics as well. I’ve tried on several of my own test installs and Social Warfare has worked perfectly. The only thing I’ve encountered is that you have to use a Classic Editor block to get the Click-to-tweet and shortcode generator functions.

    • Hi Dustin,

      as far as I can tell only the two buttons „Social Warefare Buttons“ and „Click to Tweet by Social Warfare“ are missing from the editor.

      The share buttons themselves seem to be displayed correctly.

      So long,

      Finn

  5. Also ich freue mich riesig über die Änderung! Ehrlich gesagt verstehe ich die Aufregung rund um das Thema ‚Gutenberg‘ nicht wirklich. Der Editor bietet viele nützliche Funktionen und ist meines Erachtens zeitgemäß. Für leidenschaftliche Publisher und Text-Junkies genau das Richtige!

    • Ich habe mich zuerst auch aufgeregt. Aber dann habe ich ihn ausprobiert und ein großer Teil der Aufregung hat sich bei mir gelegt 😉

  6. Als leidenschaftliche und versierte Divi-Nutzerin – für mich selbst und auch für die meisten Kunden-Websites – ruft alles, was ich bisher über Gutenberg lese, in mir nur ein müdes „So what?“ hervor… Ich finde das Prinzip von Gutenberg zwar theoretisch gut, habe das alles aber ja mit Divi längst. (Wobei für Anfänger sicher das bessere WYSIWYG angenehmer ist.) Ich will bei meinem Divi bleiben, denn warum sollte ich mir schon wieder eine zeitfressende Umgewöhnung diktieren lassen?

    • Hi Uschi,

      wenn man bereits einen Page-Builder nutzt, dann ist Gutenberg in der Tat überflüssig. Zumal Divi Gutenberg schon vieles voraus hat.

      LG

      Finn

  7. Ich hätt Gutenberg nicht gebraucht (in der Politik nicht und in WordPress nicht). Ich hatte ihn kurz zur Probe installiert, ich hab das Handling auch verstanden – hab ja nicht seit WP das erste Mal mit Editoren verschiedenster Art zu tun. Aber ich finds komplett überflüssig. Mir wird keine Tabellenfunktion angeboten, den Sinn der Blöcke versteh ich sowieso gleich gar nicht und fühl mich da auch in meinem Schreibfluss *block*-iert. Ich fänds cool, wenns optional bliebe, aber warum müssen die mir diese neue Umgebung förmlich aufzwingen? Ich kann gegenüber dem bisherigen Editor keine Verbesserungen oder Vorteile erkennen… Leider werd ich nicht drum herum kommen, denn ich hab eh schon so viele Plugins zu laufen, dass ich mir ein zusätzliches für den alten Editor nur wahrlich ungern installieren würde. (Müsste eh längst mal abspecken, da wäre der Classic Editor ja eher kontraproduktiv.)
    Meine Meinung zu Gutenberg und Stimmung dahingehend ist eher so meh…. -_-
    Trotzdem danke für den ausführlichen Check und Guide. Wird mir sicher nützlich sein. Julia

    • Ich kann dich gut verstehen. Ich arbeite auch noch lieber mit dem klassischen Editor.

      Aber ich bin dennoch sehr gespannt, was noch daraus wird.

      Wenn die bestehenden Bugs beseitigt sind, Entwickler ihre Plugins und Themes angepasst haben etc. kann ich mir gut vorstellen, dass Gutenberg ein Gewinn für WordPress wird. 😉

      LG

      Finn

  8. hallo Finn, es stellt sich mir die Frage, ob ich weiter den Avia-Editor nutzen kann – ich muss mich ja fuer den klassischen Editor oder Gutenberg entscheiden…. ist dann Avia weg? Ich bin da leider Laie und damit etwas ueberfordert…

    • Hi Hilde,

      soweit ich die Angaben im Support-Forum von Enfold verstanden habe, ersetzt Avia dann auch Gutenberg (wie den jetzigen Editor).

      Du musst also gar nichts unternehmen und alles bleibt so wie es ist 😉

      LG

      Finn

  9. Hm,
    sehe ich das richtig, dass jetzt der Text in Blöcke unterteilt wird?
    Ich schreibe meine Texte in Word vor und kopiere sie dann einfach in WordPress inkl. der Formatierungen.
    Das geht dann nicht mehr, oder?

    Viele Grüße
    Heike

    • Nein, du kannst das nach wie vor machen.

      Dafür kopierst du einfach deine Inhalte in den Classic-Block (dadurch kannst du den klassischen Editor innerhalb von Gutenberg weiter nutzen). Siehe auch Punkt 7 im Guide.

      Erst in Word zu schreiben und dann in WordPress zu kopieren ist allerdings nicht sonderlich empfehlenswert.

      Denn dadurch werden deine Beiträge durch die CSS-Styles und -Klassen von Word zugemüllt. Sauberer ist es, direkt in WordPress zu schreiben.

      LG

      Finn

  10. Ich nutze ja den erweiterten Layout-Editor Avia (Theme Enfold) und bin jetzt echt besorgt, dass dieser mit Gutenberg nicht mehr nutzbar ist – weil er meines Erachtens einfach spitze ist!

Schreibe einen Kommentar

Du willst einen Expertenblog aufbauen, der dir treue Leser und Kunden bringt?

Dann abonniere den Blogmojo-Newsletter, um unsere exklusiven Tipps, Bonus-Content und Angebote rund um’s Bloggen und Online-Business zu erhalten.

Die Einwilligung umfasst unsere Hinweise zum Widerruf, Versanddienstleister und Statistik entsprechend unserer Datenschutzerklärung. Wir verschicken unseren Newsletter ca. 2 bis 5 mal im Monat. Wir spammen dich nicht voll, großes Indianer-Ehrenwort!

Nee, geh weg! Ich hab schon genug Leser und Kunden.