Einige Blöcke bieten die Möglichkeit Farben von bestimmten Elementen im Block anzupassen. Dies sind zum Beispiel die Hintergrundfarbe eines Buttons oder die Textfarbe eines Absatzes. Gutenberg liefert schon 11 vordefinierte Farben mit.

Neben den Farben gibt es auch eine Möglichkeit mit einem Farbmischer eine eigene Farbe zu mischen.

Mit folgenden Code lässt sich der Farbmicher deaktivieren, sodass nur die vordefinierten Farben verwendet werden können.

add_theme_support( 'disable-custom-colors' );

Vordefinierte Farben überschreiben

Themes haben die Möglichkeit die vordefinierten Farben zu überschreiben, die in der Farbwahl Palette in allen Komponenten angezeigt werden sollen.

function mytheme_add_custom_colors() {
	add_theme_support( 'editor-color-palette', array(
		// Fügt eine goldene Farbe hinzu.
		array(
			'name' => __( 'gold', 'themeLangDomain' ),
			'slug' => 'nitschmahler-gold',
			'color' => '#ae9a63',
		),
	) );
}

add_action( 'after_setup_theme', 'mytheme_add_custom_colors' );

Man ruft die add_theme_support Funktion auf und übergibt als Parameter den Wert „editor-color-palette“ und ein Array mit den Farbdefinitionen. Jede Farbe ist dabei ein Array, das die Werte „name„, „slug“ und „color“ enthält.

• Name: Der Name der angezeigt wird, dieser sollte übersetzbar sein.
• Slug: Der Wert, der abgespeichert wird und aus dem die CSS Klasse generiert wird.
• Color: Der Hex-Wert der Farbe um eine Vorschau zu zeigen.

Beim Auswählen einer Farbe wird bsw. im Button ein Attribut mit dem Slug „nitschmahler-gold“ abgespeichert und eine eine Klasse ‚has-nitschmahler-gold-background-color‚ zum Element hinzugefügt

<!-- wp:button {"backgroundColor":"nitschmahler-gold"} -->
<div class="wp-block-button alignnone">
<a class="wp-block-button__link has-background has-nitschmahler-gold-background-color">Mein Button</a>
</div>
<!-- /wp:button -->

Für diese Klasse muss man nun noch eine CSS Definition erstellen. Diese Definition muss im Editor und im direkt in der Seite geladen werden.

// Für die Hintergrudnfarbe
.has-nitschmahler-gold-background-color {
	color: #ae9a63;
}
// Für die Textfarbe
.has-nitschmahler-gold-color {
	color: #ae9a63;
}

Fertig ist der Button: