Mit dem neuen WordPress-Editor lässt sich schnell ein responsives Gestaltungsraster für das Layout bauen. Ausgereift ist die Funktion aber noch nicht.
Langsam, unkomfortabel und fehlerhaft: Der neue WordPress-Editor mochte mir bei meinem ersten Test nicht gefallen. Meine Erfahrungen mit Gutenberg waren sogar so frustrierend, dass ich erst mal die Finger davon ließ. Und von diesem Blog. Denn hier sollte der Editor zum Eingewöhnen aktiviert bleiben.
Heute, ein halbes Jahr und zwei WordPress-Updates später, ist Gutenberg für mich endlich zu gebrauchen. Die Entwickler haben viele schlimme Bugs beseitigt, die das Arbeiten mit dem Blockeditor zur Qual machten. Aber es kommt noch besser.
Mit dem Spaltenblock gibt es ein Gutenberg-Feature, das sich nun tatsächlich als nützlich erweist. Seit dem WordPress-Update 5.2 von Anfang Mai funktioniert der Block auch gut in mobilen Darstellungen. Er lässt sich zum Beispiel verwenden, um ein simples Gestaltungsraster für das Layout einer Seite oder eines Blogbeitrags zu erstellen. Weitere Optionen muss man abwarten – sie sind in Entwicklung.
Gestaltungsraster mit dem Spaltenblock
Ich habe mit dem Spaltenblock gerade eine Seite mit Referenzen für meine berufliche Website gebaut. Auf ihr sind Texte und Bilder zweispaltig angeordnet, unterbrochen von anderen Layout-Elementen. Einen Designpreis gewinne ich damit nicht. Aber der Weg dorthin war um so viel einfacher als früher. Spaltensatz habe ich bisher mit Flexbox oder der betagten CSS-Eigenschaft float realisiert.
Gerade Floats sorgen für labyrinthisch verschachtelten Code. Und Flexbox-Regeln je nach Anwendungsfall zu schreiben kann mir als CSS-Autodidakten schon mal zwei Abende kosten. Mit dem Spaltenblock habe ich nun eine leicht zu bedienende grafische Benutzeroberfläche zur Hand. Die Gutenberg-Styles, die auf Flexbox basieren, bewähren sich auch in der mobilen Darstellung.
Die Breakpoints, an denen sich das Layout ändert, liegen bei 960, 782 und 600 Pixeln – je nachdem, wie viele Spalten man nebeneinandersetzt. Bei dem zweispaltigen Raster meiner Referenzenseite wirkt sich nur der Breakpoint von 600 Pixeln aus. Unterhalb dieses Werts folgen die Spalten nacheinander.
Tipp: Damit sich Bilder in der einspaltigen Smartphone-Darstellung nicht an den Rand heften, zentriert man den Bildblock, der den Inhalt einer Spalte bildet.
Bei mir funktioniert der Spaltenblock problemlos, abgesehen von einigen Usability-Schwächen. Das geht nicht allen so: Welche Bugs auftreten können, liest man auf der Gutenberg-GitHub-Seite.
Leider untauglich: der Medien-und-Text-Block
Keine Alternative bot mir für den Bau meiner Referenzenseite der Medien-und-Text-Block. Mit ihm kann man zwar Absätze und Bilder (oder Videos) kombinieren. Aber der Blocktypus ist nicht responsiv. Auf schmalen Smartphone-Screens werden die Texte neben die Medien ins Layout gequetscht.
Das macht den Block untauglich für die meisten Verwendungszwecke, die ich mir vorstellen kann. Es ist aber Absicht. Wie weit die Ideen der Gutenberg-Entwickler und die Bedürfnisse von WordPress-Anwendern manchmal auseinanderliegen, lässt sich in einer Diskussion zu diesem Problem auf GitHub nachlesen.
Warten auf die WordPress-Entwickler
Üppige Optionen bietet der Spaltenblock nicht. Man kann in der Seitenleiste lediglich die Anzahl der Spalten bestimmen. Sie lassen sich aber nicht in ihrer Breite variieren. Auch auf die Abstände zwischen den Elementen hat man mit dem Editor keinen Einfluss.
Auf weitere Möglichkeiten der Konfiguration darf man noch warten. Eine Anpassung der Spaltenbreite ist bereits in das Gutenberg-Plugin integriert. Die Erweiterung dient offenbar dem Test neuer Blocks und Funktionen, die irgendwann im WordPress-Core landen.
Wer’s eilig hat, kann einen Spaltenblock, der mehr Konfiguration erlaubt, mit einem der vielen Gutenberg-Plugins von Drittanbietern installieren. Ich habe die Atomic Blocks getestet, die einen „Advanced Column Block“ beinhalten. Das Resultat war in Ordnung. Doch ich warte lieber auf ein offizielles Gutenberg-Update, bevor ich meinen Websites wegen nur einer Funktion ein Paket von überflüssigen Blocktypen auflade.
Fazit
Gutenberg hat immer noch Macken. Aber seit seiner Integration ins WordPress-Update 5.0 hat die Entwickler-Community einiges am Editor verbessert. Nützlich ist für mich der Spaltenblock, mit dem ich einfache Gestaltungsraster anlegen kann, ohne CSS-Regeln schreiben zu müssen. Mittlerweile ist der Block responsiv. Auf mehr Optionen, etwa eine Variation der Spaltenbreite, muss man noch warten.