Internetkurse Köln

Lange ist es her, seit ich hier das letzte Tutorial veröffentlicht habe. Viel ist passiert seither, was jetzt aber nicht das Thema sein soll. Das Thema dieses Tutorials ist vielmehr der neue WordPress Rasterblock.

Der ein oder die andere mag ihn seit dem WordPress 6.6 Update noch gar nicht entdeckt haben. Und selbst wenn, mag vielleicht noch gar nicht klar sein, wozu dieser neue Block nun gut soll sein. Andere wiederum freuen sich, dass WordPress mit diesem Rasterblock endlich die CSS Grid Technik auch für die Gestaltung von Inhalten auf Seiten zur Verfügung stellt.

So oder so schauen wir uns diesen neuen Block mal etwas genauer an und grenzen ihn von den anderen Arten der Gruppierung ab.

Ein alter Block mit nun vier Optionen: die Gruppe

Den Gruppeblock gibt es schon lange. Er gehörte mit zu den wesentlichen Elementen, die mit dem Gutenbergeditor in die WordPress Welt eingezogen sind. So wundert es auch nicht, dass ich meinen ersten Beitrag über den Gruppeblock bereits vor fünf Jahren geschrieben habe.

Geändert hat sich seither eine ganze Menge. So bietet WordPress mit dem Gruppeblock mittlerweile auch den Zugriff auf den Zeilen-, den Stapel- und nun auch auf den Rasterblock. Diese drei Blöcke lassen sich aber auch direkt über /Zeile, /Stapel und /Raster erstellen.

Wofür ist der Gruppeblock gut?

Der Gruppeblock beziehungsweise das Gruppieren von mehreren Elementen sorgt dafür, dass alle Elemente innerhalb dieser Gruppe mit DIVs umschlossen werden. DIV steht dabei für Devision. DIV sorgt also für einen abgetrennten Bereich, der mit CSS formatiert werden kann. Man spricht auch vom DIV-Container.

DIV ist kein semantisches Element. Das bedeutet, dass ein mit dem HTML-tag <div></div> definierter Bereich keinen Hinweis auf seinen Inhalt bietet. Allein die ID oder die Klasse eines DIVs kann diese Auskunft liefern (zum Beispiel <div class="info"> oder ähnliches). Demgegenüber gibt es semantische Elemente wie <header></header> oder <article></article>, die ihrerseits der Gruppierung von Inhalten dienen, dabei aber über ihren Namen aussagen, wofür sie gut sind.

Der Gruppeblock nutzt übrigens die Breite, die Sie ihm zuordnen. Die Gruppe ist also entweder nur so breit wie der Contentbereich Ihres Themes – oder er nutzt die weite Breite oder die volle Breite. WordPress bietet überdies die Einstellungsoption, wie breit der Inhalt einer Gruppe sein soll. Soll sie dem vordefinierten Contentbereich entsprechen oder sich an der Breite des DIV-Containers orientieren? Sie haben die Wahl.

Eine Einstellung für zwei oder mehrere Gruppeblöcke nebeneinander bietet WordPress nicht. Für diesen Einsatz dient der WordPress Zeile-Block.

float – ein auslaufendes Modell

Dabei war dieses Nebeneinander von DIVs mal die ursprüngliche Idee hinter allem. Denn mit dem DIV-Element kam die CSS-Definition des float: left/right;.

Bevor es das gab – und zu der Zeit habe ich angefangen, HTML zu lernen -, war es nur sehr umständlich möglich, zum Beispiel zwei popelige Absätze nebeneinander auszugeben.

Grundsätzlich ist das heute auch noch so. Ein Absatz <p></p> zum Beispiel ist ein sogenannter flow content. Das bedeutet, dass solche Elemente immer die volle zur Verfügung stehende Breite nutzen. Also vom linken Rand des Browserfensters bis zum rechten. Egal, wie breit das Fenster ist.

Dennoch gab es Webseiten, auf denen Blockelemente nebeneinander erschienen. Und dafür mussten Tabellen herhalten. Webseiten bestanden damals aus nichts anderem als einer Vielzahl ineinander verschachtelter Tabellen!

Seither sind es die Vielzahl ineinander verschachtelter DIV-Container. Nur nutzen die heute kaum noch die Option des Schwebens. Denn nichts anderes bedeutet float. Da schwebt immer ein Element neben dem anderen. Zum Beispiel ein Bild neben einem Absatz. Allerdings nutzt der Absatz dabei noch immer die volle Breite, allein sein Inhalt (der Text) wird durch das floatende Bild verdrängt.

Das klingt kompliziert? Ja, das ist es auch. Und deshalb ist es gut, dass heutzutage eigentlich nur noch Bilder floaten. Und dass es für alles andere Nebeneinander andere Lösungen gibt.

Zeile- und Stapel-Block sind flexibel

So sehr sich eine Zeile auch von einem Stapel unterscheidet, sie haben doch eines gemeinsam: Sie dienen der Gruppierung. Allerdings haben sie mit der Gruppe nur gemeinsam, dass sie ihre inneren Elemente mittels <div></div> zu einem Bereich zusammenfassen.

Zeile- und Stapelblock nutzen im Gegensatz zur Gruppe nämlich die CSS-Technik der Flexbox. Das macht die Sache nicht viel einfacher, dafür aber – wie der Name schon verrät – viel flexibler.

Mit den CSS-Definitionen für display: flex; ist es möglich, die einzelnen verschachtelten Elemente (die sogenannten Flex-Items) nebeneinander (oder untereinander) auszurichten. Dabei nutzt so ein Flex-Konstrukt mit seinen Items immer die Möglichkeiten des darstellenden Geräts.

Diesen Effekt kennen Sie. Wann immer Sie eine Hauptnavigation (Menü) sehen, dass sich über zwei Zeilen erstreckt, statt in nur einer Zeile zu erscheinen, handelt es sich wahrscheinlich um eine Flexbox, die sich den Möglichkeiten Ihres Gerätes angepasst hat.

Flexbox im Einsatz

Und das ist halt auch einer der Haupt-Einsatzbereiche für Zeilenblöcke: die Navigation. Aber auch für Informationen wie die Meta-Angaben, von wem der Beitrag stammt und wann er veröffentlicht wurde, ist der Zeile-Block gerade der richtige Kandidat.

Die genannten Einsatzbereiche haben nun aber nichts mit der Erstellung von Seiten oder Beiträgen zu tun. Vielmehr sprechen wir hier vom Full Site Editing und dem Arbeiten an Block Themes.

Dennoch kann es vorkommen, dass Sie auch im Rahmen inhaltlicher Arbeit einzelne Elemente in einer Zeile ausgeben wollen. Sagen wir, vier Bilder. Und weil es Ihnen gefällt, wollen Sie, dass diese vier Bilder auf Tablets in umgekehrter Reihenfolge und auf kleinen Geräten als Stapel erscheinen.

Flexbox kann so was. Allerdings wird ein Konstrukt wie das Folgende ohne Ihr weiteres Zutun auf allen darstellenden Geräten immer nur diese vier Bilder nebeneinander in genau dieser Reihenfolge zeigen.

Anders sieht es mit ein wenig zusätzlichem CSS aus.

Dafür vergeben Sie der Flexbox eine eigene Klasse. Das funktioniert sehr unkompliziert über das Panel Erweitert in der rechten Seitenspalte.

Ich habe meine Zeile als das benannt, was sie ist: zeile.

Die Benennung der Klasse beginnt hier übrigens nicht mit dem Punkt, den sie im Rahmen des CSS-Stylesheets als solche kennzeichnet.

CSS für den WordPress Zeile-Block

/* Der Zeile-Block auf Desktop-Rechnern mit umgekehrter Reihenfolge der Flex-Items: */
.zeile {
 flex-direction: row-reverse; }

/* Der Zeile-Block auf Tablets mit Flex-Items in originaler Reihenfolge */
@media screen and (max-width: 1024px) {
.zeile {
 flex-direction: row;
}
}
/* Der Zeile-Block auf Smartphones als Stapel */
@media screen and (max-width: 600px) {
.zeile {
flex-direction: column;
}
}

Je nachdem mit welchem Gerät Sie diesen Beitrag lesen, sehen Sie nun entweder die Bilder in umgekehrter Reihenfolge. Oder Sie sehen dasselbe wie oben. Oder die Bilder erscheinen als Stapel untereinander.

Der neue WordPress Rasterblock

Mit dem Rasterblock bietet WordPress nun endlich das, was bislang noch fehlte: die Option, Elemente im Rahmen eines sehr flexiblen Rasters auszugeben.

Dahinter steht eine weitere CSS-Technik, sie nennt sich Grid. Grid, das steht für Netz. Denn tatsächlich ist der Rasterblock genau das, ein Netz aus Linien. Dass so ein Netz dann mehr aussieht wie eine Tabelle, ist auch der Grund, warum ich auf die Idee gekommen bin, mit dem WordPress Rasterblock ein Bild im Mondrian-Style nachzubauen. Aber dazu später.

Als Erstes geht es darum, zu verstehen, was dieses Grid / Raster von einer herkömmlich Gruppe oder der Zeile / dem Stapel unterscheidet. Um das zu illustrieren, schauen wir uns noch einmal die 1, 2, 3, 4 Bilder an.

Auf großen Geräten soll das erste Bild nun in einer Reihe groß erscheinen, die weiteren drei Bilder nebeneinander in einer zweiten Reihe. Der Absatzblock mit lila Hintergrund macht die dritte Reihe aus.

Auf Tablets hingegen hätte ich es gerne anders: Nun soll der Absatzblock in der der ersten Zeile rechts neben dem großen ersten Bild erscheinen. In der Zeile darunter dann wieder die Bilder 2, 3 und 4 nebeneinander.

Und auf Smartphones sollen es zwei Reihen mit je zwei Bildern sein. Dazwischen allerdings, über beide Spalten ausgedehnt, soll sich der Absatz zeigen.

Vier Bilder und ein Absatz im Rasterblock

Was hier auf den ersten Blick aussieht wie eine WordPress Galerie mit einem Absatz darunter ist tatsächlich ein Rasterblock. Mit einem Galerieblock (Flexbox!) und einem Absatzblock würde das Ganze so aber auch nicht funktionieren.

Als Rasterblock hingegen und einmal grundsätzlich verstanden, dass man jedes Item als grid-area definieren und dann auch positionieren kann, ist das Ganze so machbar.

Zusätzliches CSS für den WordPress Rasterblock

WordPress bietet für den Rasterblock allerdings (noch?) keine derartigen Einstellungsoptionen. Für solche Konstrukte braucht es definitiv zusätzliches CSS. Und dafür habe ich jedem Bild und dem Absatz erst einmal eine eigene Klasse gegeben: bild1, bild2, … und rastertext.

Das CSS, das für die Effekte der Neusortierung der 1, 2, 3, 4 Bilder sorgt, lautet:

/* Die vier Bilder und der Absatzblock mit ihren fünf Klassen werden zu grid-areas und lassen sich im Folgenden so ansprechen */
.bild1 {grid-area: item1;}
.bild2 {grid-area: item2;}
.bild3 {grid-area: item3;}
.bild4 {grid-area: item4;}
.rastertext {grid-area: item5;}

/* Anordnung der einzelnen grid-areas auf großen Geräten. Die Werte für die grid-template-areas verdeutlichen das grundlegende Raster aus drei Spalten und drei Zeilen */
.raster
{
grid-template-areas: 
'item1 item1 item1' 
'item2 item3 item4'
'item5 item5 item5';
}

/* Anordnung der einzelnen grid-areas auf Tablets. Die Angaben für den rastertext sorgen für die Ausdehnung des Absatzes über eine Spalte und zwei Zeilen. */
@media screen and (max-width: 1024px) {
.rastertext {
grid-column: span 1 !important;
grid-row: span 2 !important;
align-content: center;
}
.raster
{
grid-template-areas: 
'item1 item1 item5'
'item1 item1 item5'
'item2 item3 item4';
}
}

/* Anordnung der einzelnen grid-areas auf Smartphones. Der repeat-Wert für die Eigenschaft grid-template-columns macht aus dem 3-Spalter einen 2-Spalter */
@media screen and (max-width: 600px) {
.rastertext {
grid-column: span 2 !important;
grid-row: span 1 !important;
align-content: center;
}
.raster
{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-areas: 
'item1 item2'
'item5 item5'
'item3 item4';
}
}

Auch Block Themes bieten übrigens eine Ablage für zusätzliches CSS. Diese finden Sie über Design > Website-Editor. Wählen Sie dort zur Bearbeitung die Stile aus. Zugang zum zusätzlichen CSS erhalten Sie über die Mehr-Option (die drei vertikalen Punkte oben rechts) oder ganz unten in der rechten Seitenspalte.

Den WordPress Rasterblock mit Mondrian verstehen lernen

Weil der Rasterblock auf den ersten Blick sehr viel von einer Tabelle hat (diese aber keineswegs ist!!), kam ich auf die Idee, eine gute alte HTML-Übung heranzuziehen. Denn als die Online-Welt noch aus Unmengen an Tabellen bestand, galt es, die Arbeit damit besser verstehen zu lernen, indem man Kunst nachbaute. Und diese Kunst stammt von Piet Mondrian.

1. Das Raster mit dem WordPress Rasterblock erstellen

Als Erstes erstellen Sie einen Rasterblock. Der einfachste Weg ist es, in eine leere Zeile /raster einzugeben. Oder Sie klicken auf das Pluszeichen am Ende der leeren Zeile und suchen dann nach Raster.

WordPress liefert den Rasterblock immer mit dem Typ Automatisch aus. Wir aber wollen den Typ Manuell. Die Einstellung hierfür finden Sie in der rechten Seitenspalte. Dort stellen Sie auch ein, aus wie vielen Spalten der Rasterblock bestehen soll. Für das Bild im Mondrian-Style braucht es drei Spalten. Schließlich legen Sie für den Rasterblock noch Schwarz als Hintergrundfarbe fest.

Die einzelnen »Zellen« des Rasters entstehen, indem Sie als Items Absatzblöcke nutzen und diesen erst einmal Weiß als Hintergrundfarbe geben. Für die Verteilung der Items sorgt der WordPress Rasterblock übrigens selbst: Mit jedem vierten Item entsteht eine neue Reihe im Raster.

Zwölf Items braucht es insgesamt. Denn das Werk im Mondrian-Style besteht nur oberflächlich betrachtet aus nur sieben Farbflächen. Wenn man es sich genauer anschaut, wird klar, dass diesen ein Raster von zwölf Items zugrunde liegt.

Und wenn wir noch genauer werden wollen, dann sollten wir nicht länger von einem Raster aus zwölf »Zellen« sprechen. Denn bei einem Grid geht es nie um die »Zellen«, sondern immer um die Linien!

Deutlicher wird dies im nächsten Schritt, dem Ausdehnen einzelner Items.

2. Einzelne Items über Spalten oder Reihen ausdehnen

Anders als bei einer Tabelle, bei der Sie mehrere Zellen miteinander verbinden können, geht es beim Grid Layout darum, einzelne Items über mehrere Spalten und / oder Reihen auszudehnen. Orientierung bieten dabei die horizontalen und vertikalen Linien des Rasters.

Das bedeutet vor allem, dass Sie mit jedem Item, das Sie ausdehnen, die nächsten Items im Grid verdrängen. Sie verschwinden nicht wie beim Verbinden von Tabellenzellen. Sie suchen sich einfach den nächsten freien Platz im Raster!

Allein für diese Erkenntnis ist diese Übung schon Gold wert.

Am Ende dieses Prozesses werden Sie feststellen, dass von den ursprünglichen zwölf Absatzblöcken als Items des Rasters nur noch sieben übrigbleiben. Ihr Raster aber besteht noch immer aus denselben Linien, die Platz für zwölf Items bieten.

Das muss man sich erst einmal auf der Zunge zergehen lassen. Und das ist auch eine wichtige Erkenntnis für die CSS-Bearbeitung des Grids im Mondrian-Style.

Denn das vorübergehende Ergebnis mag noch nicht wirklich überzeugen:

3. Mit CSS für die passende Ausgabe sorgen

Um den Mondrian-Rasterblock per CSS konkret ansprechen zu können, geben Sie ihm am besten eine eigene Klasse. Passend erscheint hier mondrian.

Allzu viel zusätzliches CSS braucht der Möchtegern-Mondrian gar nicht. Hier gilt es nicht, Reihenfolgen von Items zu verändern. Eigentlich geht es nur darum, die Breiten der Spalten und die Höhen der Zeilen zu modifizieren und letztere für kleine Smartphones anzupassen.

Wieder zeigt das CSS, um welche Art von Raster es geht. Die Werte für die Eigenschaften grid-template-columns und grid-template-rows verdeutlichen, dass wir es hier immer noch mit drei Spalten und vier Reihen zu tun haben.

align-items: stretch; sorgt dafür, dass die inhaltslosen Absatzblöcke tatsächlich die volle Breite und Höhe nutzen, die grid-template-columns und grid-template-rows vorgeben.

.mondrian
{
grid-template-columns: 20% 50% auto !important;
grid-template-rows: 100px 200px 50px 120px !important;
align-items: stretch;
}

/* Sofern das Theme Padding für Gruppen und Absätze mit Hintergrundfarbe vorsieht */
.mondrian p.has-background, .mondrian.has-foreground-background-color 
{
padding: 0 !important;
}

/* Anpassung für Smartphones, auf denen das Bild sonst zu hoch erscheinen würde */
@media screen and (max-width: 600px) {
.mondrian
{
grid-template-rows: 80px 100px 30px 70px !important;
}
}

Ein WordPress Rasterblock im Mondrian-Style

Im Ergebnis gleicht das Raster doch sehr seiner Vorlage, oder?

Bei allem ist natürlich klar: Es muss nicht immer Kunst sein. Aber Kunst kann schon dabei helfen, die vielfältigen Einsatzmöglichkeiten des neuen WordPress Blocks verstehen zu lernen.

Üblicher für den Einsatz sind sicherlich diese Bereiche voller Kästen für »Unser Team« oder »Unsere tollsten Angebote«. Und dafür reichen die Einstellungsoptionen von WordPress für seinen Rasterblock wahrscheinlich aus. Aber nun, da WordPress das Arbeiten mit Rastern auf einzelnen Seiten oder Beiträgen bietet, macht es natürlich auch viel Sinn, sich deren Möglichkeiten mal etwas genauer anzusehen.

Wer tiefer in die vielfältigen Möglichkeiten des Arbeitens mit Grids einsteigen möchte, seien die Angebot von SelfHTML und der W3schools empfohlen.

Update: WordPress Rasterblock mit Bild

Inzwischen habe ich noch einen weiteren Grid-Test gestartet. Diesmal ging es um einen Rasterblock mit Bildern. Also ein in zig Kacheln zerlegtes Bild, das im Rahmen des Rasterblocks als Einheit erscheint, wobei aber einzelne Items auf Hover / Touch reagieren. Konkret reden wir hier von einem Grid mit Katze, die einem beizeiten zuzwinkert oder die Zunge rausstreckt.

Veröffentlicht habe ich das Ganze mitsamt einer Kurzanleitung auf meinem FSE-Testblog: Grid mit Katze.