Global Styles sind eine der Funktionen, die in GenerateBlocks sehr mächtig sind, aber anfangs schnell verwirren. Im ursprünglichen Gemini-Material tauchten mehrere typische Fragen nacheinander auf: Wie überträgt sich ein Global Style auf andere Objekte?, wie ändere ich einen bereits verwendeten Global Style? und wo speichere ich die Änderung?
Der Schlüssel zum Verständnis ist einfach: Ein Global Style ist im Grunde eine wiederverwendbare CSS-Klasse. Du definierst einen Stil einmal und weist ihn mehreren Blöcken zu. Änderst du später die zentrale Definition, reagieren alle Blöcke, die diesen Stil verwenden.
1. Was ein Global Style technisch macht
Die aktuelle GenerateBlocks-Dokumentation beschreibt Global Styles als Sammlung global geladener CSS-Klassen. Der Name eines Styles wird zu einer gültigen CSS-Klasse und kann an mehreren Stellen der Website verwendet werden.
Das hat zwei große Vorteile:
- Du musst dieselben Farben, Abstände und Typografie nicht an jedem Block einzeln einstellen.
- Eine zentrale Änderung kann alle verwendenden Elemente gleichzeitig aktualisieren.
2. Beispiel: Karten-Style
Angenommen, du hast auf zehn Unterseiten jeweils einen Container für eine Infobox. Statt bei jeder Box separat Hintergrund, Padding, Radius und Schatten einzustellen, erstellst du einen Global Style, zum Beispiel:
infobox-standard
Dieser Style enthält beispielsweise:
- 24 px Innenabstand
- hellgrauen Hintergrund
- 12 px Border-Radius
- dezenten Schatten
Alle zehn Boxen bekommen denselben Global Style. Änderst du später den Radius von 12 auf 0 Pixel, ändern sich alle zehn Boxen.
3. Global Style direkt an einem Block erstellen
GenerateBlocks bietet laut aktueller Dokumentation zwei grundlegende Wege zum Erstellen. Der erste Weg beginnt direkt am Block. Im Bereich für Styles kannst du einen Namen eingeben und einen neuen Global Style erstellen.
Der Vorteil: Wenn du den Style direkt aus einem ausgewählten Block erzeugst, wird er diesem Block unmittelbar zugewiesen.
4. Global Style über die GenerateBlocks-Seitenleiste erstellen
Der zweite Weg führt über die GenerateBlocks-Seitenleiste im Editor. Dort kannst du einen Global Style unabhängig vom aktuell ausgewählten Block anlegen.
Wichtig: Ein dort angelegter Style wirkt nicht automatisch irgendwo. Er existiert zunächst nur als zentrale Style-Definition und muss anschließend den gewünschten Blöcken zugewiesen werden.
5. Warum sich ein Style nicht „automatisch auf alle gleichen Blöcke“ überträgt
Das war eine zentrale Unsicherheit im ursprünglichen Chat. Ein Global Style erkennt nicht automatisch, dass zwei Container ähnlich aussehen. Nur weil zwei Blöcke dieselbe Hintergrundfarbe besitzen, sind sie nicht miteinander verknüpft.
Die globale Wirkung entsteht erst dadurch, dass beide Blöcke denselben Style verwenden.
6. Lokale Einstellungen und Global Style können zusammenwirken
Ein Block kann einen Global Style besitzen und zusätzlich lokale Einstellungen. Genau hier entstehen häufig unerwartete Ergebnisse.
Beispiel:
- Global Style: Textfarbe Schwarz
- lokale Block-Einstellung: Textfarbe Rot
Je nach erzeugtem CSS und Priorität kann die lokale Einstellung den globalen Wert überschreiben. Wenn eine Änderung am Global Style scheinbar „nicht wirkt“, solltest du deshalb prüfen, ob der betreffende Block bereits lokal einen eigenen Wert besitzt.
7. Bestehenden Global Style bearbeiten
Im ursprünglichen Gemini-Chat wurde ein bereits genutzter Style direkt am Block geöffnet. Das ist ein sinnvoller Workflow:
- Block auswählen, der den Global Style verwendet.
- Im Style-Bereich den zugewiesenen Global Style öffnen.
- Über das Menü beziehungsweise „Manage Style“ in die zentrale Bearbeitung wechseln.
- Eigenschaften anpassen.
- Zurück zum normalen Block-Editor wechseln.
- Seite/Beitrag speichern beziehungsweise aktualisieren.
Die genaue Beschriftung einzelner Schaltflächen kann sich zwischen GenerateBlocks-Versionen verändern. Das Prinzip bleibt aber gleich: Du bearbeitest nicht nur diesen einen Block, sondern die zentrale Style-Klasse.
8. Warum manchmal kein eigener „Speichern“-Button erscheint
Genau diese Frage kam im Chat auf: Nach „Manage Style“ waren die Eigenschaften sichtbar, aber es gab nur einen Zurück-Pfeil.
In solchen UI-Ansichten werden die Style-Änderungen innerhalb des Editors übernommen und anschließend zusammen mit dem WordPress-Inhalt gespeichert. Deshalb ist wichtig, nach dem Verlassen der Style-Verwaltung den normalen Speichern/Aktualisieren-Vorgang des Editors auszuführen.
Wenn du unsicher bist, kontrolliere nach dem Speichern im Frontend einen zweiten Block, der denselben Global Style nutzt. Wenn sich auch dieser geändert hat, wurde tatsächlich die globale Definition bearbeitet.
9. Global Styles nicht mit Patterns verwechseln
Ein Global Style speichert hauptsächlich Gestaltung. Ein Pattern beziehungsweise eine wiederverwendbare Blockstruktur kann dagegen komplette Inhalte und Blockaufbauten speichern.
Beispiel:
- Global Style: „Button Orange“ mit Farbe, Padding, Radius.
- Pattern: komplette Kontaktbox mit Überschrift, Text und zwei Buttons.
Beides kann miteinander kombiniert werden.
10. Linkfarbe global definieren
Ein weiterer Chat drehte sich speziell um die Linkfarbe. Dabei muss man zwischen normalem Text und einem Link innerhalb des Elements unterscheiden.
Wenn dein Global Style beispielsweise einen Container oder Textblock betrifft, reicht eine allgemeine Textfarbe nicht zwingend für Links. Links verwenden oft einen eigenen Selektor.
Konzeptionell sieht das so aus:
.mein-style {
color: #222;
}
.mein-style a {
color: #3399cc;
}
.mein-style a:hover {
color: #ff9933;
}In GenerateBlocks lassen sich solche Zustände beziehungsweise Selektoren über die Style-Funktionen abbilden. Wichtig ist, dass du bewusst den Linkzustand und nicht nur die allgemeine Textfarbe bearbeitest.
11. Hover-Zustand nicht vergessen
Wenn Links im normalen Zustand korrekt aussehen, beim Überfahren aber eine unerwünschte Theme-Farbe annehmen, fehlt meist die Hover-Definition oder eine globale Theme-Regel ist stärker.
Definiere deshalb bei wichtigen Komponenten mindestens:
- normal
- hover
- gegebenenfalls focus
Gerade der Focus-Zustand ist für Tastaturbedienung und Barrierefreiheit wichtig.
12. Style-Namen sinnvoll vergeben
Je mehr Global Styles du anlegst, desto wichtiger werden klare Namen. Ungünstig:
- style1
- blau2
- test-neu-final
Besser:
- card-service
- button-primary
- button-secondary
- headline-section
- link-dark-background
Der Name sollte den Zweck beschreiben, nicht nur die aktuelle Farbe. Ein „button-blue“ wird unlogisch, sobald du die Markenfarbe später auf Orange änderst.
13. Wenige starke Styles statt Dutzende Varianten
Global Styles entfalten ihren Vorteil nur, wenn sie tatsächlich wiederverwendet werden. Wenn für jede einzelne Box ein neuer Style entsteht, hast du am Ende wieder dieselbe Pflegearbeit wie mit lokalen Einstellungen.
Für eine normale Website reichen oft einige klar definierte Bausteine:
- Primär-/Sekundärbutton
- Standardkarte
- Hinweisbox
- Hero-Headline
- Abschnittsüberschrift
- Text auf dunklem Hintergrund
14. Änderungen haben große Reichweite
Der größte Vorteil ist zugleich das größte Risiko. Wenn du einen Global Style änderst, können sich sehr viele Seiten gleichzeitig verändern.
Vor umfangreichen Änderungen solltest du deshalb:
- prüfen, wo der Style eingesetzt wird,
- eine Testseite oder Staging-Umgebung verwenden,
- Desktop, Tablet und Mobil kontrollieren,
- nicht blind einzelne Werte überschreiben.
15. Wenn ein Block anders aussehen soll
Wenn nur ein einzelner Block eine Ausnahme benötigt, gibt es zwei Möglichkeiten:
- eine lokale Abweichung setzen, wenn es wirklich nur eine kleine Ausnahme ist,
- einen zweiten Global Style erstellen, wenn dieselbe Variante mehrfach vorkommt.
So bleibt die zentrale Systematik erhalten.
16. Global Style oder Theme Global Color?
Auch Farben können auf unterschiedlichen Ebenen liegen. Eine globale Markenfarbe im Theme ist noch grundlegender als ein Global Style. Ideal ist ein hierarchischer Aufbau:
- globale Farbvariablen/Theme-Farben
- Global Styles für Komponenten
- lokale Abweichungen nur als Ausnahme
Dann kannst du beispielsweise die Markenfarbe zentral ändern und mehrere Komponenten übernehmen sie automatisch.
17. So prüfst du, ob die globale Änderung funktioniert
- Wähle einen Block mit dem Style.
- Ändere eine gut sichtbare Eigenschaft, zum Beispiel den Border-Radius.
- Speichere die Seite.
- Öffne eine andere Seite mit demselben Global Style.
- Prüfe, ob sich die Eigenschaft dort ebenfalls geändert hat.
Wenn nicht, verwendet der zweite Block möglicherweise einen anderen Style oder besitzt eine lokale Überschreibung.
Fazit
GenerateBlocks Global Styles sind keine magische Synchronisation ähnlicher Blöcke, sondern wiederverwendbare CSS-Klassen. Erst wenn mehrere Blöcke denselben Style zugewiesen bekommen, reagieren sie gemeinsam auf zentrale Änderungen. Genau deshalb lohnt es sich, Styles nach Funktion zu benennen, lokale Überschreibungen sparsam einzusetzen und Link-, Hover- und Responsive-Zustände bewusst zu definieren.
Aktuell geprüft
Das Grundprinzip, die beiden Erstellungswege und die globale Wirkung der CSS-Klassen wurden mit der aktuellen GenerateBlocks-Dokumentation abgeglichen.