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.

Inhaltsverzeichnis

  1. Übersicht der Standard-Blöcke
  2. Einen Block im Editor hinzufügen
    1. Einen anderen Block als Absatz auswählen
  3. Die Block-Werkzeugleiste
  4. Wiederverwendbare Blöcke
  5. Einen Block verschieben

1. Übersicht der Standard-Blöcke

2. 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 ist mit dem Plus-Zeichen im Kreis markiert. Hier in der oberen Editor-Leiste.

Die zweite Möglichkeit ist, einen Block zwischen zwei bereits bestehenden Blöcken einzufügen. Gehe mit der Maus über den Block, über den du einen neuen Block einfügen möchtest. Wenn die blaue Umrandung erscheint, gehe mit der Maus an die obere Kante der blauen Umrandung und das Plus-Icon erscheint in der Mitte.

Screenshot eines Absatzes im Block-Editor, wenn der Block mit der Maus fokussiert wird.
Das Inserter-Werkzeug an der oberen Kante eines bestehenden Blocks fügt diesen darüber 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 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 mit offenem Meistgenutzt-Tab.
Beim ersten Öffnen des Inserter-Werkzeugs werden die meistgenutzten Blöcke als erstes angezeigt.
Screenshot des geöffneten Inserter-Werkzeugs mit geschlossenem Meistgenutzt-Tab. Alle Kategorien sind sichtbar.
Alle Standard-Blöcke sind in verschiedene Kategorien eingeteilt. Hast du mindestens einen wiederverwendbaren Block erstellt, erscheint diese Kategorie ebenfalls.

In diesem Fenster kannst du entweder direkt nach dem Block suchen oder in einer der vorhandenen Kategorien stöbern. Andere Plugins können hier auch eigene Kategorien erstellen und ihre Blöcke so kategorisieren.

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.

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

„Duplizieren“ macht genau das was es sagt: es 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.

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

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“ eine oder mehrere CSS-Klassen hinzufügen. Getrennt werden mehrere CSS-Klassen 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.

4. Wiederverwendbare Blöcke

Screenshot eines wiederverwendbaren Blocks vor dem Speichern.
Du kannst jedem wiederverwendbaren Block einen eigenen Namen geben.

Dies ist ein wirklich tolles Feature, dass Gutenberg bereit hält. Du kannst einen oder mehrere Blöcke als wiederverwendbaren Block speichern. Das heißt, du legst einmal einen Block oder eine Gruppe von Blöcken an und kannst diesen mit wenigen Klicks in allen zukünftigen Beiträgen erneut einbauen, ohne alles neu tippen oder einstellen zu müssen. Jedem wiederverwendbaren Block kannst du einen eigenen Namen geben, damit du ihn schnell wieder findest.

Screenshot eines wiederverwendbaren Blocks nach dem Speichern.
Wiederverwendbare Blöcke erkennst du an der gestrichelten Linie um den Block sowie dem Doppelpfeil-Icon in der rechten oberen Ecke.

Und das Tüpfelchen auf dem i ist: du brauchst nur einen der wiederverwendbaren Blöcke zu ändern und der Block wird in jedem Beitrag angepasst, in dem er vorkommt.

Hast du einmal einen wiederverwendbaren Block eingefügt und möchtest diesen unabhängig von der bisherigen Vorlage bearbeiten, kannst du diesen Block über das erweiterte Menü in einen normalen Block umwandeln. Die Änderungen an diesem Block werden dann nicht mehr zurück gespeichert.

5. 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: Gehe mit der Maus über einen Block und du siehst links vom Block drei Elemente:

Screenshot eines Absatz-Blocks mit sichtbaren Positierungs-Elementen links vom Block.

Hast du einen Block, der die weite oder die volle Breite nutzt, sind die drei Elemente nicht links davon, sondern oben über dem Element auf der linken Seite:

Screenshot eines Galerie-Blocks mit sichtbaren Positierungs-Elementen oberhalb vom Block.

Die Pfeile bedeuten jeweils, den Block um eine Position nach oben oder unten zu verschieben.

Mit dem Punkte-Icon in der Mitte kannst du den Block mit der Maus anpacken und an eine beliebige Stelle im Beitrag verschieben. Am Ziel musst du ein bisschen probieren, wo ein blauer Balken erscheint: da kannst du die Maus loslassen und der Block wird an genau die Stelle verschoben.