Wer mit WordPress arbeitet, ist mit Sicherheit bereits mit dem Editor Gutenberg in Berührung gekommen. Am Anfang habe ich Gutenberg mit viel Skepsis betrachtet, heute denke ich anders darüber. Es gibt eine Menge Dinge, die mir sehr gefallen und die das Leben erleichtern.
Seit längerem 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 gebe ich dir einige Tipps zu den Vorteilen des Editors. Die Vorteile und Möglichkeiten des Editors haben sich innerhalb kurzer Zeit signifikant erhöht. Gutenberg ist ein zentrales Element von WordPress. 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:
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 in 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:
Es öffnet sich ein Menü, in welchem 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 ich.
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:
- Du erstellst einen ganz normalen Block und editierst ihn so, wie es dir am besten gefällt.
- 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.
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. Wenn du 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.
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 dDu 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 wächst ständig. Es ist nicht leicht, eine richtige Auswahl zu treffen. Du musst bedenken, dass:
- Du für jeden Anbieter immer ein Plugin installieren musst,
- die schönsten Blöcke fast immer in den zahlungspflichtigen Premium-Abos stecken,
- Blöcke, die mit zahlungspflichtigen Abos erstellt wurden, unter Umständen nicht mehr funktionieren, wenn du die zahlungspflichtige Version nicht mehr hast,
- 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
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:
- 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. - Kadence Blocks: Bereits die kostenlosen Blocks sind eine gute Ergänzung zu Gutenberg. Bei Kadence gibt es auch einen Block für ein einfaches Formular.
- Atomic Blocks: Auch hier findest du eine Reihe von schönen Blocks.
Diese Liste erhebt keinen Anspruch auf Vollständigkeit.
Der Editor und SEO
Der Blockeditor überzeugt auch unter SEO-Gesichtspunkten. 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:
- Blocks zum Schreiben und Editieren (abgeschlossen
- Widgets, Navigation und kundenspezifische Anpassungen
- Zusammenarbeit, Editieren und Abläufe durch mehrere Nutzer
- 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
Der WordPress-Editor Gutenberg hat sich seit Einführung im Dezember 2018 rasant entwickelt und wird dies auch weiterhin tun. Gutenberg ist im WordPress Core fest verankert und zukunftsfähig.