Alles über die Blöcke

Neu im Gutenberg Editor ist das Konzept der Blöcke. Statt wie bisher alles in einem großen Eingabefeld einzutragen, sind jetzt alle Inhalte einzelne Komponenten im Beitrag. Diese lassen sich auch individuell gestalten und eröffnen so neue Möglichkeiten in der Erstellung von Beiträgen und Seiten.

Übersicht der Standard-Blöcke

WordPress bringt standardmäßig 36 verschiedene Blöcke mit:

Einbettungen

Mit dem Einbetten-Block kannst du viele verschiedene, externe Medien in deine Beiträge und Seiten einbetten. Beispielsweise:

  • YouTube
  • Twitter
  • Instagram
  • Spotify

Erfahre mehr zum Einbetten-Block!

Vorlagen und Wiederverwendbar

Neu seit WordPress 5.5 sind die Vorlagen, im englischen „Block Patterns“ genannt. Diese können durch WordPress, Themes und Plugins vorgegeben werden. Erfahre mehr zu den Vorlagen!

Du kannst einen oder mehrere Blöcke gemeinsam als wiederverwendbaren Block anlegen und mehrfach in deinen Beiträgen und Seiten nutzen. Erfahre mehr zu den wiederverwendbaren Blöcken!

Einen Block im Editor hinzufügen

Es gibt drei Möglichkeiten, wie du einen neuen Block in deinen Beitrag oder deine Seite einfügen kannst. Immer für dich sichtbar ist das Inserter-Werkzeug, wie es im offiziellen Beispiel-Beitrag genannt wird, in der oberen Editor-Leiste ganz links.

Screenshot eines Ausschnits aus dem neuen WordPress Block-Editor, wenn der "Block hinzufügen"-Button in der oberen Editor-Leiste mit der Maus fokussiert wird.
Das Inserter-Werkzeug findest du seit WordPress 5.5 hinter dem blauen Button mit dem Plus-Zeichen.

Die zweite Möglichkeit ist, einen Block zwischen zwei bereits bestehenden Blöcken einzufügen. Wenn du einen Block ausgewählt hast, gehe mit der Maus unterhalb des Blocks in die Mitte, bis der schwarze Button mit dem Plus-Icon erscheint. Das Plus-Icon kann auch an jeder anderen Stelle mittig zwischen zwei Blöcken erscheinen.

Screenshot eines Absatzes im Block-Editor, wenn die Maus mittig zum darunter liegenden Block platziert wird und der Block-Hinzufügen-Button erscheint. Ein schwarzer Button mit einem weißen Plus.
Das Inserter-Werkzeug an der unteren Kante eines bestehenden, ausgewählten Blocks fügt diesen darunter ein.

Die dritte und einfachste Variante ist recht simpel: du musst nur Enter drücken. Dann wird automatisch der Platz für einen neuen Block geschaffen. Dies passiert ebenso, wenn du im obigen Beispiel auf das Plus-Icon drückst.

Screenshot eines Ausschnittes aus einem Beitrag, wenn ein neuer Absatz generiert wurde.
Drückst du nach einem Block die Enter Taste, erscheint der leere Platzhalter für einen neuen Block.

In der noch leeren Zeile kannst du jetzt den Block über das Plus-Icon rechts auswählen, den du einfügen möchtest. Ist dies einfach nur Text, kannst du auch direkt drauf los schreiben!

Einen anderen Block als Absatz auswählen

Wenn du etwas anderes als Text einfügen möchtest, hast du beim Inserter-Werkzeug zwei Möglichkeiten: Entweder suchst du dir deinen Block über das Fenster, was beim Klick auf das Plus-Icon aufgeht.

Screenshot des geöffneten Inserter-Werkzeugs.
Das neue Inserter-Werkzeug in WordPress 5.5 hat sich deutlich verändert.

In diesem Fenster kannst du entweder direkt nach dem Block suchen oder in einer der vorhandenen Kategorien stöbern. In WordPress 5.5 wurden die Kategorien überarbeitet und die Standard-Blöcke neu sortiert. Andere Plugins können hier auch eigene Kategorien erstellen und ihre Blöcke so kategorisieren. Die Standard-Kategorien sind:

  • Text
  • Medien
  • Design
  • Widgets
  • Einbettungen
Screenshot des Inserter-Werkzeugs mit Vorschau des Überschrift-Blocks, der über dem Inhalt schwebt.

Wenn du neue Blöcke mitten im Inhalt einfügen möchtest, erscheint ein kleines Inserter-Fenster mit einem Suchfeld und den 6 zuletzt genutzten Blöcken. Über „Alle durchsuchen“ kommst du direkt zum großen Inserter-Werkzeug.

Screenshot des Quick-Inserter-Werkzeugs, wenn das Plus-Symbol im Inhalt angeklickt wird.

Die zweite Möglichkeit Blöcke hinzuzufügen geht per Tastatur: Tippe als erstes einfach ein / (Schrägstrich) ein und dahinter direkt den Namen für den Block, z. B. /bild – beachte hier, dass du die Namen der Blöcke auf deutsch schreibst, wenn du dein WordPress auf Deutsch eingestellt hast. Sollte die Sprache deines WordPress auf Englisch eingestellt sein, musst du die englischen Begriffe verwenden, in diesem Beispiel /image.

Screenshot des Auswahlfensters, wenn im Absatz-Block ein Schrägstrich eingetippt wird.
Mit dem Schrägstrich-Kurzbefehl kannst du per Tastatur neue Blöcke hinzufügen.

Zusätzliche Blöcke aus dem Block Directory laden

Seit WordPress 5.5 ist es über das Inserter-Werkzeug möglich, direkt neue Blöcke für den Editor zu installieren. Die Suche im Inserter-Werkezug durchsucht nicht mehr nur die installierten Blöcke, sondern auch das Block Directory. Darüber kannst du direkt beim Editieren deines Beitrags oder deiner Seite neue Blöcke installieren, ohne den Editor zu verlassen.

Screenshot des Inserter-Werkzeugs, wenn nach "accordion" gesucht wird. Es werden zwei Blöcke angezeigt, die zusätzlich installiert werden können.
Es war kein Accordion-Block im Editor verfügbar, also wurde im Block Directory nach passenden Blöcken gesucht.

Über „Block hinzufügen“ kannst du direkt das dazugehörige Plugin installieren. Sobald das passiert ist, wird dir direkt der gewählte Block in deinen Beitrag eingefügt und du kannst direkt loslegen, diesen zu bearbeiten.

Die Block-Werkzeugleiste

Screenshot eines Ausschnittes, der die Block-Werkzeugleiste eines Absatz-Blocks zeigt.
Die Block-Werkzeugleiste für einen Absatz.

Die Werkzeugleiste an jedem Block ist kontextabhängig, d. h. sie stellt je nach ausgewähltem Block die entsprechenden Einstellmöglichkeiten dar. Bei allen Blöcken gleich ist das letzte Icon, die drei übereinander gesetzten Punkte: hier verbirgt sich das erweiterte Menü für den Block.

Screenshot eines Ausschnittes, dass das Fenster für das erweiterte Menü an einem Absatz-Block geöffnet zeigt.
Das erweiterte Menü findest du in der Block-Werkzeugleiste immer am Ende.

Der erste Menü-Punkt „Block-Einstellungen verbergen“ lässt die rechte Seitenleiste verschwinden. Das ist die gleiche Funktion, wie der dunkle Zahnrad-Button in der oberen Editor-Leiste. Ist die Seitenleiste ausgeblendet, heißt der Menüpunkt „Block-Einstellungen anzeigen“ und zeigt die Seitenleiste wieder an.

„Kopieren“ kopiert den ausgewählten Block in die Zwischenablage. „Duplizieren“ dupliziert den gerade ausgewählten Block und fügt ihn unter den Ursprungsblock ein.

„Davor einfügen“ erzeugt einen neuen Block vor dem ausgewählten Block. „Danach einfügen“ erzeugt einen neuen Block nach dem ausgewählten Block.

Mit „Verschieben nach“ lässt sich ein Block mit der Tastatur schnell verschieben. Es erscheint eine blaue Leiste, die die aktuelle Position anzeigt. Mit den Pfeiltasten nach oben und nach unten lässt sich diese bewegen und mit Enter wird der gewählte Block an die ausgewählte Position verschoben.

„Als HTML bearbeiten“ zeigt dir an, wie der Quelltext zu dem Block aussieht. Dies kann hilfreich sein, wenn du dich mit HTML und CSS auskennst.

Wichtig! Solltest du keine Kenntnisse in HTML und CSS haben, vermeide es die Blöcke als HTML zu bearbeiten. Es kann sonst passieren, dass der Block kaputt geht.

„Zu wiederverwendbaren Blöcken hinzufügen“ ist eine tolle Funktion, die ähnlich wie Textbausteine funktioniert. Mehr dazu findest du unter Wiederverwendbare Blöcke.

Neu seit WordPress 5.3 ist die Funktion „Gruppieren“. Damit kannst du mit einem Klick den gewählten Block in einen Gruppen-Block verschieben. Wenn sich der Block bereits in einem Gruppen-Block befindet, ändert sich der Menüpunkt zu „Gruppierung aufheben“. Damit kann die Gruppierung wieder rückgängig gemacht werden.

Mit „Block entfernen“ kannst du den ausgewählten Block komplett löschen.

Textformatierung

Mit WordPress 5.4 und 5.5 sind mehr Möglichkeiten für die Textformatierung hinzugekommen. Neben dem häufig genutzten Fett und Kursiv verbergen sich hinter dem Pfeil an allen Blöcken, bei denen du Texte eingeben kannst, weitere Textformatierungs-Optionen. Auch bei Bildern, Galerien und z. B. YouTube Videos kannst du in den Bildbeschreibungen diese Textformatierungen nutzen.

Screenshot der erweiterten Textformatierung an einem Absatz-Block.

„Durchgestrichen“, „Hochgestellt“ und „Tiefgestellt“ machen das, wofür sie stehen. „Inline-Bild“ wird beim Absatz-Block erklärt. Mit „Inline-Code“ lassen sich einzelne Wörter im Monospace-Font markieren. Seit WordPress 5.4 können auch einzelne Wörter über Textfarbe farblich hervorgehoben werden.

Eigene CSS-Klassen und HTML-Anker verwenden

Screenshot des Erweitert-Bereichs in der Seitenleiste.
An jedem Block kannst du eigene CSS-Klassen hinzufügen.

Zusätzlich zum erweiterten Menü kannst du in der rechten Seitenleiste an jedem Block unter „Erweitert“ einen HTML-Anker und/oder mehrere CSS-Klassen hinzufügen.

Mit einem HTML-Anker kannst du einen direkten Link zu einer Seite und eines bestimmten Elements setzen. Häufig wird der Anker bei Überschriften verwendet. Das Inhaltsverzeichnis am Anfang dieser Seite ist ein Beispiel für eine Liste von Links mit HTML-Ankern. Seit WordPress 5.5 kannst du an die meisten Blöcke einen HTML-Anker setzen. Nur bei dynamischen Blöcken wie dem Archive- oder Kategorie-Block ist das nicht möglich.

Bei den CSS-Klassen kannst du beliebig viele Klassen eintragen. Getrennt werden mehrere diese mit einem Leerzeichen.

Alle anderen Einstellmöglichkeiten in der Block-Werkzeugleiste erklären wir dir bei den einzelnen Blöcken, die findest du in der Übersicht der Standard-Blöcke.

Einen Block verschieben

Jeder von uns kennt das: du beginnst, einen Beitrag zu schreiben und stellst irgendwann fest, dass du die Inhalte in der Reihenfolge ändern möchtest. Auch im neuen Editor ist das Verschieben der Blöcke ganz leicht. In der Block-Werkzeugleiste findest du an zweiter Stelle immer die Pfeile nach oben und unten: damit kannst du den gewählten Block verschieben.

Screenshot der Block-Werkzeugleiste eines Absatz-Blocks.

Klickst du einmal auf einen der Pfeile, verschiebt sich der Block um eine Position nach oben oder unten. Du kannst auch einen der Pfeile gedrückt halten: dann verschwindet der Inhalt und an Stelle der Block-Werkzeugleiste erscheint ein schwarzer Button, den du an die neue Stelle positionieren kannst. Eine blaue Linie zeigt dir dabei die möglichen Positionen zwischen den Blöcken an.

Screenshot eines Absatz-Blocks, der mit der Maus verschoben wird. Der blaue Balken zeigt die aktuell gewählte Position an.

Im Gegensatz zu früheren Versionen ist die Position der Verschieben-Buttons jetzt an jedem Block gleich, egal welche Breite dieser hat.