Der Block-Editor

Modul 4: Inhalte erstellen · Lesezeit: 8 Minuten

Lernziel: Nach dieser Lektion können Sie eine Seite mit Blöcken und Vorlagen aufbauen und wissen, wie Entwürfe, Zeitplanung und Revisionen funktionieren.

Kernbegriffe: Block, Blockeinstellungen, Werkzeugleiste, Listenansicht, Gruppe, Spalten, Vorlage, synchronisierte Vorlage, Entwurf, privat, Zeitplanung, Revisionen, Vorschau

Alles ist ein Block

Seit WordPress 5.0 (Ende 2018) erstellen Sie Inhalte im Block-Editor (auch Gutenberg genannt, nach dem Projekt). Eine Seite besteht aus einzelnen Blöcken: einer Überschrift, einem Absatz, einem Bild, einem Button, einer Liste, einer Tabelle, einem eingebetteten Video. Jeder Block hat seine eigenen Einstellungen. Sie setzen Blöcke untereinander, nebeneinander (in Spalten) oder ineinander (in einer Gruppe).

Warum Blöcke? Im alten Editor war eine Seite ein großes Textfeld. Wollten Sie zwei Spalten oder einen Button, brauchten Sie einen Page-Builder, Shortcodes oder HTML. Mit Blöcken geht das direkt in WordPress, und das Ergebnis ist sauberes HTML, das das Theme gestaltet.

Im Hintergrund speichert WordPress die Blöcke als HTML mit Kommentarzeichen davor und danach:

<!-- wp:heading -->
<h2 class="wp-block-heading">Openingstijden</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We zijn open van dinsdag tot en met zaterdag.</p>
<!-- /wp:paragraph -->

Das ist gut zu wissen: Der Inhalt bleibt lesbares HTML, auch wenn Sie später das Theme wechseln oder ein Block nicht mehr existiert. Sie sehen das, wenn Sie bei einem Block "Als HTML bearbeiten" wählen, oder im Code-Editor (Strg+Umschalt+Alt+M).

Der Editor in drei Teilen

1. Die Arbeitsfläche in der Mitte: Ihre Seite in etwa so, wie sie später aussieht.
2. Die Werkzeugleiste über einem ausgewählten Block: fett, kursiv, Link, Ausrichtung und die Umwandlung des Blocks in einen anderen Typ (ein Absatz wird zu einer Liste, ein Bild wird zu einer Galerie).
3. Die Seitenleiste rechts mit zwei Tabs: Seite (oder Beitrag) mit Einstellungen für die ganze Seite, und Block mit Einstellungen des ausgewählten Blocks, wie Farbe, Abstand und Schriftgröße.

Zwei Hilfsmittel, die Ihre Arbeit deutlich erleichtern:

• Listenansicht (das Symbol mit den drei Strichen oben links): der Aufbau Ihrer Seite als Baumstruktur. Damit wählen Sie genau den gewünschten Block aus, auch wenn er in einer Gruppe in einer Spalte steckt.
• Schrägstrich-Befehle: Tippen Sie in einer leeren Zeile / und den Namen eines Blocks (/Überschrift, /Button, /Bild) und drücken Sie Enter.

Aufbauen mit Gruppen und Spalten

Eine gute Seite hat einen klaren Aufbau. Dafür nutzen Sie drei Bausteine:

• Gruppe: ein Rahmen um ein paar Blöcke, mit eigenem Hintergrund oder Abstand. Zum Beispiel ein farbiger Block mit einer Überschrift, einem Satz und einem Button.
• Spalten: Blöcke nebeneinander. Auf einem Smartphone stehen sie untereinander.
• Reihe und Stapel: Varianten einer Gruppe, die Blöcke horizontal oder vertikal anordnen.

Verwenden Sie Überschriften auf die richtige Weise: ein H1 (der Titel der Seite, den meist das Theme selbst erzeugt), darunter H2 für die Kapitel und H3 für die Abschnitte darin. Wählen Sie eine Überschrift nicht wegen der Schriftgröße; die passen Sie in den Blockeinstellungen an. Screenreader und Suchmaschinen nutzen die Überschriften, um die Seite zu verstehen (Lektion 9.2).

Vorlagen: nicht immer wieder von vorn beginnen

Eine Vorlage (Pattern) ist eine fertige Gruppe von Blöcken: eine Überschrift mit Text und Bild, eine Preistabelle, drei Spalten mit Symbolen. Sie fügen sie über die Einfügen-Schaltfläche (das Plus) ein, Tab Vorlagen. Ihr Theme liefert oft schon einige mit, und in der Vorlagenbibliothek von wordpress.org gibt es Hunderte.

Sie können auch selbst Vorlagen erstellen: Wählen Sie ein paar Blöcke aus, klicken Sie in der Werkzeugleiste auf die drei Punkte und Vorlage erstellen. Dabei legen Sie fest, ob die Vorlage synchronisiert ist:

• Nicht synchronisiert: Jedes Mal, wenn Sie sie einfügen, erhalten Sie eine eigenständige Kopie. Passen Sie diese an, ändert sich nur diese Kopie. Praktisch als Vorlage.
• Synchronisiert: Überall, wo sie vorkommt, ist sie identisch. Passen Sie sie an einer Stelle an, ändert sie sich überall. Praktisch für einen Block "Kontakt und Öffnungszeiten", der auf zehn Seiten steht. (Früher hießen diese "wiederverwendbare Blöcke".)

Eine Falle: Eine synchronisierte Vorlage, die Sie auf einer Seite "mal eben" anpassen, ändert sich auch auf allen anderen Seiten. Möchten Sie an einer Stelle etwas anderes, machen Sie aus dieser einen Kopie eine normale Gruppe (Synchronisierung aufheben).

Speichern, veröffentlichen und planen

Eine Seite hat einen Status:

Nutzen Sie Vorschau, um die Seite so zu betrachten, wie ein Besucher sie sieht, auch auf Mobilgerät und Tablet, bevor Sie veröffentlichen.

Revisionen: zurück in der Zeit

Jedes Mal, wenn Sie speichern, bewahrt WordPress eine Revision: die Version von diesem Moment. In der Seitenleiste sehen Sie bei der Seite, wie viele Revisionen es gibt. Klicken Sie darauf, sehen Sie mit einem Schieberegler die Unterschiede zwischen zwei Versionen und können eine ältere Version wiederherstellen.

Revisionen sind Ihr erstes Sicherheitsnetz bei einem Versehen ("ich habe aus Versehen die halbe Seite gelöscht"). Allerdings stehen sie alle in der Datenbank. Eine Website mit Tausenden Revisionen wird größer und manchmal langsamer. Sie können die Anzahl in wp-config.php begrenzen:

define( 'WP_POST_REVISIONS', 20 );

Lektion 6.3 behandelt das Aufräumen alter Revisionen.

Wo der Editor aufhört

Der Block-Editor erstellt den Inhalt einer Seite. Was um den Inhalt herum steht (der Kopf der Website, das Menü, die Fußzeile) gehört zum Theme. Bei einem Block-Theme bearbeiten Sie das im Website-Editor (Darstellung > Editor) mit denselben Blöcken; bei einem klassischen Theme im Customizer und bei Widgets (Lektion 5.1). Verwenden Sie einen Page-Builder wie Elementor oder Divi, arbeiten Sie in diesem Programm statt im Block-Editor; die Nachteile davon bespricht Lektion 5.1.

Zusammenfassung

• Eine Seite besteht aus Blöcken, die Sie unter, neben und ineinander setzen; WordPress speichert sie als HTML mit Kommentarzeichen.
• Die Listenansicht und Schrägstrich-Befehle machen das Bauen schnell und präzise.
• Nutzen Sie Überschriften für den Aufbau (H2, H3), nicht für die Schriftgröße.
• Vorlagen sparen Arbeit; eine synchronisierte Vorlage ändert sich überall gleichzeitig.
• Entwurf, geplant, privat und Revisionen geben Ihnen Kontrolle darüber, was wann sichtbar ist, und einen Weg zurück.

Quiz

Aufgabe

Aufgabe D4.1: Erstellen Sie eine Seite mit Blöcken. Erstellen Sie eine Entwurfsseite "Über uns" mit: einem H2 und einem H3, mindestens zwei Absätzen, einem Bild mit Alt-Text, einem Spaltenblock mit zwei Spalten, einem Button mit einem Link und einer Vorlage aus der Bibliothek. Machen Sie aus einer Gruppe eine eigene synchronisierte Vorlage und fügen Sie diese auf einer zweiten Entwurfsseite ein. Passen Sie sie danach an einer Stelle an und beobachten Sie, was auf der anderen Seite passiert. Stellen Sie abschließend eine frühere Revision wieder her. Haken Sie jeden Schritt ab und beschreiben Sie in zwei Sätzen, wann Sie eine synchronisierte Vorlage verwenden würden und wann nicht.

Weiterführende Links

Für die Arbeit in WordPress selbst haben wir noch keine eigenen Artikel; die offizielle Dokumentation von WordPress ist umfangreich.

• Der Block-Editor (wordpress.org, Englisch): https://wordpress.org/documentation/article/wordpress-block-editor/
• Vorlagen (wordpress.org, Englisch): https://wordpress.org/documentation/article/block-pattern/
• Revisionen (wordpress.org, Englisch): https://wordpress.org/documentation/article/revisions/