Internetkurse Köln

Kommenden November feiert der Gutenberg Editor nicht nur sein Einjähriges. Wie jedes Jahr steht im November ein größeres WordPress Update an. Dabei wird WordPress 5.3 als offensichtlichste Neuerungen natürlich neue Gutenberg Funktionen liefern. Angekündigt sind der WordPress Gutenberg Gruppe Block, leichteres Verschieben von Blöcken (Drag & Drop) sowie bessere Gestaltungsmöglichkeiten für den Spalten Block. In diesem Beitrag geht es nun um die Möglichkeiten, mittels Gruppierung auf Seiten oder Beiträgen Bereiche zu gestalten.

Bemerke: Die Möglichkeit, Elemente zu gruppieren, ist bereits seit geraumer Zeit über das Gutenberg Entwickler Plugin bekannt. Die hier im Beitrag benutzten Einstellungen orientieren sich an denen des Plugins, Version: 6.5.0.

Damit die hier dargestellten Beispiele die Möglichkeiten der unterschiedlichen Breiten besser vermitteln, habe ich für diesen Beitrag die Sidebar abgeschaltet.

Der für die Beispiele verwendete Text stammt übrigens von catipsum.com. Um ihn noch schöner zu machen, habe ich ihn durch den Google Übersetzer gejagt. Hihi.

Was ist die Idee der WordPress Gruppe?

Ein einfaches Beispiel für die Idee der Gruppierung sind zwei Absätze, die eine gemeinsame Hintergrundfarbe haben sollen. Würde man ohne die Gruppierung zwei Absätze erstellen und ihnen jeweils eine Hintergrundfarbe zuweisen, würden die beiden voneinander getrennt erscheinen. Als Gruppe aber sieht das Ganze so aus:

Zwei Absätze gruppieren – so geht es

Erstellen lässt sich so eine WordPress Gutenberg Gruppe sehr schnell:

• Entweder erstellen Sie erst eine Gruppe und dann in dieser die beiden Absätze.
• Oder Sie erstellen erst die beiden Absätze, machen aus dem ersten Absatz eine Gruppe über Klick auf Mehr Optionen > Gruppierung (erreichbar über die drei vertikalen Punkte) – und ziehen dann den zweiten Absatz per Drag & Drop dort hinein.

In beiden Fällen können Sie nun die Hintergrundfarbe über die Farbeinstellungen der Gruppe bestimmen.

Alle weiteren Möglichkeiten sind dann schon etwas schwieriger. Und das hat vor allem damit zu tun, dass der WordPress Gutenberg Gruppen Block nicht allzu viele Einstellungsoptionen mitbringt. Diese wären aber – auch je nach Theme – nötig, um die im Weiteren dargestellten Ideen viel einfacher umsetzen zu können.

Per Gruppierung Bereiche erstellen

Bei der WordPress Gutenberg Gruppe geht es um nichts Geringeres als die Möglichkeit, Bereiche zu gestalten. Diese Bereiche bedeuten die Lösung des Problems, dass Blockelemente immer die volle zur Verfügung stehende Breite in Anspruch nehmen. Zwei Blockelemente können also niemals nebeneinander stehen. Blockelemente meint hier übrigens nicht explizit die WordPress Blöcke, sondern grundlegende HTML-Elemente wie Absatz oder Überschrift.

Um zwei Absätze nebeneinander erscheinen zu lassen, waren schon immer Umwege nötig. Früher (lang, lang ist das her…) nutzten Webdesigner hierfür Tabellen. Später kamen dann die DIV-Bereiche und die Möglichkeiten des CSS hinzu. Allein dies macht eine Konstruktion wie die Folgende möglich:

Katze ipsum dolor sitzen amet, renne so schnell ich kann in einen anderen Raum ohne Grund, kratze mich dort, verbringe sechs Stunden pro Tag waschen. Nickerchen den ganzen Tag, Krallen im Auge des Betrachters oder Verfolgungsjagd. Mäuse lecken. Pfoten zerstören die Couch.

Im Beispiel erhält das Bild die Einstellung align-right. Die entsprechende CSS-Definition – im Theme bereits hinterlegt – sorgt dafür, dass das Bild über den rechten Rand hinausgeht. Aber es verdrängt den Text des Absatzes, sodass dieser links vom Bild erscheint. Beziehungsweise ihn links umfließt. Die Hintergrundfarbe des Absatzes macht jedenfalls deutlich: Noch immer nutzt der Absatz die volle ihm zur Verfügung stehende Breite. In diesem Fall ist das die Breite des Contentbereiches.

WordPress Gutenberg Gruppe zeichnet DIV-Bereiche aus

Die WordPress Gutenberg Gruppe macht nun im Wesentlichen nicht viel mehr, als einen Bereich mit den HTML-Markierungen <div> </div> auszuzeichnen. Dessen Verhalten lässt sich per CSS-Definitionen bestimmen. Und damit sich das Verhalten dieses DIV-Bereiches von den vielen anderen, aus denen so eine Webseite besteht, unterscheiden lässt, erhält er die Klasse .wp-block-group.

Nun reicht ein DIV-Bereich allein aber nicht immer aus. In der Tat entstehen über die Gruppierung gleich zwei Container: Zu dem äußeren mit der Klasse .wp-block-group gesellt sich, darin verschachtelt, noch ein weiterer mit der Klasse .wp-block-group__inner-container.

Davon ist in der visuellen Bearbeitung aber nichts zu sehen! Die Blockeinstellungen zeigen nur die beiden Panels Farbeinstellungen und Erweitert. Zudem ist es noch möglich, für den Gruppen Block die Breiten alignwide oder alignfull zu wählen,

Im Hintergrund aber erstellt der WordPress Gutenberg Gruppe Block für Sie das passende HTML:

<div class="wp-block-group has-background">
<div class="wp-block-group__inner-container">
Hier folgt der Inhalt Ihres WordPress Gruppen Bereiches: Text, Bild, was auch immer...
</div></div>

Zudem bringt WordPress (beziehungsweise aktuell noch das Gutenberg Plugin) für die Gruppierung eine CSS-Definition mit. Diese bezieht sich auf die Klasse .wp-block-group.has-background und sorgt für etwas Innenabstand (padding) und keinen Außenabstand (margin) nach oben und unten:

.wp-block-group.has-background {padding:20px 30px; margin-top:0; margin-bottom:0;}

Dieses Konstrukt nutze ich nun im Rahmen von HTML Blöcken für diesen Beitrag. Schließlich kennt meine WordPress Version die Gutenberg Gruppe noch nicht. Und das Entwickler Plugin ist hier natürlich nicht installiert.

Wozu der zweite DIV-Bereich?

Die eine CSS-Definition hilft allein nur bedingt weiter. 20px Innenabstand nach oben und unten sowie 30px nach rechts und links sorgen immerhin dafür, dass der Inhalt des Containers nicht direkt am Rand klebt. Soll der Container aber zum Beispiel die weite Bereite .alignwide erhalten, Absatz und Bild aber die Contentbreite nutzen, funktioniert dies nur über den inneren Gruppen-Container.

Katze ipsum dolor sitzen amet, renne so schnell ich kann in einen anderen Raum ohne Grund, kratze mich dort, verbringe sechs Stunden pro Tag waschen. Nickerchen den ganzen Tag, Krallen im Auge des Betrachters oder Verfolgungsjagd. Mäuse lecken. Pfoten zerstören die Couch.

Durch eine zusätzliche Klasse für den inneren DIV-Bereich, ich habe ich sie .luziabsatz genannt, nutzen Absatz und Bild nun nur noch die Contentbreite. Wenn man sicher ist, dass sich zukünftig alle Gruppen so verhalten sollen, kann man die luziabsatz-Angaben für die Klasse des inneren Gruppen Containers .wp-block-group__inner-container nutzen. Ich aber gehe davon aus, dass bei mir nicht jeder Inhalt einer jeden Gruppe nur die Contentbreite einnehmen soll. Also erstelle ich für dieses Beispiel eigens eine Klasse:.luziabsatz

Wohin mit dem eigenen CSS?

So ziemlich jeder Gutenblock hat das Panel Erweitert. Darüber ist es möglich, dem Block eine zusätzliche CSS-Klasse zuzuordnen. Diese können Sie benennen, wie Sie wollen. Je spezieller, desto besser. Auf keinen Fall sollte es ein Name sein, den es bereits gibt. Es sei denn, Sie wollen genau diese bereits vorhandene Klasse benutzen. Zum Beispiel .alignwide für eine Überschrift. Eine eigene Klasse braucht aber einen eigenen Namen. Die dazugehörige Definition können Sie entweder im Rahmen des Customizers als Zusätzliches CSS oder in der style.css Ihres Childthemes ablegen.

Die zu meinem Beispiel oben gehörige eigene CSS-Definition lautet jedenfalls:

.luziabsatz {max-width:760px; margin: 20px auto;}

Diese Definition sorgt dafür, dass Absatz und Bild nur die Contentbreite nutzen. In meinem Fall sind das maximal 760px. Außerdem haben sie nun 20px Abstand nach oben und unten und richten sich automatisch nach links und rechts aus. Ohne den inneren Container der Gruppe wäre dies so nicht möglich.

Gruppierter Medien und Text Block

Will man Text und Bild etwas prominenter nebeneinander erscheinen lassen, bietet sich der Medien und Text Block an.

Ohne Gruppe und so, wie der Medien und Text Block aktuell funktioniert, kann dieser Block neben der Contentbreite auch align-wide oder alignfull sein, auf Mobilgeräten gestapelt erscheinen und über eine Hintergrundfarbe verfügen. Im folgenden Beispiel steht er auf align-wide.

Katze ipsum dolor sitzen amet. Die ganze Nacht an den Wänden pinkeln, es riecht nach Frühstück, liebe mich! Miau für das Essen, dann, wenn der Mensch den Napf füllt, nehme ein paar Bissen und miaue, die Pose perfekt, weiter, um meine Schönheit zu zeigen. Stechen Sie um vier Uhr morgens den Hintern ins Gesicht. Wecken Sie den Besitzer auf, kratzen Sie sich an den Beinen und betteln Sie um Essen.

Mit der Breite alignfull würde so ein Block also die komplette zur Verfügung stehende Breite nutzen. Dabei wäre auch sein Inhalt, Text und Bild, dann so breit. Dagegen ist grundsätzlich nichts zu sagen. Ich aber möchte, dass der Inhalt nur die weite Breite nutzt, also alignwide ist, während der Hintergrund die volle Breite einnimmt. Dabei hilft nun wieder der innere Gruppen-Bereich.

Container alignfull mit alignwide Inhalt

Katze ipsum dolor sitzen amet. Die ganze Nacht an den Wänden pinkeln, es riecht nach Frühstück, liebe mich! Miau für das Essen, dann, wenn der Mensch den Napf füllt, nehme ein paar Bissen und miaue, die Pose perfekt, weiter, um meine Schönheit zu zeigen. Stechen Sie um vier Uhr morgens den Hintern ins Gesicht. Wecken Sie den Besitzer auf, kratzen Sie sich an den Beinen und betteln Sie um Essen.

Die Gruppierung sorgt nun dafür, dass der Medien und Text Block durch zwei Container umfasst wird. In meinem Beispiel erhält der äußere Gruppen Container die Hintergrundfarbe Flieder (bei mir die Hover-Farbe), während der Medien und Text Block keine Hintergrundfarbe hat. Die zusätzliche CSS-Klasse .luzispalten für den inneren Container sorgt dafür, dass die Contentbreite als Bezugsgröße für den Medien und Text Block dient.

HTML und CSS für den gruppierten Medien und Text Block

Die HTML-Struktur für dieses Beispiel sieht nun also wie folgt aus:

<!-- Der erste Gruppen-Container nutzt alignfull und die sogenannte hover-Hintergrundfarbe #ce9fff, die ich für mein Theme so definiert habe -->
<div class="wp-block-group alignfull has-hover-background-color has-background">

<!-- Der zweite Gruppen-Container nutzt meine Klasse luzispalten -->
<div class="wp-block-group__inner-container luzispalten">

<!-- Der Medien und Text Container bekommt alignwide zugewiesen -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile has-hover-background-Color">

<!-- Es folgen Bild und Text -->
<figure class="wp-block-media-text__media"><img ...></figure>
<div class="wp-block-media-text__content">
<p>Der catipsum Text...  </p>
</div> <!-- schließt den Textbereich -->
</div> <!-- schließt den Medien und Text Container -->
</div> <!-- schließt den inneren Gruppen-Container -->
</div> <!-- schließt den äußeren Gruppen-Container -->

Das dazugehörige CSS hat folgende Definitionen:

/* Etwas Abstand nach unten für den äußeren Gruppen-Container, auch für Gruppe mit voller Breite */
.wp-block-group.has-background, .wp-block-group.has-background.alignfull {margin-bottom:2em;}

/* Die eigene Klasse luzispalten definiert den inneren Gruppen-Container: Breite so, wie im Theme für den Contentbereich vorgesehen, 50px Außenabstand nach oben und unten, automatische zentrierte Ausrichtung */
.luzispalten {max-width: 760px; margin: 50px auto;}

/* Korrektur Medien und Text Block, diese aber nur im Kontext von luzispalten: Innenabstände, damit der Text tatsächlich linksbündig im Contentbereich erscheint */
.luzispalten .wp-block-media-text .wp-block-media-text__content {padding: 2% 8% 2% 0;}

Das Vorgehen hängt auch vom Theme ab!

Mein konkretes Vorgehen bezieht sich übrigens deutlich auf die Vorgaben meines Themes. Vor allem geht es hier darum, wie es mit den Breiten umgeht. Auch die Benennung der Farben ist auf mein Theme bezogen. Wesentlich ist aber, dass eine zusätzliche Klasse vonnöten ist, soll das Ergebnis dem entsprechen, was ich hier entworfen habe.

Im Twenty Nineteen Theme wäre die Definition für die .luzispalten Klasse zum Beispiel max-width: 80%; margin: 0 10%;. Denn dies entspricht der Definition der Twenty Nineteen Contentbreite. Und hier funktioniert das Ganze übrigens auch, wenn Sie dem Medien und Text Block diese zusätzliche Klasse zuordnen. Aber auch mein Vorgehen funktioniert im Rahmen von Twenty Nineteen. Umgekehrt reicht es im Rahmen meines Themes nicht, dem Medien und Text Block die .luzispalten zuzuordnen.

WordPress Gruppe mit Spaltenblock

Auch der Spaltenblock kann gruppiert werden. Zudem kann er seinerseits auch wieder Gruppen beinhalten. Das folgende Konstrukt kommt also noch verschachtelter daher als die Beispiele zuvor.

Spring auf der Couch herum, miau ständig. Bis du etwas gegessen hast, hast du dennoch eine Menge Grummel in dir, weil du nicht vergessen kannst, mürrisch und nicht wie eine Königskatze zu sein. Ich sollte ein Gott sein, der das Essen des Besitzers isst. Schlafe den ganzen Tag. Katze ist Liebe, Katze ist Leben.

Schnurren Sie wie ein Engel, springen Sie zum Rand des Bades, stürzen Sie sich in eine verrückte Panik, um auszusteigen oder dem Besitzer den Hintern ins Gesicht zu stoßen. Meowzer, weiches Kätzchen, warmes Kätzchen, kleine Kugel aus Pelz gibt Besitzer tote Maus, schnappt Garn und kämpft mit Hund.

HTML und CSS für den Spalten Block mit WordPress Gutenberg Gruppe

Die HTML-Struktur für diesen gruppierten Spalten Block sieht wie folgt aus:

<!-- Der erste Gruppen-Container nutzt alignfull und eine Klasse für das Hintergrundbild: has-luzi-background -->
<div class="wp-block-group alignfull has-background has-luzi-background">
<!-- Der zweite Gruppen-Container nutzt die bekannte Klasse .luzispalten -->
<div class="wp-block-group__inner-container luzispalten">

<!-- Der Spaltenblock gibt alles Folgende in der weiten Breite aus -->
<div class="wp-block-columns alignwide">
<!-- Die erste Spalte beginnt -->
<div class="wp-block-column">

<!-- Der erste Gruppen-Container in der ersten Spalte nutzt Orange (#ffb205) als Hintergrundfarbe -->
<div class="wp-block-group has-background" style="background-color:#ffb205">
<!-- Der zweite Gruppen-Container macht nichts Besonderes -->
<div class="wp-block-group__inner-container">

<!-- Es folgen das Bild und der Absatz -->
<figure class="wp-block-image size-large"><img ...></figure>
<p>Text</p>
</div> <!-- Ende des inneren Gruppen Containers -->
</div> <!-- Der äußere Gruppen Container endet -->
</div> <!-- Ende der ersten Spalte -->

<!--Es startet die zweite Spalte -->
<div class="wp-block-column">
<!-- Start des äußeren Gruppen Containers, der die Hover-Farbe als Hintergrund nutzt -->
<div class="wp-block-group has-hover-background-color has-background">
<!-- Start des inneren Gruppen Containers -->
<div class="wp-block-group__inner-container">

<!-- Es folgen Bild und Absatz -->
<figure class="wp-block-image size-large"><img ..."></figure>
<p>Text</p>
</div> <!-- Ende des inneren Gruppen Containers in der Spalte -->
</div> <!-- Ende des äußeren Gruppen Containers in der Spalte -->
</div> <!-- Es endet die zweite Spalte -->
</div> <!-- Es endet der Spalten Block -->
</div> <!-- Ende des inneren Gruppen Containers, der alles umschließt -->
</div> <!-- Ende des äußeren Gruppen Containers, der alles umschließt -->

Das dazugehörige CSS

Wieder benutze ich die Klasse .luzispalten, die ich ja bereits definiert habe. Hinzu kommt nur noch die Klasse .has-luzi-background, die für das Hintergrundbild verantwortlich ist:

.has-luzi-background {background-image: url(Pfad zum Bild); background-size: cover; background-repeat:no-repeat; }

WordPress Gutenberg Gruppe: Fazit

Vieles wäre erheblich einfacher, würde der WordPress Gutenberg Gruppe Block die Option mitbringen, auf seinen inneren Container Einfluss zu nehmen, ohne hierfür an den Code heran zu müssen. Würde es so funktionieren, wie es manche Gutenblock Plugin Autoren realisiert haben, könnten Sie im Rahmen der Blockbearbeitung die innere Breite festlegen. Ich denke dabei konkret an den Editor Blocks Wrapper, den ich als den interessantesten Block dieses Sets in Erinnerung habe. Dann wäre das Vorgehen auch für Einsteiger viel leichter nachzuvollziehen.

Beitragsbilder: Britta Kretschmer