Sie haben als Webmaster die Umstellung auf den nun gar nicht mehr so neuen Gutenberg-Editor schon hinter sich? Auch ich konnte mich nun nicht mehr davor drücken.
In der breiten Perspektive ist noch nicht ganz klar, wohin mit Gutenberg die Reise geht. Im alltäglichen Umgang mit WordPress sind es oft die kleinen Features, die man sich in WordPress eingerichtet hatte, die nun nicht mehr so recht funktionieren wollen. Da ist ein wenig Detailarbeit erforderlich, um den gewohnten Arbeitsraum zu erhalten. Ein Beispiel will ich hier mit Ihnen teilen.
Die Vorschaubilder der WordPress-Galerie sind im klassischen Grid-Muster angeordnet. Wer eine Masonry-Struktur will, findet dafür viele passende Plugins. Ich bin jedoch ein Anhänger der Philosophie „keep it simple“. Was ohne Plugin einfacher geht, braucht auch kein Plugin. Und für eine Masonry-Galerie gibt es eine Lösung, die sich mit ein paar Zeilen in der Stylesheetdatei einfach realisieren lässt.
Das Prinzip
Man richtet in WordPress eine Galerie mit 1 Spalte ein. Dann lässt man aber die Vorschaubilder in eine mehrspaltige Struktur einfließen, die man mit CSS-Angaben eingerichtet hat. Alte Galerien funktionieren auch mit Gutenberg, sofern sie mit mit dem WordPress-Shortcode eingerichtet wurden.
Galerie mit Shortcode im Block „Absatz“
[gallery columns="1" link="file" size="full" ids="123,345,678,910"]
Die dazugehörigen CSS-Angaben in der style.css:
/* Galerie mit Shortcode */
.gallery {
margin-bottom: 0.9em;
}
.gallery {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 0;
-moz-column-gap: 0;
-webkit-column-gap: 0;
}
Galerie mit Gutenberg-Block „Galerie“
Gutenberg verpackt die Bilder einer Galerie in eine Liste und in neue CSS-Klassen. Wenn Sie in Gutenberg eine Galerie mit 1 Spalte erstellen, benötigen sie nun in der style.css:
/* Galerie mit Gutenberg-Block Galerie */
figure.wp-block-gallery.columns-1 {
display: block;
margin-bottom: -18px;
}
figure.wp-block-gallery.columns-1 * {
display: inline-block;
}
ul.blocks-gallery-grid {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 16px;
-moz-column-gap: 16px;
-webkit-column-gap: 16px;
}
Diese paar Zeilen sind eine schlanke Alternative zu einem Plugin. Einzige Einschränkung: Aufgrund der Spaltenlogik ändert sich der Bildfluss von „links nach rechts“ auf „von oben nach unten“.
