Gutenberg-Farboption mit der Theme-Farbpalette erstellen

Einige Core-Blöcke kommen bereits mit Optionen für Text- und Hintergrundfarbe, etwa der Absatz-Block. Hier zeige ich, wie eine Farb-Option mit den vom Theme definierten Farbwerten für einen Block erstellt werden kann.

Die Theme-Farben in einer Farbpalette anzeigen

Eine Farboption in Gutenberg zu erstellen ist mit der PanelColorSettings-Komponente relativ einfach. Der Komponente kann unter anderem ein Titel sowie ein Array mit Farb-Einstellungen übergeben werden, das sieht so aus:

<PanelColorSettings
	title="'Farbschema"
	colorSettings={ [
		{
			colors: [
				{
					name: 'Puerto Rico',
					slug: 'puerto-rico',
					color: '#53c4ab'
				},
				{
					name: 'Butterfly Bush',
					slug: 'butterfly-bush',
					color: '#5151a0'
				},
				{
					name: 'White',
					slug: 'white',
					color: '#ffffff'
				}
			],
			label: 'Textfarbe',
			onChange: ( color ) => setAttributes( { color } ),
			value: color,
			disableCustomColors: true,
		},
	] }
/>
Code-Sprache: JavaScript (javascript)

Dieser Code-Schnipsel würde eine Farbpalette aus den drei in colors angegebenen Farben anzeigen. Beim Ändern der Farbe wird das Attribut color geändert, das auch als aktueller Wert (value) für die Komponente festgelegt ist. colorSettings akzeptiert mehrere Objekte, sodass mehrere Farbpaletten erzeugt werden können.

Wenn der colors-Eintrag weggelassen wird, fällt die Komponente automatisch auf die Farben zurück, die vom Theme über add_theme_support( 'editor-color-palette' ); definiert wurden. Um die Theme-Farben in einer Farbpalette anzuzeigen, müssen wir im Core oben also nur colors entfernen.

Farb-CSS-Klasse generieren

Soweit, so einfach. Etwas umständlich wird es, wenn wir nun für das HTML-Element, das die Farbe bekommt, eine Farb-Klasse erstellen wollen. Gespeichert wird in dem Attribut nämlich der Farbwert, also beispielsweise ein HEX-Wert, nicht der Slug der Farbe.

Wir möchten aber Klassen wie has-tundora-color oder has-tundora-background-color. Um das umzusetzen, benötigen wir innerhalb des JavaScript-Codes Zugriff auf das Farb-Array des Themes, in dem den Farbwerten die Namen und Slugs zugeordnet sind, wie oben in dem colors-Objekt.

Theme-Farben ermitteln

Über die Data-Komponente können wir uns die Einstellungen des Editors holen, worin auch die Farbwerte des Themes gespeichert sind:

const settings = wp.data.select( 'core/block-editor' ).getSettings();
if ( settings && settings.colors ) {
	themeColors = settings.colors;
}
Code-Sprache: JavaScript (javascript)

Innerhalb vom themeColors-Array haben wir jetzt Zugriff auf Objekte mit den Farbwerten, -slugs und -namen, sodass wir Klassennamen erstellen können.

WordPress gibt uns dafür zwei hilfreiche Funktionen an die Hand:

• getColorObjectByColorValue sucht aus einem Array von Farbobjekten das passende zu einem Farbwert heraus.
• getColorClassName generiert einen Klassennamen.

Das kann dann so aussehen:

if ( color !== '' ) {
	// Get color object.
	const currentColorObj = getColorObjectByColorValue( themeColors, color );

	// Generate text color class name.
	if ( currentColorObj !== undefined ) {
		textColorClassName = getColorClassName( 'color', currentColorObj.slug );
	}
}
Code-Sprache: JavaScript (javascript)

Wenn eine Farbe gewählt ist, haben wir in textColorClassName dann etwas wie has-yellow-color.

GitHub-Repo mit Beispielcode

Ich habe ein kleines GitHub-Repo mit einem Beispielblock erstellt, der Controls für Hintergrund- und Textfarbe hat.