In einer Serie von Anleitungen führen wir Sie in den neuen Standardeditor von WordPress ein. Dies ist Teil 5 unseres Block-Editor-Tutorials, in dem wir tiefer in die Blöcke eintauchen und uns mit strukturellen und komplexen Blöcken beschäftigen.

Übersicht der Serie

Teil 1: Eine Einführung in den Block-Editor
Teil 2: Dokument-Einstellungen der Beiträge und Seiten
Teil 3: Die wichtigsten Grundfunktionen und Einstellungen
Teil 4: Grundlegende Blöcke
Teil 5: Strukturelle und komplexe Blöcke (dieses Tutorial)
Teil 6: Überblick über Struktur und Inhalt
Teil 7: Wiederverwendbare Blöcke
Teil 8: Widgets

Nun wird’s knifflig! Ärmel hochkrempeln und Streichhölzer zwischen die Augen.

Wir stellen Ihnen Folgendes im Detail vor:

• Gruppe-Block (Layout-Elemente)
• Block-Map
• Spalten-Block (Layout-Elemente)
• Medien und Text-Block (Layout-Elemente)
• Cover-Block (Allgemeine-Blöcke)

Gruppe-Block

Sie können eine Gruppe nutzen, um Blöcke zusammenzufassen und somit (thematische) Abschnitte/Bereiche zu erzeugen. Das hat u.a. den Vorteil, dass Sie den gesamten Bereich einheitlich gestalten können. So lässt sich zum Beispiel eine einheitliche Hintergrundfarbe über die Block-Einstellungen des Gruppe-Blocks vergeben. Ebenso können Sie über die Block-Werkzeugleiste die Ausrichtung ändern und somit das Layout Ihren Vorstellungen anpassen.
Bei der Gestaltung und Organisation einer Seite oder eines Beitrags ergibt sich der Vorteil, dass gruppierte Blöcke als Ganzes verschoben werden können. Ein Verschieben innerhalb der Gruppe ist weiterhin möglich.
Innerhalb des Gruppe-Blocks verfahren Sie wie bisher, um Blöcke einzufügen: Sie Klicken auf das „+“ und setzen den ersten Block in die Gruppe. Weitere Blöcke können über die Enter-Taste oder die Block-Werkzeugleiste folgen.
Sie können auch im Nachhinein mehrere Blöcke zu einer Gruppe zusammenführen. Dazu markieren Sie die entsprechenden Blöcke, und nutzen das Mehr-Optionen-Bedienelement der Block-Werkzeugleiste, um die Blöcke zu Gruppieren (Abbildung 1).

Exkurs: Block-Map

An dieser Stelle ein Hinweis zur Arbeitserleichterung: Durch die Block-Map am unteren Rand des Block-Editor-Fensters erkennen Sie die Ebenen Ihrer Blöcke (Abbildung 2). Jeder Eintrag ist klickbar und navigiert direkt zu dem jeweiligen Block mitsamt seinen Einstellungen.
Als Beispiel zeigen wir Ihnen in Abbildung 2 zwei Gruppen mit dazugehöriger Block-Map. Die eine Gruppe (roter Bereich) umfasst die zweite Gruppe (schwarzer Bereich). Achten Sie auf die sich verändernde Block-Map, die Ihnen die Ebenen und Verschachtelung anzeigt.

Tipp: Über die Block-Map lassen sich schwer anklickbare Blöcke gut erreichen.

Spalten-Block

Der Spalten-Block dient zur Strukturierung Ihrer Inhalte und ermöglicht komplexe Layouts.
Haben Sie den Spalten-Block ausgewählt, können Sie innerhalb des Elements bis zu drei Spalten wählen (Abbildung 3). Anschließend haben Sie die Möglichkeit, über die Block-Einstellungen die Anzahl auf bis zu sechs Spalten pro Spalten-Block zu erhöhen.

Für unser Beispiel benötigen Sie zwei Spalten. Sobald Sie die Spaltenanzahl ausgewählt haben, legt der WordPress-Block-Editor den Spalten-Block wie eine Gruppe an, in der sich nun automatisch die einzelnen Spalten befinden. Gut zu erkennen anhand der Block-Map in Abbildung 4:

Tipp: Mit einem Klick zwischen die Spalten öffnen Sie schnell die Einstellungen des Spalten-Blocks (Abbildung 5, Punkt 1).
Mit dem zweiten Bedienelement der Block-Werkzeugleiste in Abbildung 5, Punkt 2 ändern Sie die Ausrichtung des Spalten-Blocks. Nutzen Sie für dieses Beispiel die Gesamte Breite, damit den Spalten die komplette Fensterbreite zur Verfügung stehen.

Mit Punkt 3 der Abbildung 5 können Sie die vertikale Ausrichtung in oben, mittig oder unten einstellen. Im Spalten-Block befindet sich jeweils ein + in jeder Spalte, über das Sie Blöcke nach Belieben hinzufügen können (Abbildung 5, Punkt 4).

Auf der in Abbildung 6 gezeigten Block-Map, können Sie gut die Ebenen, einer innerhalb des Spalten-Blocks angelegten Überschrift, erkennen. Über das Klicken auf den Eintrag Spalte (nicht Spalten!), kann die Block-Einstellung „Prozentuale Breite“ verändert werden.

Medien und Text

Der Block-Aufbau des Blocks Medien und Text gleicht dem Spalten-Block. Auf der einen Seite kann ein Medium und auf der anderen Inhalte in Form von Überschriften, Absätzen und vielem mehr ausgewählt werden.
Der Vorteil dieses Blocks ist die schnelle (links oder rechts) Positionierung der Medien, über die Block-Werkzeugleiste (Abbildung 7, Punkt 1).

In den Inhaltsbereich können sämtliche Blocks der Block-Bibliothek eingefügt werden.
In Abbildung 8 befinden wir uns im Inhaltsbereich des Medien und Text-Blocks – auch anhand der Block-Map erkennbar.

Zur Regulierung der „Spalten“-Breiten hilft Ihnen ein blauer Punkt an dem Rand des Medien-Breichs, der an den Inhaltsbereich grenzt (Abbildung 9).

In den Block-Einstellungen können Sie wählen, wie sich die Inhalte auf Mobilgeräten anzuordnen haben: nebeneinander oder untereinander. Zusätzlich lassen sich die Bilder zuschneiden, um somit die gesamte Spalte zu füllen.
Tipp: Vergessen Sie den Alt-Text für Ihre Medien nicht!
Hinweis: Achten Sie auf eine sinnvolle Auswahl Ihrer Blöcke! Wenn Sie zwei Bilder nebeneinander anzeigen wollen, verwenden Sie lieber die Galerie oder den Spalten-Block.

Cover-Block

Der Cover-Block ermöglicht ein spezielles Design: Nach der Auswahl des Cover-Blocks kann nicht nur eine Hintergrundfarbe, sondern eine Bild- oder Video-Datei als Hintergrund genutzt werden (Abbildung 10):

Nach Auswahl einer dieser Hintergründe werden die individuellen Block-Einstellungen des Cover-Blocks sichtbar. Nachdem Sie einen Hintergrund ausgewählt haben, wird automatisch ein Absatzblock im Cover-Block angelegt.

Die Block-Einstellungen einer Bilddatei bieten viele Möglichkeiten (Abbildung 11):

• Ein fixierter Hintergrund ermöglicht einen Scroll-Effekt. Texte in diesem Block schieben sich über das Bild. Für die Einstellung Hintergrund fixiert, kann es sinnvoll sein, die Ausrichtung des Blocks auf Gesamte Breite zu ändern.
• Eine weitere schöne Funktion bietet die Fokuspunkt-Auswahl. Mit ihrer Hilfe bestimmen Sie, welcher Teil des Bildes — unabhängig von der Bildschirmgröße — immer sichtbar ist. Diese Änderung können Sie über den Kreis oder die prozentuale Positions-Einstellung vornehmen (Abbildung 12):

• Eine Mindesthöhe des Cover-Blocks wird über die Block-Einstellungen oder über den blauen Punkt, innerhalb des Blocks am unteren Rand, festgelegt.

• Um Texte lesbarer darzustellen, können Sie einen Hintergrund farblich überlagern. Die Overlay-Farbe mitsamt der Deckkraft gibt an, mit welcher Farbe und Durchscheinkraft das Bild eingefärbt werden soll.

Die Block-Einstellungen einer Videodatei ähneln denen der Bilddatei.
Auch diesem Block liegt die Funktionsweise des Gruppe-Blocks zugrunde: Sie können nun weitere Blöcke innerhalb des Cover-Blocks anlegen.