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 35 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!

Wiederverwendbar

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 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. Beim Öffnen über die obere Editor-Leiste ist rechts davon ein Vorschau-Bereich verfügbar.

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.

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.

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.

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.

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.

Eigene CSS-Klassen 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“ 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.

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.