Mit WordPress 5.0, dessen Veröffentlichung kurz bevorsteht, läuft der neue Gutenberg-Editor in die Standardversion des beliebten Content-Management-Systems über. Wir zeigen in diesem Beitrag, wie sich der Umgang damit konkret gestaltet.
Inhalt
Durchstarten mit Gutenberg
“Mit dem Gutenberg-Editor bricht eine neue Ära in der Geschichte von WordPress an”, so der Beginn unseres Beitrages, in dem wir bereits vor ein paar Wochen ausführlich dargelegt haben, warum, wieso, weshalb WordPress mit dem nächsten großen Update einen neuen Editor erhält: Gutenberg kommt – Alle Infos zum neuen WordPress-Editor
Wann genau es soweit ist, weiß man nicht – voraussichtlich aber schon bald. Deshalb möchten wir Ihnen an dieser Stelle eine Anleitung zum Umgang mit dem Gutenberg-Editor an die Hand geben, sodass Sie gut auf die flächendeckende Einführung vorbereitet sind. Nutzen können Sie ihn mithilfe des offiziellen Plug-ins Gutenberg bereits jetzt.
Die grundlegende Bedienung von Gutenberg
Es ändert sich tatsächlich eine Menge im Vergleich zur herkömmlichen Herangehensweise. Das Grundprinzip des Gutenberg-Editors basiert – ähnlich der Funktionsweise der sogenannten Page Builder – auf modularen Blöcken, die zum inhaltlichen Aufbau einer Seite oder eines Blog-Beitrages genutzt werden können. Wir zitieren uns erneut selbst:
“Das bekannte Textfenster verschwindet und alle Beitragselemente von der Überschrift über den Fließtext bis hin zu den Bildern werden mithilfe von Blöcken generiert, die dann hin- und hergeschoben werden können. Ein Beitrag besteht in Zukunft also aus einer Reihe von Blöcken mit unterschiedlichen Funktionen.”
Blöcke auswählen und bearbeiten
Um einen Block – beispielsweise ein “Bild”, ein “Video”, eine “Überschrift” oder einen “Absatz” – auszuwählen und zu bearbeiten, klicken Sie zunächst auf das Plus-Zeichen am oberen linken Rand des Gutenberg-Editors und dann auf den Block Ihrer Wahl. Daraufhin wird dieser in die Seite oder den Beitrag eingefügt.
Nun können Sie den Block direkt im mittleren Bereich des Gutenberg-Editors bearbeiten und Sie erhalten rechts in der Sidebar zusätzliche Einstellungsmöglichkeiten unter dem Reiter “Block”. Unter dem anderen Reiter hier, “Dokument”, finden sich die klassischen Modifizierungsoptionen wie “Status und Sichtbarkeit“, “Kategorien” etc.
Wenn Sie einen bereits eingesetzten Block bearbeiten möchten, klicken Sie einfach mitten hinein. Über das Drop-down-Menü hinter den drei Punkten am rechten Rand eines Blockes erhalten Sie zusätzliche Bearbeitungsmöglichkeiten wie “Duplizieren” oder “Als HTML bearbeiten“. Über das Plus-Zeichen am oberen Rand können Sie weitere Blöcke hinzufügen.
Weitere Gutenberg-Funktionen
Neben den Blöcken bringt Gutenberg weitere Neuerungen mit sich, die der Rede wert sind. Um beispielsweise vom visuellen Editor in den Code-Editor zu wechseln, klicken Sie auf die drei Punkte ganz rechts oben und wählen den entsprechenden Menüpunkt im Drop-down-Listenfeld aus. Alternativ können Sie die Tastenkombination Ctrl + Shift + Alt + M nutzen.
Im gleichen Drop-down-Listenfeld findet sich ganz unten eine weitere praktische Funktion: “Kompletten Inhalt kopieren“. Diese ermöglicht es Ihnen, den gesamten Inhalt einer Seite oder eines Blog-Beitrages mit nur einem Klick in der HTML-Version zu kopieren, sodass Sie ihn an anderer Stelle leicht wieder einfügen können.
Auch praktisch: Hinter dem Informationssymbol oben links im Gutenberg-Editor verbirgt sich die Anzeige der Anzahl von geschriebenen Wörtern, Überschriften und Absätzen sowie eingesetzten Blöcken. Die beiden Pfeil-Symbole daneben stehen für die Funktionen “Rückgängig” und “Wiederholen” bezüglich des letzten Befehles.
Wenn Sie regelmäßig bloggen, sind Sie voraussichtlich vom folgenden Feature besonders begeistert: Neben den klassischen Modifizierungsoptionen können Sie unter dem Reiter “Dokument” in der Sidebar rechts einen Haken bei “Auf der Startseite halten” setzen und damit einen Blog-Beitrag fixieren.
Vorhandene Blöcke nach Kategorien aufgeteilt
Um Ihnen einen Überblick über die bisher zur Verfügung stehenden Blöcke zu geben, haben wir diese im Folgenden einmal für Sie aufgelistet. Nach dem Release von WordPress 5.0 werden voraussichtlich Stück für Stück weitere hinzukommen, aber für einen ersten Eindruck sowie den grundlegenden Aufbau von Seiten und Blog-Beiträgen reicht die Auswahl allemal.
Für jeden Block stehen, wie bereits erwähnt, in der Sidebar rechts diverse Einstellungsmöglichkeiten zur Verfügung – etwa die Definition der Schriftgrößen, Hintergrundfarben oder Sortierungen. Es würde den Rahmen dieses Beitrages sprengen, alle Optionen ausführlich zu skizzieren. Hier gilt es, Gutenberg selbst auszuprobieren.
Allgemeine Blöcke
Absatz
Ermöglicht das Einfügen von Textabsätzen.
Überschrift
Ermöglicht das Einfügen von Überschriften unterschiedlicher Hierarchieebenen.
Bild
Ermöglicht das Einfügen von Bildern.
Galerie
Ermöglicht das Einfügen von Bildergalerien.
Liste
Ermöglicht das Einfügen von geordneten und ungeordneten Listen.
Zitat
Ermöglicht das Einfügen von Zitaten.
Audio
Ermöglicht das Einfügen von externen Audiodateien.
Titelbild
Ermöglicht das Einfügen von großen Bildern mit darüberliegendem Text.
Datei
Ermöglicht das Einfügen von Dateien diverser Formate wie etwa PDF, um sie zum Download bereitzustellen.
Untertitel
Ermöglicht das Einfügen von Untertiteln.
Video
Ermöglicht das Einfügen von externen Videodateien.
Formatierung
Code
Ermöglicht das Einfügen von Code, der in Textform dargestellt wird.
Classic
Ermöglicht die Nutzung des klassischen WordPress-Editors in Blockform.
Eigenes HTML
Ermöglicht das Einfügen von eigenem HTML-Code inklusive Vorschau.
Vorformatiert
Ermöglicht das Einfügen von Texten, deren Formatierung übernommen wird.
Pull-Quote
Ermöglicht das Einfügen von Zitaten mit alternativer Darstellung.
Tabelle
Ermöglicht das Einfügen von Tabellen mit beliebig vielen Zeilen und Spalten.
Vers
Ermöglicht das Einfügen von Versen mit für Lyrik geeigneter Darstellung.
Layout-Elemente
Button
Ermöglicht das Einfügen von Buttons mit anpassbarer Text- und Hintergrundfarbe.
Spalten
Ermöglicht den Aufbau von mehrspaltigen Layouts.
Mehr
Ermöglicht das Einfügen von “Mehr lesen”-Tags.
Seitenumbruch
Ermöglicht das Einfügen von Seitenumbrüchen.
Trennzeichen
Ermöglicht das Einfügen von Linien zur Trennung von Website-Bereichen.
Abstandshalter
Ermöglicht das Einfügen von Abstandshaltern.
Widgets und Embeds
Zwei weitere Kategorien mit Blöcken stehen über die soeben aufgeführten hinaus zur Verfügung: Widgets und Embeds. Eingefügt werden können die Widgets “Shortcode“, “Archive“, “Kategorien” sowie “Neueste Kommentare” und “Neueste Beiträge“. Der allgemeine Embed-Block wird ergänzt durch etliche Blöcke für Dienste wie Facebook, Instagram, Twitter etc.
Fazit
Sie sehen, der Gutenberg-Editor bringt eine vollkommen neue Art der Seiten- sowie Beitragsgestaltung mit sich und wird über kurz oder lang den klassischen WordPress-Editor ablösen. Das passiert natürlich nicht sofort, aber Sie tun sicher gut daran, direkt zu Beginn in die innovative Welt der Blöcke einzutauchen.
In einem unserer kommenden Blog-Beiträge werden wir die Vor- und Nachteile von Gutenberg noch einmal genauer unter die Lupe nehmen, um Sie bestmöglich über potenzielle Risiken aufzuklären und Ihnen die Stärken dieser Innovation näherzubringen. Bis dahin haben Sie eventuell bereits Ihre ersten Erfahrungen damit gesammelt.
Viel Spaß dabei!
7 Kommentare. Wir freuen uns über Ihren Kommentar
Der neue Editor ist anders aber nicht besser. Blöcke – na gut, Initialbuchstabe – nicht schlecht und Hintergrundfarbe auch was Neues. Ausgesprochen schlecht finde ich, dass nach Umschalten in den Code-Editor auf den Seitenanfang geschaltet wird. Fröhliches Suchen der Cursorposition ist dann angesagt. Umgekehrt, vom Code-Ed. in den Visuellen Ed., bleibt die Cursor-Position erhalten.
Das Einfügen von Links ist m. E. nicht mehr so schön gestaltet. “Zum Suchen Tippen” – warum das? früher hatte ich gleich die Auswahl und musste nicht rätseln wie wohl gleich der Name nach der Änderung war.
Da ich in meinen Texten mathematische Variable in der Schriftart Symbol verwende, also alpha, beta, gamma und andere Sonderzeichen und ich nicht finden kann, wie das gehen soll, ohne LATEX einzuschalten, ist Gutenberg für mich keine Option. Außerdem sind noch einige bags vorhanden.
Solange die vielen neuen Dinge nur in ausgewählten Themes funktionieren und alte Dinge überhaupt nicht mehr, ist der neue Editor für mich nicht reif.
Ich benutze Gutenberg seit einiger recht gern, da es die Erstellung von Beiträgen erheblich erleichtert.
Einzig eine Funktion vermisse ich bzw. habe ich noch nicht gefunden:
Wie kann ich innerhalb eines Blocks eine weiche Zeilenschaltung einfügen, ohne gleich einen neuen Block zu fabrizieren?
Welche Tastenkombination hilft da?
Moin Eugen,
beim Mac ist es die Tastenkombination Hochstelltaste (⇧) + Enter.
Ahoi!
Thorsten
Irgendwie fehlt mir eine ganz profane Bildvergrößerung für einzelne Bilder (egal wie sich dann nennt).
Habe auch die V4.9.8 von WP und teste gerade den Editor
und muss zugeben das dieser nicht schlecht zu sein scheint.
Eine Problem habe ich allerdings bei mir gibt es Galerien und aus diesen nehme ich gerne mal Bilder mit in den Beitrag jetzt kann man ja aus der Mediathek Bilder in einen Block schieben aber scheinbar funktioniert es nicht wenn ich ein Bild aus einer Galerie(Album) in den Beitrag setzen möchte.
Auswählen geht wohl aber das Bild wird nicht in den Beitrag übertragen.
Frage wäre ist das jetzt möglich oder muss ich die Bilder oder das Bild zusätzlich in die Mediathek laden?
Ich teste Gutenberg seit zwei Tagen. Alles gefällt mir. Nur eine Sache finde ich nicht: Bild über die ganze Breite auf einem Blog-Eintrag. Diese Möglichkeit gibt es bei mir nicht. Wahrscheinlich liegt es an den allgemeinen Einstellungen. Was könnte es sein?
Ich verwende WordPress 4.9.8 zum ersten Mal für einen Blog, der schon online ist. Den alten Editor kenne ich noch aus früheren Versionen. Diese habe ich aber nicht produktiv genutzt. Ich habe jetzt gleich mit Gutenberg begonnen. Ich bin bisher gut zurechtgekommen. Nach einigem Probieren, funktioniert alles so, wie ich es möchte. Ich habe keine Probleme mit dem neuen Editor. Ich bin auf die Version gespannt.