Gutenberg – der neue WordPress Editor

Mit WordPress 5.0 wird wird gleichzeitig auch ein neuer Editor namens Gutenberg eingeführt. Neben einer neuen Optik bringt Gutenberg auch einige neue Features mit. Welche das sind und wie Du sie nutzt, findest Du in meiner Kurzanleitung,

Was ist Gutenberg?

Der Gutenberg Editor wird mit Einführung von WordPress 5.0 den bisherigen visuellen Editor ersetzen. Also den Bereich, in dem Du Deine Beiträge oder Seiten schreibst. Für den Benutzer soll dadurch das Erstellen von Inhalten leichter und intuitiver werden. Dabei nutzt der neue Editor sogenannten Blocks (Blöcke).

“Der Editor wird eine neue Erfahrung des Erstellens und Kreieren von Seiten und Beiträgen schaffen, was das Schreiben von reichhaltigen Beiträgen mühelos macht, und er hat „Blöcke“, um es einfach zu machen, was heute mit Shortcodes, individuellem HTML oder sonstigem eingebundenen „HokusPokus“ Zeugs zu tun hat.”

Matt Mullenweg

Wann die neue WordPress-Version erscheint steht aktuell noch nicht fest. Vermutet wird eine Veröffentlichung Ende 2018. Oder sobald Gutenberg problemlos einsetzbar ist.

Gutenberg Kurzanleitung

Bevor Gutenberg ein fester Bestandteil von WordPress wird, solltest Du Dich jetzt schon damit beschäftigen. Warum?
So kannst Du in Ruhe den neuen Editor testen und Dich mit ihm vertraut machen. Auch kannst Du mögliche Probleme mit Deinem Theme oder Deinen Plugins erkennen.

Damit Dir der Einstieg leichter fällt, zeige ich Dir in meiner Kurzanleitung ein paar Beispiele und die wichtigsten Features. Diese werden sich mit Sicherheit noch ändern bzw. ausgebaut werden. Denn aktuell wird Gutenberg immer noch weiterentwickelt.

Installation

Seit WordPress 4.9.8 erhalten Nutzer direkt im Dashboard Infos zu Gutenberg. Wer möchte, kann mit einem Klick den neuen Editor installieren und testen.

gutenberg testen
Im Dashboard findest Du Infos zu Gutenberg und kannst ihn auch testen.

Falls Du eine ältere WordPress-Version nutzt, kannst Du das Gutenberg-Plugin installieren. Wenn Du nur mal schnell reinschnuppern möchtest, kannst Du den neuen Editor auch online ausprobieren: de.wordpress.org/gutenberg.

Da der neue Editor noch nicht so ganz fehlerfrei läuft, solltest Du Gutenberg auf jeden Fall auf einer Staging-Seite nutzen.

Die neue Oberfläche

Sobald Du den Gutenberg-Editor aktiviert hast, wird Dir sofort das neue, klare Design auffallen.

Gutenberg Editor Oberfläche
Die neue Oberfläche des WordPress-Editors

Mit dem Gutenberg-Editor wird eine komplett neue Optik und Struktur eingeführt. Das Design wirkt viel aufgeräumter und klarer und die Inhalte werden nicht mehr inline, sondern über Blöcke eingefügt.

Hier zum Vergleich der klassische WordPress-Editor

klassischer WordPress Editor

Im klassischen WordPress Editor schreibst Du Deinen Text in einem langen Stück. Alle Elemente wie z.B. Überschriften, Bilder, Links oder Shortcodes fügst Du über die Werkzeugleiste ein.

Die wichtigsten Bedienelemente

Obere Editor-Leiste

gutenberg obere leiste

Ganz oben in der Leiste findest Du folgende Funktionen:

  1. Neue Blocks hinzufügen
  2. Aktion rückgängig machen / wiederholen
  3. Info zur inhaltlichen Struktur (Anzahl Worte, Absätze, Überschriftenstruktur)
  4. Einstellung, ob die rechte Seitenleiste angezeigt werden soll
  5. Yoast SEO klinkt sich bereits in den neuen Editor ein
  6. Weitere Einstellungen wie z.B. Umschalten in den Code-Editor

Seitenleiste

Rechts in der Sidebar kannst Du wie bisher auch alle Einstellungen zum Beitrag vornehmen. Auch können sich hier Plugins, die Gutenberg-Ready sind einklinken. Momentan klappt das schon mit Yoast-SEO.

Neu ist, dass sich die Seitenleiste anpasst. D.h. sobald Du einen Block erstellst, siehst Du in der Sidebar die Optionen für den aktuellen Block-Typ.

Gutenberg Seitenleiste
Seitenleiste mit Optionen für das Dokument bzw. den aktuellen Block.

Gutenberg Blöcke

Die Blocks oder Blöcke sind nichts anderes als Elemente, aus denen ein Beitrag oder eine Seite besteht. Egal ob Text, Bild, Link, Überschrift – jedes dieser einzelnen Elemente ist ein Block.

Der Vorteil:
mit den Blöcken kannst Du Deine Inhalte besser strukturieren. Zudem kann jedes Element als Block individuell angepasst und auch positioniert werden.
Zukünftig wird jeder Absatz automatisch in einen Block umgewandelt. Möchtest Du ein Bild, eine Liste oder ein Zitat einfügen, musst Du hierfür einen Block einfügen.

Nachteil:
Im Vergleich zum alten Editor stören die Blöcke den Schreibfluss. Auch muss man generell mehr rumklicken.

Aktuell sind folgende Blöcke vorhanden:

Allgemeine Blöcke

  • Absatz
  • Bild
  • Überschrift
  • Galerie
  • Liste
  • Zitat
  • Audio
  • Titelbild
  • Datei
  • Untertitel
  • Video

Formatierung

  • Code
  • Classic
  • Eigenes HTML
  • Vorformatiert
  • Pull-Quote
  • Tabelle
  • Vers

Layout-Elemente

  • Button
  • Spalten
  • Mehr
  • Seitenumbruch
  • Trennzeichen
  • Abstandshalter

Widgets

  • Shortcode
  • Archive
  • Kategorien
  • Neue Kommentare
  • Neueste Beiträge

Embeds

  • Facebook
  • Twitter
  • Youtube
  • Pinterest
  • uvm

Meistgenutzt

WordPress erkennt, welche Elemente Du am häufigsten nutzt. Und so findest Du hier Deine Top-Blocks.

Arbeiten mit Gutenberg

Der neue Editor ist auf jeden Fall gewöhnungsbedürftig! Am Anfang wirst Du sicherlich viel Zeit mit dem Ausprobieren der Blöcke verbringen. Die wichtigsten Funktionen zeige ich Dir gleich und stelle Dir ein paar Blöcke genauer vor.

Gutenberg Block hinzufügen

Einen Block kannst Du ganz einfach hinzufügen und auch frei positionieren. Entweder über die Editor-Leiste oben links (1) oder direkt im Editor wie im Screenshot.

Gutenberg Block anlegen

Block Optionen

Gutenberg Block Optionen
Block Optionen

Rechts neben jedem Block kannst Du über die 3 Punkte weitere Optionen aufrufen. So kannst Du den aktuellen Block duplizieren, als HTML bearbeiten oder ihn löschen. Auch kannst Du den aktuellen Block damit als einen wiederverwendbaren Block speichern.
Zusätzlich hast Du bei jedem Block direkt links darüber noch eine kleine Werkzeugleiste. Hier kannst Du z.B. den Text ausrichten, formatieren oder Links einfügen.

Blöcke verschieben

Blöcke verschieben
Die Blöcke kannst Du mit den Pfeilen nach oben oder unten verschieben.

Alle Blöcke kannst Du verschieben. Per Klick oder auch per Drag & Drop.

Permalink

Oops, wo ist denn der Permalink? Dieser wird nicht mehr permanent oben angezeigt. Um ihn zu ändern, musst Du in die Überschrift klicken.

Gutenberg Editor Permalinks

Absatz-Block

Für die meisten WordPress-Nutzer dürfte der Absatz-Block der wichtigste sein. Denn hier schreibst Du Deine Texte.

block formatieren
Jeden Absatz kannst Du individuell stylen.

Jeder Absatz eines Artikels wird automatisch als Block dargestellt. Sobald Du auf ENTER drückst, wird vom Editor ein neuer Absatz-Block erstellt.
In der Sidebar daneben findest Du dann alle Einstellmöglichkeiten.

Hier kannst Du jetzt ganz einfach die Schriftgröße und die Farben anpassen. Neu ist, dass Du nun dem Absatz per Klick eine Hintergrundfarbe zuweisen kannst.
Wer den Block individuell anpassen möchte, kann dafür unter > Erweitert eine zusätzliche CSS-Klasse eintragen. Anschließend kann dann das CSS ins Child-Theme oder den Customizer eingetragen werden.

Wiederverwendbare Blöcke

Eine sehr nützliche Funktion bieten die wiederverwendbaren Blöcke. Wenn Du einen Block formatierst, kannst Du ihn eine als Vorlage speichern und immer wieder verwenden.
Dazu wählst Du den Punkt Zu wiederverwendbaren Blöcken hinzufügen in den Optionen aus und speicherst den Block unter dem gewünschten Namen.

wiederverwendbare Blöcke
Formatierten Block als Vorlage speichern

In meinen Blog-Beiträgen habe ich z.B. einen Hinweis-Text, denn ich sehr oft verwende. Diesen kann ich damit einmal vorformatieren und ihn dann bei jedem Artikel wieder einfügen. Einfach auf Wiederverwendbar > Block-Name klicken.

block erneut nutzen
Wiederverwendbaren Block einsetzen.

Buttons

Über dieses Feature dürften sich viele sehr freuen! Denn bisher musste man Buttons selbst coden oder per Plugin einfügen. Nun geht das ganz einfach und auch das Styling ist sehr komfortabel.

Gutenberg Buttons
Buttons können ohne Shortcode oder Plugin eingefügt werden.

Spalten

Hast Du schon mal versucht in WordPress Dein Layout in Spalten zu unterteilen?! Mit dem Spalten-Block ist das nun kein Problem mehr. Auch wenn die Entwickler hier noch etwas nachbessern müssen.

Gutenberg Spalten
Spalten-Layout dank Gutenberg

Tabellen

Für die Darstellung von Tabellen nutzen die meisten Benutzer spezielle Plugins. Durch die neue Tabellen-Funktion kannst Du in den meisten Fällen nun darauf verzichten.

Gutenberg Tabellen
Auch einfache Tabellen können ohne Plugin eingesetzt werden.

Was passiert mit bestehenden Artikeln und Seiten?

Momentan kannst Du Deine bestehenden Inhalte so belassen wie sie sind. Hier geht nichts verloren!
Wenn Du mit Gutenberg arbeiten möchtest, kannst Du Deine alten Artikel aber auch in Blöcke umwandeln.

Inhalt in Blöcke umwandeln
Bestehende Beiträge können automatisch in Gutenberg-Blöcke umgewandelt werden.

Auf den ersten Blick scheint das problemlos zu funktionieren. Aber natürlich solltest Du Deine Inhalte genau prüfen. Denn falls Du spezielle Plugins nutzt, könnte es zu Problemen kommen. Vor allem bei Plugins, die über die bisherige Werkzeugleiste verfügbar sind.

Bei meinem Test haben einige Plugins nach der Umwandlung in Blöcke nicht mehr funktioniert. Z.B. wurden mit Prism (Code-Highlighter) und ThirstyAffiliates eingefügte Inhalte nicht mehr richtig dargestellt. Da sowohl Gutenberg als auch die meisten Plugins weiterentwickelt werden, sollten diese Probleme aber bald behoben sein.

Bis dahin kannst Du schauen, ob der Classic-Block Dir weiterhilft. Denn damit kannst Du die alte Werkzeugleiste weiterhin nutzen.

Classic Block
Der Classic Block bringt die alte Werkzeugleiste zurück.

WordPress ohne Gutenberg?

Falls Du mit Gutenberg überhaupt nicht klar kommen solltest oder es Probleme mit Deinem Theme gibt, kannst Du den alten Editor weiterhin nutzen.
Diesen kannst Du als Plugin installieren – auch in der neuen WordPress-Version.

Inzwischen gibt es auch schon einige Plugins, die Gutenberg deaktivieren:

  • Disable Gutenberg
    Ersetzt den Gutenberg-Editor durch den Klassik-Editor. Entweder komplett oder nur für bestimmte Beiträge, Seiten, Post-Types oder Nutzer.
  • Gutenberg Manager
    Bietet ebenfalls die Möglichkeit den neuen Editor für bestimmte Bereiche zu deaktivieren.

Eine andere Möglichkeit bietet ClassicPress. Dieses Projekt bietet einen Fork von WordPress 4.9 ohne Gutenberg an.

Fazit:

Gutenberg, in der aktuellen Version, finde ich ganz OK. Aber nicht wirklich revolutionär.
Die Entwicklung führt in die Richtung eines Page Builders, was ja ganz gut ist. Aber momentan kann Gutenberg noch nicht mit echten Page-Buildern wie z.B. Elementor mithalten. Aber das kann ja in Zukunft noch kommen?

Die neuen Funktionen wie z.B. Tabellen, Spalten usw. finde ich prima! Denn hierfür musste man bisher zusätzliche Plugins nutzen oder selbst coden. Auch das neue Editor-Design finde ich gelungen, nur an die Blöcke muss ich mich noch gewöhnen. Momentan blocken die Blöcke bei mir das Bloggen noch…

Update: Inzwischen nutze ich den neuen WordPress Editor auch im Live-Betrieb und komme sehr gut damit zurecht.

Wie hat Dir dieser Beitrag gefallen? Gar nichtNa jaOKGutSehr gut
(27 Stimmen, Ø: 4,78 von 5)

Dieser Beitrag hat 20 Kommentare

  1. User Avatar

    Hallo, vielen Dank für die Erklärungen, die schon einmal transparenter sind als irgendwo anders. Nichtsdestotrotz: auch ich komme mit Gutenberg null zurecht und habe mir den Classic Editor wieder aktiviert. Ich sehe für mich keine Vorteile, da ich ständig mit Klickerei beschäftigt bin und mich in meiner Kreativität eingeschränkt fühle.
    Vorher konnte ich im Text-Modus eine individualisierte Schrift per HTML-Code eingeben – diese Möglichkeit finde ich bei Gutenberg unter HTML nicht. Oder ich habe das noch nicht durchschaut, wie ich die Typo anpassen kann.
    LG Bea

    1. Webtimiser

      Hallo Bea,
      gerne!
      Kann dich sehr gut verstehen – nutze Gutenberg aktuell auch noch nicht. Teste zwar immer wieder auf meiner Staging-Seite, aber mit dem alten Editor geht alles doch flotter.
      LG Sonia

  2. User Avatar

    An diesem Prachtstück von Automattic stören mich mehrere Dinge.

    Wird ernsthaft unterstellt, das ein potentieller Nutzer bei jeder neuen Page diesen flakernden Hinweis im Kästchen mit „hilfreichen Tipps“ und der flüssigen Frage, ob denn noch ein bisschen mehr sein darf, nicht sofort als nervend ansieht. Es ist mir nicht gelungen, in den gutversteckten Einstellungen, durch abklicken des Häckens „Tipps aktivieren“ das Programm davon zu überzeugen, das auch zu befolgen.

    Gleiches bei den Diskussionen. Warum wird das eingeblendet, wenn auf der ganzen Webseite Kommentare abgeschlatet sind?

    Wie schon zu den Klickorgien angemerkt , möchte ich zielorientiert arbeiten, und die Zeit nicht mit Mausschubsen vertrödeln – dafür bezahlt keiner.

    Gibt es irgendwo in den Tiefen eine von mir noch nicht entdeckte Einstellung die epische Länge beim „Hinzufügen“-Knöpfchen zu konfigurieren. Ich würde gern darauf verzichten, dass sich Automattic den Kopf darüber zerbricht, was ich „am meisten nutze“.

    In die gleiche Richtung geht: Lassen sich diese „embeds“ aus der Frühzeit des Systems als Blogging-Programm abschalten? Das ist absolut überflüssig. Darüber hinaus ist jeder/jedem in diesen Landstrichen klar, dass dort die üblichen Verdächtigen der Tracking-Prominenz gelistet sind, was in einem Land mit DSGVO gar nicht geht. Automattic scheint diese ja offensichtlich nicht besonders zu interessieren.

  3. User Avatar

    Gibt es eine einfache Lösung – ohne Plugin – diesen Titel nicht auf der Seite stehen zu haben? Ich will einfach mit einem ganz normalen Block anfangen und diesen Titel irgendwie deaktivieren.

    1. Webtimiser

      Hallo Rainer,
      meinst du den Seitentitel? Wenn dieser nicht angezeigt werden soll, kannst du das bei einigen Themes deaktivieren. Oder du passt das Template im Child-Theme an.
      VG Sonia

  4. User Avatar

    Ich habe den großen Fehler gemacht, WordPress auf die Version 5 zu updaten und mir dabei den unmöglichen neuen Texteditor einzufangen. Das ist der größte Mist, den ich jemals in einem CMS erlebt habe. Leider hilft mir die Plugin-Lösung überhaupt nicht, weil mein Theme-Plugin für kapitalisierte Anfangsbuchstaben damit nicht kompatibel ist. Jetzt kann ich mein Blog per Hand downgraden. Danke für nichts, WordPress! Großer Dreck!

    1. Webtimiser

      Hallo Christian,
      nutze Gutenberg auch immer noch nicht auf meiner Seite, da ich lieber noch etwas Testen möchte. Hast du Disable Gutenberg denn ausprobiert?

      VG Sonia

  5. User Avatar

    Merci vielmals für Deinen einführenden Artikel.
    Das Problem mit dem Weiterlesen-Tag hatte ich auch, konnte ich nur mit dem klassischen Editor lösen.
    Ohne den Tag würde meine Website nämlich ziemlich doof aussehen, das Einfügen des “more”-Tags half nämlich nichts.
    Ob sich das noch ändern wird?

    Schöne Grüße aus den Bergen
    Erich

    1. Webtimiser

      Gerne!
      Bei mir hat der Weiterlesen-Tag problemlos funktioniert, vielleicht liegt’s am Theme?

      VG Sonia

  6. User Avatar

    Hallo, ich bin eine ganz “normale” Bloggerin und habe heute zum ersten Mal versucht (wie gewöhnlich) einen in WordPress 5.0 geschriebenen Beitrag, mit dem neuen Editor zu erstellen. Es war mir nicht möglich, das Format zu übertragen. Ich bin mit den “Blöcken” überhaupt nicht zurecht gekommen. Viele Bearbeitungselemente (z.B. Weiterlesen-Tag) waren einfach weg. Zum Glück gibt es die Möglichkeit den alten Editor zu installieren. Was ich dann auch gleich gemacht habe. Wenn man nicht gerade professioneller Webdesigner ist, dann ist der neue Editor einfach viel zu kompliziert, für einfache Anwender viel zu unverständlich. Sorry.

    1. Webtimiser

      Hallo Christine,
      kann dich sehr gut versehen! Momentan habe ich Gutenberg auch nur auf meiner Staging-Seite aktiviert und bin nicht wirklich begeistert davon. Für das einfache Schreiben von Texten ist mir der Editor zu umständlich und für das Designen von Seiten ist mir Elementor wesentlich lieber.

      LG Sonia

  7. User Avatar

    Schöne Einführung, vielen Dank! Wahrscheinlich erzähle ich dir nichts Neues, aber drag & drop beim Ziehen der Blöcke geht mittlerweile. Es gibt einen Anfasser zwischen den Pfeilchen.
    Herzlichen Gruß,
    Christian

    1. Webtimiser

      Hallo Christian,
      gerne! Und vielen Dank für den Hinweis. Um ehrlich zu sein, habe ich das Thema Gutenberg in letzter Zeit etwas vernachlässigt…
      Viele Grüße
      Sonia

  8. User Avatar

    Ich war am Anfang dabei und habe mich auf den Editor gefreut. Inzwischen möchte ich den gerne wieder loswerden. Da ist nichts was es einfacher macht. Im Gegenteil, alles ist umständlicher. Inline-Bild mit umlaufenden Text ist gar nicht mehr möglich.
    Will man verlinken ist das ein Glück wenn es auf das erste mal gut hinhaut. Ein nofollow war vorher möglich (auch in den ersten Gutenbergversionen, wenn man ein entsprechendes Plugin installiert hatte), jetzt gar nicht mehr.
    Ich bin so weit dass ich wieder aussteige und bin froh dass ich das nur auf einer Seite eingesetzt habe. Ich warte noch ein oder zwei Updates ab, befürchte aber dass das nichts wird mit mehr Komfort.

    1. User Avatar

      Hallo Roland,

      momentan befinden sich viele Gutenberg Block Elemente in der Entwicklung. Bezüglich deiner Problematik “Inline-Bild mit umlaufenden Text ist gar nicht mehr möglich.” haben wir bereits ein Element entwickelt, welches wir in den nächsten Tagen kostenlos releasen werden. Zur Zeit befindet es sich im Testing.

      Um einmal Dir den Beweis zu liefern, wie schnell und umkompliziert sich Projekte in Gutenberg realisieren lassen möchte ich Dir eine unserer Live-Webseiten die in Gutenberg relauncht wurden zeigen, nämlich http://www.karlinder.com

      Für Parallax Hintergründe, Cover Image Block, Containerblock für Hintergrundfarbe haben wir folgendes Gutenberg Contentelment umgesetzt und verwendet:
      – Background Container Block https://wordpress.org/plugins/gosign-background-container/

      Um auf der Startseite die Beiträge in einer Kacheloptik darzustellen haben wir Masonry Post Block (Gutenberg) https://wordpress.org/plugins/gosign-masonry-post-block/ verwendet.

      Falls Dir bestimmte Elemente in Gutenberg fehlen, damit du deine Webseite fertig stellen kannst, dann gerne her mit der Info.

      Beste Grüße aus Hamburg

      1. User Avatar

        Hallo Mansoor,
        an der Möglichkeit für das Inlinebild mit umlaufenden Text bin ich auch schwer interessiert…

  9. User Avatar

    Hallo und vielen Dank für deine Mühe, hat mir echt weiter geholfen. Am Anfang erscheint mir alles etwas holprig, mit schreiben und formatieren. z.B. habe ich mir mal eine Tabelle angelegt, jedoch mit Linienbreite und Hintergrundfarbe etc. ist noch nicht viel los 😉 oder habe ich was verpeilt ? Naja ich werde mich mal einarbeiten.

    Viele Grüße Greg

    1. Webtimiser

      Hallo Greg,
      freut mich!
      So wirklich ausgereift ist Gutenberg aktuell ja noch nicht… aber vielleicht wird’s noch?!

      Viele Grüße
      Sonia

  10. User Avatar

    Hallo 🙂
    Herzlichen Dank für deinen aufschlussreichen Artikel, gefällt mir sehr gut.
    Das mit dem Schreibfluss kann ich nur unterstreichen, weshalb ich meine Texte erst in einem TextEditor vorschreibe – mache ich aber schon immer so – und dann in Gutenberg einfüge.
    Somit hab ich die “Schreibfluss-Blockade” umgangen 🙂
    Viele Grüße,
    Gianna

    1. Webtimiser

      Hallo Gianna,
      lieben Dank, freut mich!
      Werde zukünftig wohl auch einen Editor zum Schreiben nutzen – hast Du einen Tipp?
      Viele Grüße
      Sonia

Schreibe einen Kommentar

Menü schließen