• Skip to main content
  • Zur Fußzeile springen

Quo·28

Monologe und schlaue Links. Ein Blog.

  • Start
  • Über
  • RSS
Aktuelle Seite: Startseite / Vermischtes / Noch eine Chance für Gutenberg: So viel taugt der Spaltenblock

Noch eine Chance für Gutenberg: So viel taugt der Spaltenblock

4. Juni 2019

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.

Im Spaltenblock kann man Absätze, Bilder oder andere Blocktypen platzieren. Auch eine Verschachtelung von Spaltenblocks ist möglich.

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

Screenshot meiner Referenzenseite: ein zweispaltiges Layout, in dem sich Texte und Bilder gut aneinanderfügen.
Gestaltet sich gut: Hochformat meiner Referenzen in der iPad-Breite von 768 px.

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.

Screenshot von der Bearbeitung eines Bildblocks innerhalb des Spaltenblocks: Aufwahl der Option "Zentrieren".
Mittelweg bevorzugt: Die Ausrichtung ist wichtig für die Smartphone-Darstellung.

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

Screenshot von den Optionen des Spaltenblocks in der Gutenberg-Seitenleiste: zwei Spalten sind Grundeinstellung.
Sparsame Spalten: Der Block bietet kaum Optionen.

Ü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.

Update: 12. Juni 2022 Kategorie: Vermischtes Stichworte: WordPress

Über das Blog

Hier finden Sie Lesetipps zu Medien- und Netzthemen. Das Blog hat lange geschlummert. 2018 ist es neu an den Start gegangen.

Mehr lesen Über dieses Blog

Neu im Blog

Fußballwissen ist Herrschaftswissen

5. August 2019

Mitteilsame Männer mit enzyklopädischem Fußballwissen bedürfen nur eines Anpfiffs, und schon beginnen sie ihren Vortrag: Vereins- und Spielernamen, Jahreszahlen, Siege und Niederlagen. Ihr Wissen entstammt nicht den exakt erinnerten gesammelten Staffeln der „Sportschau“. Die Quelle der Fußballexperten ist der „kicker“, heute genauso wie in jedem Jahrzehnt davor.

Teilen und herrschen: Die Social-Media-Kampagne der Nasa

5. August 2019

Großzügig teilt die US-Raumfahrtbehörde Nasa Bilder mit der Öffentlichkeit. Das machte auch die vielen hübsch gestalteten Multimedia-Storys zum Jubiläum der ersten Mondlandung möglich.

Mehr neue Texte

  • Positive Gedanken über YouTubes Pop-up-Schilderwald
  • Googles Project Zero: Rigoros gegen Sicherheitslücken
  • Wie Dinosaurier die Furcht vor Asteroiden ausbeuten
  • Mit Gandhi gegen die Kampfmäuse-Verschwörung

Footer

Seiten

  • Allzeit beliebte Texte
  • 280 Zeichen
  • Tools
  • Seitenplan

Suche

© 2008–2023 · Quo 28 · Datenschutz · Impressum