Gutenberg – Tipps & Tricks, Teil 2: Blöcke & Spalten

Gutenberg Blöcke sind das Schlüsselelement im neuen WordPress Editor. Im folgenden findet Ihr Tipps & Tricks für die Arbeit mit den Blöcken.

Blöcke verschieben

Blöcke lassen sich von oben nach unten und theoretisch auch seitlich innerhalb einer Reihe verschieben. Schiebt man den Block seitlich, so erscheint hin- und wieder der blaue Strich an der gewünschten Stelle, allerdings ist es mir nie gelungen, den Block dort auch abzulegen.

Die einfachste Möglichkeit Zeit und Ärger zu sparen ist die Folgende. Füge eine neue Reihe mit Spalten ein und schiebe die Blöcke in der neuen Reihenfolge dorthin.

Block lässt sich nicht bearbeiten

Manchmal lässt sich ein Block in einer Spalte nicht bearbeiten. In der Regel passiert dies, wenn Du nur ein Block in einer Spalte hast. Dafür gibt es einen Trick. Füge einen neuen Block oberhalb des Blocks ein, den Du verschieben oder bearbeiten möchtest. Danach kannst Du den gewünschten Block bearbeiten. Nach dem Bearbeiten, kannst Du den überflüssigen Block wieder löschen. Ich bin sicher, dass dieser Punkt im Laufe der nächsten Gutenberg – Updates entfällt und bis dahin tricksen wir halt.

Wiederverwendbare Blöcke nutzen

Mit Gutenberg kannst Du einzelne Blöcke speichern und auf jeder beliebigen Seite wiederverwenden.

Dazu stellst Du einen Block fertig, z.B. ein Zwei-Spalter mit einem Bild links und einem Text rechts. Dann klickst Du unter ‘Mehr Optionen’ (drei vertikale Punkte) auf ‘Zu wiederverwendbaren Blöcken hinzufügen’. Wenn Du Deinen ersten Block speicherst, fügt Gutenberg den neuen Bereich ‘Wiederverwandbar’ zu der Blockauswahl hinzu (letzte Position und damit leicht zu finden).

Wenn Du etwas an diesem Block ändern willst, kannst Du dies auf jeder beliebigen Seite tun. Sagen wir, Du nutzt diesen Block auf vier Seiten. Wähle eine dieser Seiten, klicke auf bearbeiten. Dann kannst Du Deine Änderungen vornehmen. Anschließend speicherst Du den Block (WICHTIG: der Block muss separat von der Seite gespeichert werden. Mit der Speicherung passen sich auch die anderen drei Blöcke an den neuen Inhalt an.

Unterschiedliche Inhalte in wiederverwendbaren Blöcken nutzen

Solange, der Inhalt einer solchen Zeile für alle Seiten identisch ist, ist alles in Ordnung. Wenn Du jedoch, lediglich den Aufbau des Blocks oder nur Teile des Inhalts auf einer Unterseite verwenden willst, dann gibt es einen einfachen Trick:

Ich arbeite häufig mit einer Info-Zeile am Ende einer Seite. Dies ist in der Regel ein Vier-Spalter mit relevanten weiterführenden Links.

Solange, der Inhalt einer solchen Zeile für alle Seiten identisch ist, ist alles in Ordnung. Wenn Du jedoch, lediglich den Aufbau des Blocks oder nur Teile des Inhalts auf einer Unterseite verwenden willst, dann gibt es einen einfachen Trick:

Füge den wiederverwendbaren Block in Deinen Beitrag ein und klicke dann auf ‘in normalen Block’ umwandeln. Jetzt kannst Du den Inhalt ändern, ohne dass die anderen Blöcke verändert werden. Wenn Du auch diesen neuen Block mehrmals nutzen möchtest, dann speichere Ihn als wiederverwendbaren Block unter einem neuen Namen ab.

Blöcke in einem Container zusammenfügen – Atomic Blocks

Wenn Du einen wiederverwendbaren Block mit unterschiedlichen Spaltenelementen (z.B. Gesamtüberschrift und darunter vier Spalten), dann kannst Du dies mit dem Kontainer-Element ‘AB Container’ von Atomic Blocks tun.

Hintergrundfarbe für die gesamte Spalte einfügen

Wenn Du das Container-Element von Atomic Blocks benutzt, kannst Du die Hintergrundfarbe für den gesamten Kontainer festlegen.

Etwas kompliziert wird es wenn Du mit mehreren Spalten arbeitest und die Spalten unterschiedliche Hintergrundfarben haben sollen. In diesem Fall empfehle, zuerst die einzelnen Spalten in einzelnen Kontainer anzulegen und zu konfigurieren (padding / margin / Hintergrundfarbe). Dannach legst fügst Du ein Spaltenlayout an und schiebst die erstellten Kontainer in die gewünschte Spalte. Sobald die Kontainer in einer Spalte sind, ist es relativ schwierig den Kontainer zu aktivieren, um weitere Änderungen daran vorzunehmen.

Mehrere Blöcke markieren, kopieren, löschen und einfügen

Wie vieles in Gutenberg so erfordert auch das Markieren ein gewisses Fingerspitzengefühl. Setze den Kursor in den ersten oder letzten Block, den Du markieren möchtest. Sobald Du den Kursor in den nächsten Block bewegst werden der erste, zweite und jeder weitere von Dir gewählte Block vollfarbig markiert. Wenn die ersten beiden Blöcke markiert sind, ist es einfacher über die Hoch- oder Runtertaste weitere Blöcke zu markieren.

Wenn Du die Blöcke markiert hast kannst Du diese wie gewohnt über cmd+C oder Strg+C kopieren oder über delete löschen. Den kopierten Inhalt kannst Du auf jeder beliebigen anderen Seite einfügen ( CMD+V oder Strg+V).

Blöcke duplizieren

Blöcke zu duplizieren biete sich vor allem für Abstandhalter und Zwischenstriche an.

Mit Spalten arbeiten

Mit Spalten in Gutenberg zu arbeiten ist angenehm unkompliziert. Du gehst auf das Plus-Zeichen und wählst unter Layout-Elemente den Punkt ‘Spalten’ aus. Es ist wichtig zu verstehen, dass Gutenberg an dieser Stelle mit einem einzelnen Spaltenblock arbeitet. Innerhalb dieses Spaltenblocks können beliebig viele Blöcke eingefügt werden.

BEISPIEL – Gutenberg Blöcke in Spalten

Beispielfoto, Gutenberg Blöcke

Bild unten einfügen

Schwieriger ist es an die unteres Stelle einer Spalte z.B. ein Bild einzufügen. Hierfür musst Du das Bild zuerst oberhalb des unteren Blocks einfügen und dann an die gewünschte Stelle verschieben.

Wenn Du eine Spalte leer lässt, findest Du dort einen hinterlegten Text, der Dich zum Schreiben auffordert. Dieser Text kann im Backend stören. Sobald Du etwas in eine leere Spalte schreibst und dann löschst, verschwindet dieser Text.

Über den Spaltenblock steuerst Du die Anzahl der Spalten (rechte Seite). Einzelne Blöcke kannst Du beliebig bespielen und gestalten.

Einen zusätzlichen Text-Block erhälst Du, indem Du einen neuen Absatz beginnst.

Beispielfoto, Gutenberg Blöcke

Variable Spalten mit Gutenberg – CoBlocks

Ich arbeite gerne mit unterschiedlich breiten Spalten (z.B. Spalte 1: 1/3 Spalte 2: 2/3). Die Gutenberg Spalten (unter Layout-Elemente) lassen sich nicht in der Spaltenbreite varieren, so dass jede Spalte gleichgroß ist. Ich habe verschiedene block plugins für Gutenberg getestet und CoBlocks hat mich bisher überzeugt. Mit CoBlocks (unter row) ist es möglich Spalten mit unterschiedlichen Breiten in einer Reihe zu nutzen und außerdem können diese Spaltenbreiten individuell angepasst werden.


Mehr Gutenberg Tipps & Tricks:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.