WordPress Grundlagen

WordPress Block-Editor Gutenberg (1): Bedienung und Editor-Fenster

Der 2019 eingeführte neue WordPress Standard-Editor hat zwischenzeitlich eine umfangreiche Funkionalität und sehr gute Stabilität erreicht. Der Versionsstand des Editors zu diesem Artikel ist 7.7.1. Die Versionsnummer dokumentiert die rasante Enwicklung des Block-Editors. Bei der täglichen, redaktionellen Arbeit an Webseiten, zeigt sich der WordPress-Editor mit seinem ausgezeichneten User-Interface als sehr praktikables Werkzeug, mit dem es Spaß macht zu arbeiten.

Bereits seit Version 3.7 verwende ich den Block-Editor auf Produktivseiten und stelle fest, dass meine Kunden das intuitive Bedienkonzept schnell schätzen lernen. Inzwischen ist der Block-Editor in punkto Usability allen Page-Buildern weit überlegen, dem bisherigen Standard-Editor Tiny-MCE sowieso.

Ziel dieser Blog-Serie ist es, die Bedienung des neuen WordPress Editors sehr umfassend darzustellen und Ihnen Tipps & Tricks im Umgang mit dem Editor zu geben.

WordPress-Elemente

Was ist der Unterschied zwischen Seite und Beitrag?

Eine Seite enthält meist statischen Inhalt, einmal erstellt, ändert er sich normalerweise nicht mehr. Beispiele für Seiten sind Landing-Pages, About-Page, Datenschutzerklärung oder das Impressum. Ein Beitrag hingegen ist Teil des Blogs auf Ihrer WordPress Website und damit sehr viel dynamischer nutzbar. Beispielsweise sortieren sich Beiträge nach ihrem Veröffentlichungsdatum, sie können einer oder mehreren Kategorien und Schlagwörtern zugeordnet und über beide Kriterien sortiert angezeigt werden. Diese Blogfunktionen sind immer Teil Ihrer WordPress-Installation und können, aber müssen nicht verwendet werden. Sowohl Seiten wie Beiträge werden mit dem Block-Editor bearbeitet. Nach und nach werden zukünftig auch alle sonstigen editierbaren Bereiche (z.B. Widgets oder custom post types) in WordPress den neuen Block-Editor verwenden.

WordPress-Elemente

Was ist ein Block-Editor?

Der Name Block-Editor, auch im Englischen heißt er so, leitet sich aus der deutschen Bezeichnung Block / Blöcke her. Ein Dokument besteht in diesem Konzept aus einer beliebigen Anzahl einzelner Blöcke. Jeder Absatz, jede Überschrift, jedes Bild, ist ein einzelner Block und kann – sofern gewollt – auch unabhängig von der Standard-Formatierung konfiguriert werden.

Content erstellen

Das Block-Editor Fenster

Wenn sie einen neuen Beitrag [BEITRÄGE > ERSTELLEN] oder eine neue Seite [SEITEN > ERSTELLEN] erstellen, öffnet sich der Block-Editor mit der folgenden Startansicht.

Screenshot WordPress Block-Editor Startansicht
Block-Editor Startansicht

Quick & Dirty – Was Sie mindestens tun müssen

Minimal-Eingaben bei der Beitragserstellung

Für den Fall, dass Sie wenig Zeit haben, einen Beitrag zu erstellen, finden Sie nachstehend die Elemente, die Ihr Beitrag zwingend braucht:

  • einen Beitrags-Titel
  • Ihren Text
  • ein Beitragsbild
  • den Auszugstext für die Blog-Übersichtsseite
  • eine Metabeschreibung, die Google anzeigen soll

Zusätzliche Elemente, dienen der Strukturierung und der Suche bzw. Auffindbarkeit des Beitrages auf Ihrer Website. Dazu zählen die Kategorie und die Schlagwörter.

Wie geht’s genau?

Sie haben einen leeren Beitrag vor sich. Formulieren Sie Ihren Beitrags-Titel und beginnen Sie darunter direkt mit der Texteingabe. ENTER setzt unter den aktuellen Block einen weiteren Absatz-Block. In den Dokument-Einstellungen rechts definieren Sie ein Beitragsbild, eine Kategorie, ggfs. Schlagwörter, einen Auszugstext für die Blog-Übersichtsseite und klicken abschließend auf den blauen Button VERÖFFENTLICHEN. Fertig, Ihr erster Beitrag ist erstellt und online!

Dokument-Status: Entwurf / Veröffentlicht

Solange Sie noch nicht auf den blauen Button VERÖFFENTLICHEN geklickt haben, hat Ihr Beitrag den Status ENTWURF, zu erkennen daran, dass der Button eben die Bezeichnung VERÖFFENTLICHEN trägt. Mit diesem Status ist Ihr Beitrag nicht online, also für niemand anderen sichtbar. Einmal geklickt wird Ihr Beitrag veröffentlicht und die Bezeichnung ändert sich entsprechend in AKTUALISIEREN. Über den Link AUF ENTWURF UMSTELLEN können Sie Ihren Beitrag wieder auf den Entwurfsstatus zurücksetzen. Solange Sie den Beitrag noch erstellen, sollten sie also zum Speichern den Link SPEICHERN verwenden.

Screenshot WordPress Block-Editor Dokument-Status Entwurf
Dokument-Status: Entwurf

Screenshot WordPress Block-Editor Dokumentstatus Veröffentlicht
Dokument-Status: Veröffentlicht

Menüführung im Block-Editor

Das Menü oben links

Screenshot WordPress Block-Editor Top-Menü links
Block-Editor: Funktionen Menü oben links

Das + findet sich sehr oft im Editor-Fenster, nicht nur hier, sondern auch beim Mouse-Hover über einen bestehenden Block sowie unter oder rechts neben einem Block. Mit dem + im Menü oben links fügen Sie einen weiteren Block hinzu, und zwar direkt nach dem Block in dem sich der Cursor befindet.

Die Block-Navigation ist praktisch, wenn Sie einen bestimmten Block oder auch übergeordneten Block auswählen wollen (Zum Beispiel bei Spalten- oder Group-Blöcken).

Probieren Sie die Funktionen einfach einmal aus.

Menü und Einstellungen für jeden Block

Setzen Sie den Cursor in einen Block. Damit aktivieren Sie diesen. An der Oberkante des Blocks erscheint das Block-Menü, das die wichtigsten Einstellungen für diesen Block enthält.

Sie können wählen, was für eine Art Block Sie einfügen möchten. Einen Absatz? Eine Überschrift? Einen Abstandshalter? Einen Button? Das sind nur einige Elemente, die Sie zur Auswahl haben. Im Absatz-Block können Sie die Ausrichtung definieren: linksbündig, rechtsbündig, zentriert. Sie können Schrift hervorheben über „bold“ (fett) oder italic (kursiv). Das Symbol, das einer Kette ähnelt, nutzen Sie, um einen Link zu setzen. Wenn Sie den Cursor auf einen Block setzen, verändert sich auch die rechte Seitenleiste. Sie schaltet vom Tab ›Dokument‹ auf den Tab ›Block‹ um und bietet Ihnen alle weiteren Einstellmöglichkeiten für diesen Block. Probieren Sie es einmal aus.

Screenshot WordPress Block-Editor Block-Menü
Block-Menü und Block-Einstellungen

Individuelle Formatierungen achtsam einsetzen

Besonders bei den Texteinstellungen ›Größe‹ und ›Textfarbe‹ / ›Hintergrundfarbe‹ sollten Sie vorausschauend wählen, denn alle individuellen Formatierungen, die Sie für einen Block aktivieren, überschreiben die allgemeinen Formatierungen, die im Theme und durch Ihren Webdesigner voreingestellt sind. Im Allgemeinen brauchen Sie gerade am Text- oder Überschriften-Block keine Änderungen vornehmen. Wenn Sie zu viel individuelle Formatierungen definieren, wird die Gesamtansicht Ihres Beitrages unruhig. Ständig wechselnde Schriftgrößen oder Textfarben verwirren den Leser und lenken vom Inhalt ab. Daher gilt: weniger ist mehr.

Für Hervorhebungen arbeiten Sie am Text-Block am besten mit den Möglichkeiten, die Ihnen das kleine Block-Menü bietet. Hier im Artikel habe ich fast ausschließlich mit der Hervorhebung ›fett‹ gearbeitet, dafür aber viele Zwischenüberschriften H2 und H3 eingesetzt. Beide Hervorhebungsarten, fett und Überschriften, sind im Übrigen SEO-relevant und werden von Suchmaschinen ausgewertet.

Warum gibt es keine Möglichkeit zur Schriftauswahl?

Aus dem gleichen Grund, weshalb zu viele individuelle Formatierungen nicht gut für das Gesamtbild sind. Auf einer Website sollten ein bis maximal drei verschiedene Schriftarten eingesetzt werden: eine für normalen Text, eine für die Überschriften und ggfs. noch eine für die Menüs. Auf dieser Webseite habe ich nur eine einzige Schriftart eingesetzt, den Google Font ›Quicksand‹.

Wenn Sie sich für Ihre Website andere Schriftarten wünschen, kontaktieren Sie Ihren Webdesigner, er wird Sie beraten und kann andere Schriftarten einbinden. Dabei ist es wichtig, dass die Schriften, wie zum Beispiel Google Fonts, lokal auf Ihrem Server installiert sind und keinerlei externe Serverzugriffe zum Laden von Schriften erfolgen (Stichworte: Datenschutz, Ladezeit).

Menüführung am Block

Das 3-Punkte-Menü am Block

Hinter den 3-Punkte-Menüs verbergen sich etwas seltener benötigte Funktionen. Im 3-Punkte-Block-Menü können Sie den Block duplizieren, andere Blöcke davor oder danach einfügen oder den Block auch in der HTML-Ansicht bearbeiten, ihn zu einem wiederverwendbaren Block umwandeln (Vorlage), ihn mit anderen Blöcken gruppieren oder ihn letztendlich entfernen. Sie können die Funktionen einfach einmal ausprobieren. Die nicht selbsterklärenden werde ich in weiteren Artikeln genauer behandeln.

Screenshot WordPress Block-Editor 3-Punkte-Menü Block
3-Punkte-Menü am Block
Screenshot WordPress Block-Editor 3-Punkte-Menü oben rechts
3-Punkte-Menü Editor

Menüführung im Block-Editor

Das 3-Punkte-Menü im Editor oben rechts

Das 3-Punkte-Menü des Editors enthält ebenfalls seltener benötigte Funktionen. Eine davon sei hier kurz erläutert, Sie finden hier die Umschaltung zwischen Vollbildmodus (neuer Standard des Editors) und der Ansicht mit WordPress Hauptmenü (bisheriger Standard). Setzen Sie den Haken, wie es Ihnen beliebt. Die anderen Funktionen in diesem Menü werden sie erst verwenden, wenn Sie sich intensiver mit den Möglichkeiten des Block-Editors beschäftigen, daher gehe ich darauf in diesem Einführungsartikel nicht weiter ein. Sie sollen aber gesehen haben, dass es da noch etwas gibt.

Fazit

Der WordPress Block-Editor – Redaktionelles Arbeiten deluxe

WordPress stellt mit dem neuen Block-Editor Gutenberg unser redaktionelles Arbeiten im Web auf einen neuen Level. Bereits nach der Lektüre dieses Grundlagenartikels werden sie je nach Theme und Vorarbeit Ihres Webdesigners in der Lage sein, ansprechende Blogbeiträge zu erstellen.

Was Sie noch alles mit den bereits vorhandenen vielen zusätzlichen Blocks wie zum Beispiel Spalten, Cover, Media-Text, Einbindungen machen können, behandele ich in den folgenden Artikeln zu dieser Block-Editor-Reihe.

Wenn Sie Fragen zur Arbeit mit dem neuen WordPress Editor haben, kontaktieren Sie mich.


Wenn Sie möchten, melden Sie sich zum Newsletter an und Sie werden informiert, wenn neue Artikel erscheinen.

Claus Pescha
Webdesign & Fotografie

Ihre Anfrage an mich

Datenschutzerklärung

Oder rufen Sie direkt an