Von den meisten Nutzern sicherlich noch völlig unbemerkt hat die Zukunft von WordPress nicht nur bereits begonnen. Die Entwicklung von Gutenberg, dem neuen Editor, geht auch beständig weiter. Nun ist es schon eine Weile her, da ich einen ersten Blick auf die neue Beitragsbearbeitung geworfen hatte. In der Zwischenzeit ist eine Menge passiert. So bietet das System zum Beispiel nun den Gutenberg Spaltenblock, genannt Columns (experimental). Wenngleich noch als experimentell markiert, scheinen diese Columns ein interessantes Gestaltungselement für Seiten zu sein. Meine ersten Versuche haben jedenfalls Lust auf mehr gemacht.
Dem Folgenden liegt die Gutenberg Plugin Version 2.4.0 im Rahmen von WordPress 4.9.4 und dem deutschen Theme Maxwell (1.4.2) zugrunde.
Gutenberg und seine Gutenblöcke
Blöcke (oder wie ich zu meinem Vergnügen las: Gutenblocks) gibt es bei Gutenberg mittlerweile schon eine ganze Menge. Sie sind aufgeteilt in Common (10), Formatting (7), Layout Elements (5), Widgets (3) und Embeds (34). Dabei erscheint die Zuordnung für mich zum Teil noch immer verwirrend. Warum zum Beispiel finden sich Pullquotes und Verses im Gegensatz zu Quotes (Common) im Bereich Formatting? Zwei von ihnen ergeben blockquotes, die Verses werden als pre ausgegeben. Alle drei haben eine eigene CSS-Klasse. Daraus lässt sich für mich kein entscheidender Unterschied ableiten, der die Zuordnung erklären würde.
Neu jedenfalls ist seit Version 2.2.0 der Gutenberg Spaltenblock. Und der ist als Columns (experimental) genauso wie der Text-Spaltenblock passenderweise unter den Layout Elementen zu finden.
Gutenberg Spaltenblock als Gestaltungselement
Die meisten Gutenblöcke dienen der vertikalen Anordnung von einzelnen Elementen wie Absätzen, Überschriften, Listen etc.. Ich hatte ja schon mal vermutet, dass die Bezeichnung Block abgeleitet sein könnte von den Blockelementen im HTML-Sinn. Die nehmen sich die gesamte zur Verfügung stehende Breite und können nicht nebeneinander stehen.
Die Blockausrichtung, die einzelnen Blöcken zur Verfügung steht, sorgt dafür, dass sie dann doch nebeneinander erscheinen. Sie gibt dem Block eine CSS-Klasse, die dafür sorgt, dass das Element links oder rechts über einem anderen Blockelement schwebt. So auch zu sehen in Beispiel (1): Das Bild der Pinguine schwebt über dem Absatz. Dessen hellgraue Hintergrundfarbe zeigt, dass der Absatz tatsächlich die komplette zur Verfügung stehende Breite nutzt. Die Blockausrichtung des folgenden Absatzes als aligncenter sorgt dafür, dass dieser nun nicht mehr neben dem Bild, sondern darunter erscheint.
In Beispiel (2) kommt nun erstmals der Gutenberg Spaltenblock zum Einsatz. Dessen Einstellungsoptionen sind (noch?) sehr überschaubar. Aktuell kann man hier nur die Anzahl der Spalten festlegen und eine eigene zusätzliche CSS-Klasse vergeben. Der experimentelle Spaltenblock an sich erscheint auf der Seite als DIV-Bereich mit der Klasse .wp-block-columns.has-2-columns (oder .has-3-columns, je nach Einstellung) und lässt sich so schon mal entsprechend anpassen. In meinem Beispiel habe ich für die vorhandene Klasse nur die Hintergrundfarbe definiert. Die Abstände der beiden Spalten zueinander und zum Spaltenrand lassen sich regeln über deren jeweilige Klassen .wp-block-columns .layout-column-1, .wp-block-columns .layout-column-2.
Mehr Formatierung für den Spaltenblock
Damit so ein Gutenberg Spaltenblock dann nicht nur auf dem Desktop, sondern auch auf mobilen Geräten gut aussieht, braucht es zudem entsprechende CSS-Angaben. Im Moment liefert Gutenberg in dieser Hinsicht nicht viel bis gar nichts. Das kann sich aber alles zukünftig ändern, wenn Themes für diese Klassen Definitionen liefern. Ungefähr so, wie sie schon jetzt Vorgaben für das Verhalten von zum Beispiel alignleft und alignright liefern. Weil es diese Klassen ja auch schon lange gibt.
Ein Gutenberg Spaltenblock kann also auch als Dreispalter daherkommen (siehe Beispiel (3)), der über seine eigene Klasse (.has-3-columns) zum Beispiel eine andere Hintergrundfarbe zeigen kann als der Zweispalter. Oder man gibt einem zweiten Zweispalter eine zusätzliche Klasse (zum Beispiel .hintergrundbild), die dann (Überraschung!) für das Hintergrundbild sorgt (Beispiel (5)). Mit .wp-block-columns.has-2-columns.hintergrundbild.layout-column-1 lässt sich so auch der Hintergrund des Textblocks in der ersten Spalte ansprechen und halb-transparent machen.
Das alles ist besonders dann interessant, wenn man eine Seite plant, die mehrere dieser Zweispalter untereinander zeigt. Wenn die nicht alle gleich aussehen sollen, bekommen sie eben eigene zusätzliche CSS-Klassen. Deren Definitionen Sie alle (ebenso wie die vorgenannten) im Zusätzlichen CSS des Themes unterbringen können.
Und da war dann noch der Text-Spaltenblock
Relativ ähnlich verhält es sich übrigens auch mit dem schon etwas länger vorhandenen Text-Spaltenblock – siehe Beispiel (4). Auch der produziert einen DIV-Bereich mit einer eigenen Klasse, die die in den Einstellungen gewählte Spalten-Anzahl berücksichtigt. Und auch hier ist es möglich, die einzelnen Textspalten getrennt voneinander per CSS zu formatieren. In meinem Beispiel könnte die zweite Spalte auch eine anders gefärbte vertikale Linie zeigen. Dass sie überhaupt eine zeigt, liegt an meiner Definition für .wp-block-text-columns .wp-block-column:last-child
Weitergehende Formatierung über die Einstellungen der Text-Spaltlenblöcke, wie sie beim normalen Textblock angeboten wird, gibt es auch hier nicht. Das allerdings ist auch gut so. Denn zu viel sogenanntes Inline-CSS (also alles, was im style-Attribut des jeweiligen HTML-Elementes steht) ist nicht wirklich hilfreich. Weshalb ich ja schon dafür plädiert habe, die Formatierungsoptionen für einfache Textblöcke doch besser gar nicht erst anzubieten. Oder – wie auch immer realisiert – dafür zu sorgen, dass sie im Zusätzlichen CSS des Themes erscheinen.
Wer gehört zur Zielgruppe des Gutenberg Spaltenblocks?
Bleibt die Frage, für wen dieser experimentelle Spaltenblock eigentlich gedacht ist. Wobei ich mir diese Frage auch grundsätzlich stelle: An welchen Nutzerkreis denken die Gutenberg-Entwickler?
Ursprünglich hieß es mal, WordPress soll leichter, intuitiver werden. Also haben sie wahrscheinlich Menschen vor Augen, die mit wenig Vorkenntnis schnellstmöglich so viel wie möglich erreichen wollen. Am anderen Ende der Fahnenstange gibt es aber auch jene Nutzer, die sich eigene Blöcke programmieren wollen. Die sollen sich wie Theme- und Plugin-Entwickler von dem Konzept natürlich auch angesprochen fühlen. Bleiben noch alle Nutzergruppen irgendwo zwischen diesen Einsteigern und den Vollprofis. Auch die sollen sich in Gutenberg wiederfinden. Oder zumindest mit Gutenberg anfreunden können. Läuft es also darauf hinaus, dass die Antwort auf meine Frage nach der Zielgruppe gar »Alle!« lautet?
Alle werden jedenfalls kaum mit dem Spaltenblock glücklich und zufrieden sein. Zumal ich hier ja noch nicht mal gezeigt habe, wie unübersichtlich und schlimm das Ganze in der Bearbeitung tatsächlich aussieht. Drei oder gar vier Spalten nebeneinander sind da kaum mehr zu überschauen. Und damit es im Frontend überhaupt brauchbar daherkommt, sind (zumindest aktuell) grundlegende CSS-Kenntnisse vonnöten.
Fazit
Trotz dieser Meckerei muss ich zugeben: Ich kann mit dem bisherigen Stand der Gutenberg-Dinge durchaus was anfangen. Und nachwievor bin ich gespannt auf alles, was da noch kommen mag. Vieles wäre wünschenswert! Stellen wir uns vor, es gäbe neben dem Latest Posts Widget so eine Art Selected Posts Widget. Mit dem ließe sich eine bestimmte Auswahl an Beiträgen darstellen. Sagen wir: die aktuellsten drei (vier, fünf etc.) Beiträge der Kategorie y, darzustellen als Excerpt mit anklickbarem Titel und Beitragsbild. Das in Kombination mit diesen Spaltenbereichen… könnte wahrscheinlich nicht nur mir gefallen!
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar