Ein großes Problem beim Entwickeln von Themes und Child-Themes ist das Handling der Theme-Farben. Sie existieren in zwei voneinander getrennten Welten. Einmal in Gutenberg (PHP) und einmal in der style.css (CSS).

Eine Verbindung zwischen beiden Welten gibt es nicht, CSS und PHP wissen nichts voneinander. Möchte ich die Farben aus der Gutenberg-Palette auch in meiner style.css verwenden, muss ich jede Farbe zweimal anlegen und nachhalten. Ändere ich die Link-Farbe in der Gutenberg-Farbpalette, muss ich die Farbe in meinem Stylesheet ein weiteres Mal ändern.

CSS Variablen (custom properties)

Ein Lösungsansatz wäre, über CSS-Variablen (Custom Properties) zu gehen und die Farb-Variablen als inline-styles auszugeben. Aber CSS-Variablen sind für den IE nicht lesbar.

Bei caniuse.com heisst es, dass 94% aller Browser CSS-Variablen lesen können. Das ist nicht wenig.
Wir haben aber regelmäßig bei Kundenprojekten den Fall, dass unser Ansprechpartner in einen Rechner mit stark veraltetem System guckt. Da kann die Technik in der Firma sonst auf dem aller-aller-neuesten Stand sein, aber in der Chefetage regiert der Internet Explorer und es werden fleißig Faxe verschickt. Es ist praktisch unmöglich, hier Überzeugungsarbeit zu leisten.

Dass im IE mal was ein bisschen anders aussieht, kann man verschmerzen. Aber dass der Kunde keine Farben sieht, ist keine Option. Für alte Browser gibt es zwar ein POSTCSS ponyfill, aber ich möchte eine „cleanere“ Lösung.

Ich habe also nach einer Lösung gesucht, mit der ich für den IE keine Sonderlösung bauen muss und mit der ich innerhalb meines SASS-Setup bleiben kann. (Ich muss dazu sagen, dass Javascript nicht meine starke Seite ist.)

Die Methode

Für mein Theme-CSS arbeite ich mit SASS-Modulen. Das heisst, mein CSS besteht aus einzelnen SCSS-Dateien, die über den SASS-Compiler zu einer style.css-Datei zusammengebaut werden. Eines dieser Module verwaltet die Theme-Farben.

colors.scss
header.scss
design-elements.scss
(...)

Die Frage ist nun, wie kommen die Farben aus meiner Gutenberg-Farbpalette in mein SASS-Modul colors.scss?

Für diesen Schritt setze ich das Plugin WP-SCSS ein. Ich hatte das Plugin zunächst wieder verworfen, weil mir der Gedanke nicht gefiel, das da ständig SASS-Dateien serverseitig kompiliert werden.

Aber das ist gar nicht der Punkt. Das Plugin kommt nur in der Bauphase des Themes in meiner lokalen Umgebung zum Einsatz. Auf dem Live-Server brauche ich es nicht.

Schritt 1: PHP zu CSS mit WP-SCSS

In der functions.php definiere ich zunächst ein array mit meinen Theme-Farben. Die Farbwerte verwende ich dann auch für die Gutenberg-Farb-Palette.

function child_theme_colors() {
return array(
 'text_color_gutenberg' => '#3f3f3f',
 'link_color_gutenberg' => '#D3540F',
}

Diese Farben werden mit dem Filter wp_scss_variables mit WP-SCSS verknüpft. 

function wp_scss_set_variables(){
 $colors = child_theme_colors();
return $colors;
}
add_filter('wp_scss_variables','wp_scss_set_variables');

Die Variablen aus der functions.php trage ich in die SCSS-Datei theme-colors.scss ein, auf die WP-SCSS zugreift. Die Farbwerte sind vollkommen egal, sie werden beim Kompilieren in CSS überschrieben. 

/*theme-colors.scss */
$link_color_gutenberg: blue !default;
$text_color_gutenberg: #222 !default;


/* CSS-Klasse zur weiteren Verwendung */
.text-color {
 color: $text_color_gutenberg;
}

Diese Datei wird von WP-SCSS in eine CSS-Datei theme-colors.css kompiliert. Das Kompilieren passiert beim jedem Laden der Website. 

/*theme-colors.css*/
.text-color {
 color: #3f3f3f;
}

Die CSS-Datei enthält nun meine Farben und ich kann die Datei in meine Datei colors.scss importieren.

Wichtig zu wissen: Das Plugin WP-SCSS liefert die richtigen Farben nur in der CSS-Datei. Die Magie passiert erst beim Kompilieren zu CSS. Deshalb ist die SCSS-Datei nicht verwertbar.
Und aus diesem Grund sind auch die Farbwerte, die man in der SCSS-Datei definiert, auf die WP-SCSS zugreift, vollkommen egal. Diese Werte werden beim Kompilieren überschrieben.

Schritt 2: CSS in SASS einbinden

In der CSS-Datei theme-colors.css, die WP-SCSS erzeugt hat, befinden sich die Gutenberg-Farben innerhalb einer CSS-Klasse.

Über die SASS-Funktion @extend kann ich eine CSS-Klasse wie .color-link in eine andere CSS-Anweisung einbinden. 

p a,
.beispiel{
 @extend .color-link;
}

Das Problem dabei ist, dass ein und dieselbe Farbe in unterschiedlichen Zusammenhängen vorkommt. Es gibt Textfarben, Hintergrundfarben, Farben für Borders usw. Das sind jeweils unterschiedliche CSS-Anweisungen.

Das heisst, ich brauche für jeden Farb-Anwendungsfall eine eigene CSS-Klasse für meine Datei theme-colors.scss. Das ist ein bisschen Schreiberei und nicht so ganz ideal.
Aber für Gutenberg müssen wir auch eine Menge an CSS-Klassen schreiben, (z.B. .has-link-color). Streng genommen fallen ein paar CSS-Klassen mehr nicht ins Gewicht. 

/*theme-colors.css*/
.color-link{
 color:#ff0000;
}
.color-link-background{
 background-color:#ff0000;
}
.color-link-border{
 border-color:#ff0000;
}

Gibt’s da ein Plugin für?

Mir sind zwei Plugins untergekommen, die sich mit der Problematik befassen. Einmal das Plugin Central Color Palette von Daniel Menzies und das Plugin Custom Color Palette von Thomas Weichselbaumer. Thomas‘ Lösung setzt allerdings auf CSS-Variablen und schließt damit alte Browser aus. Was ich sehr gut nachvollziehen kann.

Was die Zukunft bringt

Die Core-Entwickler arbeiten eifrig an der nächsten Ausbaustufe vom Gutenberg-Editor. Das Ziel sind blockbasierte Themes. Das heißt, die Art, wie wir Themes bauen, ändert sich.

Auch das CSS-Konzept ist im Umbruch. Wie Block-Styles und Theme-Styles zusammenarbeiten werden, ist noch nicht ganz klar. CSS custom properties werden ziemlich sicher Teil der Lösung sein. Eine Zusammenfassung zum Stand der Dinge gibt es bei Github.

Schön wärs, wenn es für Block Styles, User-Input im Editor und Theme Design in Zukunft eine gemeinsame Basis geben würde – wir werden sehen.