Wie man Gutenberg-Blöcke stylt, ohne PHP-Code zu schreiben
Für #nocode ist Gutenberg einfach noch nichts. Die Styling-Möglichkeiten für die Gutenberg-Blöcke sind eher überschaubar. Anstrengend wird es, wenn man mit einem Pagebuilder wie Elementor arbeitet und verzweifelt versucht, in Gutenberg geschriebene Blogartikel dem Elementor-Look anzupassen.
Ziel: Minimaler Aufwand, maximale Wirkung. Hohe Reproduzierbarkeit. Keine unnötigen Plugins. #nocode.
- WordPress 6.1.x (Deutsche Version)
- Hello Theme (Theme)
- Elementor & Elementor PRO 3.10.x (Plugins)
- Elementor Block for Gutenberg (Plugin)
- Pods 2.9.x (Plugin)
Ebenfalls nervig ist, dass es bei Gutenberg keinerlei Responsive-Einstellungen gibt. Man muss sich einfach blind darauf verlassen, dass das Ergebnis für alle Bildschirmgrößen funktionieren wird. Bei Elementor gibt es mittlerweile 5 Abstufungen für verschiedene Screen-Größen. Man sieht genau, was man macht und wie das Design für die verschiedenen Einstellungen aussieht. Bei Gutenberg ist nichts davon zu finden. Aber genug gemeckert.
Gutenberg-Blöcke mit eigenen CSS-Klassen anreichern
Die Gutenberg-Blöcke und -Vorlagen werden mit vorgegebenen CSS-Klassen gestylt, die in den PHP-Dateien integriert sind und nur dort geändert werden können. Anleitungen, wie man hier umsetzt, gibt es genug. Im Prinzip erweitert man die Datei functions.php.
Ich mache das aber nicht so. Generell nutze ich keine Child Themes und möchte Core-Dateien nur mit eigenen Snippets verändern, wenn es wirklich notwendig ist. Meine Arbeitsweise ist so nah am WordPress- und Elementor-Original wie möglich. Außerdem arbeite ich gern WYSIWYG.
Da ich bei meinen statischen Seiten ausschließlich Elementor nutze und nur bei Blogartikeln auf Gutenberg zurückgreife, versuche ich mit den einfachsten Mitteln klarzukommen, ohne mir Möglichkeiten zu verbauen, auch später noch schnelle Änderungen vorzunehmen.
Und am besten hat es sich für mich bewährt, individuellen CSS-Code zu schreiben. Und davon so wenig wie möglich.
Zwei Optionen für individuelle CSS-Anpassungen:
- Individuelles CSS in Elementor (nur auf globaler Ebene, nie innerhalb der Widgets) und
- Zusätzliches CSS im Customizer (nur für Gutenberg, also dem Blog).
Warum CSS-Code an zwei unterschiedlichen Orten anpassen?
Das hat einfach mit meinem Workflow zu tun. Ich möchte dort Änderungen machen, wo ich gerade arbeite. Wenn ich den Elementor-Editor angeworfen habe, was ja gern einige Sekunden dauert, möchte ich nicht zwischendrin zum Customizer wechseln müssen. Prinzipiell könnte man das aber zusammenlegen.
Im Übrigen schreibe ich trotzdem fast nie (mehr) eigenen CSS Code in Elementor, weil ich locker mit den Einstellungen auskomme, die Elementor mir out of the box bietet. Da die Features von Update zu Update immer mehr und besser werden, müsste ich rückwirkend den CSS Code entfernen. Das erspare ich mir gern.
Oder anders gesagt: Was nicht passt, muss nicht immer passend gemacht werden. Manchmal hilft es, einen Schritt zurückzutreten und eine andere Lösung zu finden. Da denkt aber sicher jeder anders.
CSS in Gutenberg – so wenig und so speziell wie möglich
Schreibt man eigenes CSS in den Customizer, muss man etwas aufpassen. Denn je nach Selektoren betreffen die Änderungen auch Teile, die mit Elementor vorbereitet wurden. Das wollen wir auf jeden Fall vermeiden.
Beispiel: Wenn ich Überschriften global über CSS im Customizer ändere (z.B. h1, h2 etc.), wirkt sich diese Änderung auf die ganze Website aus. Also auch auf die Teile, die mit Elementor erstellt sind.
Wie setzt man Custom CSS in Gutenberg ein?
Das ist relativ einfach. Ein paar Grundkenntnisse in CSS sollte man haben, aber man findet auch viele Code-Beispiele im Internet.
Bei jedem eingesetzten Block findet man rechts unter „Erweitert“ oder „Advanced“ die Möglichkeit, zusätzliche CSS-Klassen zu definieren.
Hier kann man sich ausdenken, was man möchte. Sinnvollerweise nimmt man einen eher kurzen Begriff. Zwei Wörter sind auch fein, sollten dann mit einem Minuszeichen getrennt werden.
Die CSS-Klasse setzt man nun in den Customizer unter „zusätzliches CSS“ ein und schreibt in geschwungene Klammern, was geändert werden soll. Punkt vor der Klasse nicht vergessen, sonst funktioniert es nicht.
Custom-CSS in Gutenberg einsetzen
Tipp: Gutenberg-Blöcke gruppieren
Möchtest du Kästchen mit mehreren Blöcken erstellen (zum Beispiel eine Headline und eine kurze Aufzählung), wandle die Blöcke in eine Gruppe um. Dann kannst du die CSS-Klasse genau dieser Gruppe zuordnen und hast eine schöne Trennung zum nächsten Abschnitt.
Meine Basic Styles für Gutenberg-Blöcke
Die folgenden Styles verwende ich aktuell. Du kannst sie gern kopieren und für dich anpassen.
Mein Ziel: Ich möchte, dass die Galerie einen Abstand nach oben und unten hat, ohne dass ich jedes Mal Abstandshalter verwenden muss. Genauso möchte ich Abstände bei Gruppen (gb-kasten und gb-kasten2) und vor allem bei Überschriften haben. Außerdem möchte ich, dass die Darstellung „wide“ und „full“ auch für Handys gut aussieht. Und, falls ich den Code-Block verwende, möchte ich, dass die Schrift etwas kleiner und enger dargestellt wird.
/* Gutenberg-Blog */
.gb-galerie {padding-bottom: 50px; padding-top: 50px;}
.gb-kasten {border: 1px solid grey; padding: 20px; margin-top: 40px; margin-bottom: 40px;}
.gb-kasten li {padding-bottom: 10px;}
.gb-kasten2 {background: #F7F5F0; padding-top: 40px; padding-left: 40px; padding-right: 40px; padding-bottom: 30px; margin-top: 40px; margin-bottom: 40px;}
.gb-code {background: #F7F5F0; padding-top: 40px; padding-left: 40px; padding-right: 40px; padding-bottom: 30px; margin-top: 40px; margin-bottom: 40px; font-size: 1.0rem; line-height: 1.2}
.elementor-widget-theme-post-content h2 {padding-top: 50px;}
.elementor-widget-theme-post-content h3 {padding-top: 40px;}
.elementor-widget-theme-post-content h4 {padding-top: 30px;}
.alignwide {
margin: 0 calc(50% - 640px);
max-width: 1280px;
width: 100vw;
}
.alignfull {
margin: 0 calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@media (max-width: 1280px) {
.alignwide {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
}
@media (max-width: 920px) {
.alignwide {
margin: 0;
max-width: 100%;
width: 100%;
}
}Downsides dieses Vorgehens
Ich will nicht verschweigen, dass mit dem Schreiben von Custom CSS in den Customizer auch Nachteile verbunden sind.
1. Responsiveness ist eingeschränkt
Um eine wirkliche Anpassung an alle Bildschirmgrößen zu erreichen, müsste ich noch mehr Einstellungen machen. Ich mache das nur dann, wenn es unumgänglich ist und das Design ansonsten zerschießt.
2. CSS-Styles verschwinden bei Theme-Wechsel
Wechselt man das Theme, sind die Styles weg. Aber nicht wirklich weg. Sie sind wieder da, sobald man zurückwechselt. Aber wer, wie ich, mit einem Barebone-Theme wie dem Hello Theme und einem Pagebuilder wie Elementor arbeitet, wird ohnehin nicht grundlos das Theme wechseln.
3. Suboptimale Usability für Kunden
Kunden, die ihre Blogartikel selbst schreiben möchten, müssen jedes Mal daran denken, die Klassen einzusetzen und sich die Namen merken. Hier hilft nur ein Cheatsheet.
4. Man sieht im Editor keine Ergebnisse
Erst nach dem Aktualisieren des Blogartikels kann man sich im Frontend ansehen, was man gemacht hat. Bis man also eine passable Lösung hat, geht man zwangsläufig einige Male hin und her.
Empfehlenswertes Plugin „Elementor Blocks for Gutenberg“
Prinzipiell vermeide ich es, weitere Plugins für Styling-Optionen zu installieren, wenn es nicht dringend erforderlich ist oder bestimmte Effekte von meinen Kunden gewünscht werden.
Wobei ich schon aus Recherche-Gründen fast alle großen Plugin-Suiten wie Crocoblock, The Plus Add-ons, Happy Add-ons und Premium Addons in einer Lifetime-Version besitze.
Und auch mit den diversen Plugins für Gutenberg-Blöcke habe ich mich schon auseinandergesetzt: Aber was soll ich mit 20 neuen Blöcken, die ich nie verwenden werde? Wenn ich eigentlich nur die Vorhandenen etwas aufpeppen möchte.
Das einzige Plugin, das ich tatsächlich zum Erweitern von Gutenberg verwende, ist Elementor Blocks for Gutenberg. Dieses Plugin ist von den Machern von Elementor und kann nur eine Sache: Es fügt ein Elementor Template an eine beliebige Stelle des Content-Editors von Gutenberg ein und verknüpft so die beiden Pagebuilder miteinander. Bähm! So einfach, so wirkungsvoll.
Wie man damit das Inhaltsverzeichnis-Widget von Elementor in Gutenberg integriert, habe ich schon beschrieben. Genauso geht das auch mit anderen Blöcken wie meinem „Setup“-Block weiter oben, einem Call to Action, Newsletter-Subscription und vielem mehr.
Mit diesem Plugin kann man ein nahtloses Design von Elementor und Gutenberg hinbekommen. Elemente wie Icons, globale Farben, Abstände und Rahmen kann man damit problemlos realisieren.
Immer vorausgesetzt, dass solch ein Template unverändert in verschiedenen Blogartikeln eingesetzt wird. Individuelle Blocks kann man leider weiterhin nur mit Custom CSS realisieren.