Gutenberg WordPress

Gutenberg WordPress

Wer mit WordPress arbeitet, ist mit Sicherheit bereits mit dem Editor Gutenberg in Berührung gekommen. Am Anfang wurde Gutenberg von uns mit viel Skepsis betrachtet, heute möchten wir ihn nicht mehr missen. Es gibt eine Menge Dinge, die uns sehr gefallen und das Leben erleichtern.

Das Wichtigste

Seit etwas mehr als einem Jahr ist der WordPress Gutenberg Editor online. Im Vorfeld der Einführung gab es viele kritische Stimmen zum neuen Editor, so dass viele den Gutenberg Editor bis heute noch nicht ausprobiert haben und bei dem „classic block“ geblieben sind. In diesem Beitrag geben wir Dir einige Tipps zu den Vorteilen des Editors. Die Vorteile und Möglichkeiten des Editors haben sich binnen eines Jahres signifikant erhöht. Außerdem wird Gutenberg in Zukunft ein zentrales Element von WordPress sein. Daher musst Du Dich mit dem Block Editor beschäftigen.


WordPress Gutenberg und die Blöcke

Seit WordPress Version 5.0 ist der Gutenberg Editor im WordPress core integriert. Der klassische Editor, wie ihn viele noch kennen, ist nicht mehr im WordPress vorhanden. Der Gutenberg-Editor ist ein sogenannter „Blockeditor“. Das heißt, Du erstellst „Blöcke“, mit denen Du dann arbeitest. Es gibt die verschiedensten Blöcke:

  • allgemeine Blöcke,
  • Formatierungs-Blöcke,
  • Layout-Elemente,
  • Widgets,
  • Einbettungen und
  • wiederverwendbare Blöcke.

Die Blöcke haben mehrere Vorteile. Zum einen kannst Du sie in bestimmten Maße ineinander umwandeln, zum anderen kannst Du einzelne Blocks an eine andere Position verschieben.
Ein Block entsteht, wenn Du im Gutenberg-Editor oben links auf das Pluszeichen drückst. Ein Block sieht so aus:

Gutenberg WordPress Block

Schreibe nun Deinen Text in den Block. Wenn Du „Enter“ drückst, entsteht automatisch ein neuer Textblock. Auf diese Weise kannst Du einfach Blöcke einfügen.
Mit der Tastenkombination „shift“ + „Enter“ entsteht ein neuer Absatz innerhalb eines Textblocks. Es wird also kein neuer Textblock erstellt. Probiere das einfach einmal aus.


Gutenberg Blöcke umwandeln

Du kannst Blöcke ineinander umwandeln. Das geht natürlich nur ein einem bestimmten Rahmen. Einen Textblock kannst Du zum Beispiel in eine Überschrift, eine Liste oder ein Zitat umwandeln. Die Umwandlung geht einfach, indem Du im Blockmenü oben links klickst:

Gutenberg WordPress Block

Es öffnet sich ein Menü, in dem Du die möglichen Umwandlungsvarianten siehst:

Wähle das gewünschte Blockformat aus und fertig. Dein Block wandelt sich nun um.
Die Umwandlung der Blöcke hat ein paar Vorteile, die sich erst auf den zweiten Blick offenbaren:

  • Du kannst Deinen Schreibfluss beibehalten.
  • Die Umwandlung geht schnell und ohne Probleme.
  • Teilweise kannst Du die Änderungen auch wieder rückgängig machen.

Probiere die Umwandlung am besten aus und Du wirst sehen, wie einfach und schnell es geht. Wahrscheinlich wirst Du ebenso begeistert sein, wie wir.


Blöcke verschieben

Ein weiterer Vorteil der Blöcke ist, dass Du sie sehr einfach an eine andere Stelle Deines Blogbeitrages oder Deiner Seite bewegen kannst. Um einen Block nach unten zu bewegen, brauchst Du nur auf der linken Seite des Blogmenüs auf den Pfeil zu klicken. Schon wird der Block um einen Schritt bzw. einen Block nach unten bewegt.
Nach oben bewegst Du, indem Du auf den kleinen Pfeil nach oben klickst.


Wiederverwendbare Blöcke

Ein weiteres tolles Feature in Gutenberg sind die wiederverwendbaren Blöcke. Einen wiederverwendbaren Block legst Du einmal an und kannst ihn dann überall auf Deiner Webseite einbauen. So erleichterst Du Dir viel Arbeit bei Formatierungen.
Um einen wiederverwendbaren Block zu erstellen, gehst Du wie folgt vor:

  1. Du erstellst einen ganz normalen Block und editierst ihn so, wie es Dir am besten gefällt.
  2. Du gehst im oberen Blockmenü auf die drei Punkte und klickst „zu wiederverwendbaren Blöcken hinzufügen“. Schon hast Du den Block gespeichert. Zur Verdeutlichung:

Die wiederverwendbaren Blöcke kannst Du auf zwei verschiedene Weisen einsetzen:

Wiederverwendbare Blöcke auf einer Seite

Du setzt den wiederverwendbaren Block in Deine Seite oder Deinen Beitrag ein. Wenn Du das „Drei-Punkte-Menü“ der Blockformatierung anklickst, findest Du den Menüpunkt „in normalen Block umwandeln“. Wenn Du darauf klickst, wird der Block in einen ganz normalen Block umgewandelt. Du kannst nun wie bisher weiterarbeiten.
Der Nutzen ist, dass Du bestimmte Design-Elemente vorbereiten kannst und diese dann schnell einsetzen kannst.

Du kannst Dir die folgenden Pins gerne merken:

Wiederverwendbare Blöcke auf der gesamten Webseite einsetzen

Du kannst wiederverwendbare Blöcke auch auf Deiner gesamten Webseite einsetzen. Dazu setzt Du den wiederverwendbaren Block einfach ein und wandelst ihn NICHT in einen normalen Block um. Du fragst Dich nach dem Sinn dieser Aktion? Ganz einfach. Wenn Du das Design des wiederverwendbaren Block änderst, dann ändert sich der entsprechende Block auf ALLEN Seiten, in den Du ihn eingefügt hast.
Beispielsweise eignen sich Trenner ganz hervorragend für einen wiederverwendbaren Block. Der rote Strich unter diesem Absatz ist ein Trenner, der als wiederverwendbarer Block eingesetzt wurde. Wenn die Farbe von rot auf grün geändert wird, werden ALLE Trenner auf der gesamten Webseite grün.
Probiere es einmal aus, es ist einfacher, als es sich hier liest.


Struktur im Schnellüberblick mit WordPress Gutenberg

Der Gutenberg Editor hat ein paar Features, die wenig Beachtung finden, aber trotzdem sehr nützlich sind. So kannst Du die gesamte Struktur Deiner Seite oder Deines Blogartikels mit nur einem einzigen Klick überprüfen.
Dazu gehst Du im oberen Menü auf den kleinen Kreis mit dem „i“:

Du siehst sofort, wieviele Wörter, Überschriften, Absätze und Blöcke Dein Dokument bereits enthält. Viel wichtiger ist, dass Du sofort die Gliederung des Dokuments erfasst. Du erkennst, ob Du die Überschriftenstruktur richtig hast, oder ob Du hier noch verbessern musst. Die Überschriftenstruktur ist wichtig für die Suchmaschinenoptimierung.

Inhalte kopieren mit WordPress Gutenberg

Du hast bereits Seiten oder Beiträge mit Deinem Design ausgearbeitet und möchtest nun Seiten oder Beiträge erstellen, die das selbe Design haben? Es wäre doch praktisch, wenn Du eine Seite oder einen Beitrag kopieren könntest. Und zwar ohne extra Plugin. Mit Gutenberg geht das! Es ist außerdem noch sehr einfach. Du gehst auf das „Drei-Punkte-Menü“ oben rechts:

Danach öffnet sich ein Menü und Du klickst auf „Kompletten Inhalt kopieren“:

Nun hast Du alle Inhalte in Deinem Zwischenspeicher. Erstelle eine neue Seite oder einen neuen Beitrag und füge den Inhalt ein. Sehr einfach und schnell. Vergiss nicht, die Inhalte zu ändern!


WordPress Gutenberg und Design

Die Blöcke, die direkt im Gutenberg integriert sind, werden sicherlich nicht jeden Designanspruch erfüllen. Für schönere Blöcke gibt es eine Reihe von Anbietern, die Designblöcke anbieten. Die Anzahl der Anbieter ist innerhalb der letzten Monate stetig gewachsen. Es ist nicht leicht, eine richtige Auswahl zu treffen. Du musst bedenken, dass:

  1. Du für jeden Anbieter immer ein Plugin installieren musst,
  2. die schönsten Blöcke fast immer in den zahlungspflichtigen Premium-Abos stecken,
  3. Blöcke, die mit zahlungspflichtigen Abos erstellt wurden, unter Umständen nicht mehr funktionieren, wenn Du die zahlungspflichtige Version nicht mehr hast,
  4. Du den Überblick über alle verschiedenen Blocks und deren Designmöglichkeiten behalten musst. Viele verschiedene Blöcke bringt nicht unbedingt viel mehr. Versuche, Dich zu begrenzen.

Wichtig!

Prüfe den Blockanbieter und die Blöcke auf Herz und Nieren, bevor du Dich entscheidest.

Anbieter, die Du Dir durchaus mal näher anschauen kannst:

  1. WPStackable: Auf der Demo-Seite kannst Du die Features der Premium-Blöcke nach Lust und Laune ausprobieren. Dazu brauchst Du nicht mal eine WordPress Installation.
    Auf der linken Seite siehst Du die Blöcke und auf der rechten Seite nimmst Du alle Einstellungen vor. Spielen lohnt sich, weil Du sehr schnell die Möglichkeiten für Dein eigenes Design entdeckst.
  2. Kadence Blocks: Bereits die kostenlosen Blocks sind eine gute Ergänzung zu Gutenberg.
  3. Atomic Blocks: Auch hier findest Du eine Reihe von schönen Blocks. Wir setzen kostenlose Blöcke von Atomic Block ebenfalls ein.

Diese Liste erhebt keinen Anspruch auf Vollständigkeit.


WordPress Gutenberg und SEO

Der Blockeditor gefällt uns auch unter SEO-Gesichtspunkten sehr gut. Dies sind u.a. die bereits oben angesprochene Übersichtlichkeit, aber auch das Setzen von ALT-Tags bei Bildern. Auch die Ladezeit und das Thema responsives Design sind mit Gutenberg sehr einfach. Die Details zu den genannten Begriffen findest Du in dem separaten Blogbeitrag „Gutenberg und SEO“.


WordPress Gutenberg und Matt Mullenweg

Matt Mullenweg, der Initiator und leitende Entwickler von WordPress hat auf dem WordCamp Europe in Berlin 2019 vor der versammelten WordPress Community bereits die weiteren Entwicklungsschritte des Editors kundgetan:

  • Phase I: Blocks zum Schreiben und Editieren (abgeschlossen)
  • Phase II: Widgets, Navigation und kundenspezifische Anpassungen
  • Phase III: Zusammenarbeit, Editieren und Abläufe durch mehrere Nutzer
  • Phase IV: Unterstützung Mehrsprachigkeit

Sicherlich liegt noch sehr viel Arbeit vor den Entwicklern, aber die Richtung ist klar. Und somit steht die Zukunftsfähigkeit von WordPress außer Frage. Ganz klar ist, dass Gutenberg WordPress helfen wird, sich gegen andere CMS und Webseiten-Baukästen durchzusetzen. Außerdem bleibt WordPress mit den neuen Möglichkeiten des Gutenberg-Editors auf dem Stand der Zeit. Als Stichwort sei hier nur das Thema responsives Design genannt.

Simone Sarodnick trifft Matt Mullenweg auf dem WordCamp Europe 2019 in Berlin.
Veröffentlichung des gemeinsamen Selfies mit freundlicher Genehmigung von Matt Mullenweg.

Fazit zum Blockeditor Gutenberg


Der WordPress-Editor Gutenberg ist nicht so schlecht, wie viele denken. Er hat sich seit Dezember 2018 rasant entwickelt und wird dies auch weiterhin tun. Gutenberg ist im WordPress Core fest verankert.
Wer unbedingt bei dem alten Editor bleiben will, kann das WordPress Plugin „tinymce editor“ verwenden. Über kurz oder lang sollte sich aber jeder mit dem neuen Editor beschäftigen. Die nächsten WordPress Versionen kommen mit Gutenberg!


Bleibe auf dem Laufenden!

Abonniere den SEO-Brief und Du erhältst regelmäßig Infos zu Suchmaschinenoptimierung und relevanten Veranstaltungen aus NRW und Online.

Kontaktiere uns:

Daten, die Du freiwillig oder notwendigerweise abgibst, werden rein zweckgebunden und zur Bearbeitung und Beantwortung Deiner Anfrage verwendet.

Maximal 1.000 Zeichen sind erlaubt.

* - Pflichtfeld

Nach oben