Historical Typewriter
Foto | matttilda on AdobeStock

WordPress Block-Editor Gutenberg #1

Aktualisiert

7 Min.

WordPress Grundlagen

WordPress Editor #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 Editor wird mehr und mehr zur zentralen Bedienung des gesamten CMS WordPress. 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.

Wer den WordPress-Editor um wichtige Funktionen für eine weitergehende Layoutgestaltung erweitern will, dem sei das Plugin GenerateBlocks empfohlen. Es ergänzt den Block-Editor u.a. einen frei definierbaren Container-Block, einen Raster-Block (flexbox), Accordion-Block sowie Headings- und Button-Blöcke mit stark erweiterten Konfigurationsmöglichkeiten wie innere und äußere Abstände oder das Verwenden beliebiger Vektorgrafiken als Icons. Unser standardmäßig eingesetztes Premium Theme GeneratePress ist übrigens vom selben Entwicklerteam (Edge22 Studios LTD, Kanada), die auch einen außergewöhnlich guten Support bieten.

GenerateBlocks Website (WP-Editor Erweiterung) (*)

GeneratePress Website (Pro Theme für WP) (*)

WordPress-Elemente

Was ist der Unterschied zwischen Seite und Beitrag?

Eine Seite wird prinzipiell immer an der selben Stelle auf Ihrer Website angezeigt, Beispiele sind Startseite, Landing-Page, About-Page, Datenschutzerklärung oder das Impressum. Ein Beitrag hingegen ist Teil des Blogs auf Ihrer WordPress Website und damit sehr viel dynamischer anzeigbar. 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. Zukünftig sollen 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 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.

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 (wichtig für SEO: Alternativ-Text (Alt-Text) setzen)
  • den Auszugstext für die Blog-Übersichtsseite
  • Title-Tag und Metabeschreibung, die Google anzeigen soll (SEO)

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.

Menüführung im Block-Editor

Das 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.

Für jeden Block

Menü und Einstellungen

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.

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.

Gliedern Sie Ihren Text logisch mit Zwischenüberschriften H2, H3, ggf. H4. Aber seien Sie wählerisch mit der Verwendung der Markierung „fett / strong / bold“, denn auch diese sind SEO-relevant und werden von Suchmaschinen ausgewertet.

SEO-Tipp:

Fett-Markierungen sollten vorsichtig verwendet werden und wenn, dann je Seite maximal 12 mal und jeweils maximal 70 Zeichen enthalten. Verwenden Sie vornehmlich keyword-relevante Suchbegriffe in Überschriften oder Fettmarkierungen, um Suchmaschinen darüber die logische Struktur Ihres Inhaltes mitzuteilen.

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, Gill Sans Nova.

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.

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 und der Ansicht mit WordPress Hauptmenü. 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 mehr gibt.

Fazit

Der WordPress Block-Editor – Redaktionelles Arbeiten deluxe

Automattic verbessert mit dem neuen Block-Editor Gutenberg ganz erheblich das redaktionelles Arbeiten mit WordPress. 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.

Jetzt anrufen