Hier zeige ich dir, wie du in WordPress die Gutenberg Farbpalette bearbeiten kannst. So kannst du die Standard Farbpalette des Gutenberg Editors durch zu deinem Design passende Farben ersetzen. In den neueren WordPress Versionen lässt sich die Gutenberg Farbpalette über die theme.json bzw. style.json Datei des Themes bearbeiten. Du findest hier auch eine Anleitung, um die Farbpalette in älteren WordPress Versionen anzupassen.

Dateien theme.json und style.json

Die theme.json ist in Block Themes automatisch vorhanden und kann direkt bearbeitet oder durch eine style.json ersetzt werden, um eigene Styles zu verwirklichen ohne das Original Design zu verlieren. In Classic Themes ohne theme.json kann diese einfach hinzugefügt werden.

Gutenberg Farbpalette

Im Gutenberg Editor von WordPress können wie bisher bestimmte Schriftfarben und Hintergrundfarben für verschiedene Elemente festgelegt werden. Dafür stehen im Gutenberg Editor eine Palette mit Standard Farben und ein Color Picker für benutzerdefinierte Farben zur Verfügung.

Die verfügbaren Standard Farben werden zum einen von WordPress ab Werk und zum anderen vom Theme festgelegt. Wenn die Farben der Gutenberg Farbpalette nicht zum Design der Webseite passen, ist es empfehlenswert diese entsprechend anzupassen.

Farbpalette im Editor aktivieren

Mit der Einstellung appearanceTools werden verschiedene Möglichkeiten zur Anpassung des Designs im Gutenberg Editor aktiviert. Darunter auch die Farbeinstellungen, wie die Farbpalette.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true
		}
	}
}

Farbpalette definieren

Die Farbpalette des WordPress Gutenberg Editor wird über die theme.json bzw. eine eigene style.json unter palette definiert. Das folgende Beispiel zeigt die Gliederung der .json ausgehend vom Ursprung, damit du die Code-Schnippsel leichter an der richtigen Stelle einfügen kannst. Es müssen also nur die relevanten Teile an die richtige Stelle kopiert werden, wobei genau auf die Klammern und Kommata zu achten ist.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [

			]
		}
	}
}

Einzelne Farben definieren

Eine einzelne Farbe wird mit den Eigenschaften slug, color und name definiert. Der slug ist ein Bezeichner, über den die Farbe im gesamten Theme aufgerufen werden kann. Die Farbe wird unter color mit einem in CSS sonst auch üblichen Farbcode definiert. Der name dient der Anzeige im Gutenberg Editor und erscheint wenn man in der Farbpalette mit der Maus über die Farbe fährt.

	{
		"slug": "primary",
		"color": "#ffc000",
		"name": "Primary"
	}

Mehrere Farben definieren

Es können in einer Liste entsprechend viele Farben definiert werden, solange sie einen unterschiedlichen slug haben.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"slug": "base",
					"color": "#111111",
					"name": "Base"
				},
				{
					"slug": "contrast",
					"color": "#eeeeee",
					"name": "Contrast"
				},
				{
					"slug": "primary",
					"color": "#ffc000",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#ff8000",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#ff4000",
					"name": "Tertiary"
				}
			]
		}
	}
}

Namen von Farben

Bei der Verwendung in den Themes haben sich bereits bestimmte Konventionen hinsichtlich der Bezeichner für Farben durchgesetzt. Es ist empfehlenswert diese zu beachten, um einfach das Theme wechseln oder Code-Schnippsel importieren zu können.

In den ersten Block Themes (twentytwentytwo) wird background für die Hintergrundfarbe und foreground für die Vordergrundfarbe (zB. Schrift) verwendet. In neuen Block Themes (twentytwentythree) werden jedoch synonym die Bezeichner base für die Hintergrundfarbe und contrast für die Vordergrundfarbe verwendet. Da es (derzeit leider noch) nicht möglich ist einer Farbe mehr als einen slug zuzuordnen, empfiehlt es sich im Sinne der Kompatibilität beide Bezeichner zu definieren.

Die Farben für Hervorhebungen werden standardisiert mit primary, secondary und tertiary definiert. Sie werden üblicher Weise für Links, Buttons, Linien und andere Elemente verwendet, die besonders hervorgehoben werden sollten.

Darüber hinaus können natürlich auch noch beliebig viele weitere Farben definiert werden. Hierbei sollte jedoch der slug nicht den Farbton beschreiben, da dieser vom Benutzer beliebig definiert werden kann. Es könnte also passieren, dass der Benutzer die Farbe mit der Bezeichnung „blau“ in einen roten Farbton ändert und das wäre äußerst verwirrend.

Für die Bezeichner von Farben sollten unbedingt der Anwendungszweck oder der Anwendungsbereich der Farbe verwendet werden!

Beispiele: special-link, author-name, footer-base, footer-contrast, footer-primary, footer-secondary, footer-tertiary …