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.
Update vom 20. Juli 2020: Fabian hat mir in seinem Kommentar den Hinweis gegeben, dass die Farbwerte auch direkt in JS via Data-API ermittelt werden können. So sparen wir uns den Umweg über wp_localize_script()
🎉
Ich habe den Code entsprechend angepasst.
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.
Hi Florian,
wie immer ein sehr guter Artikel! 🙂
Gibt es einen Grund wieso du dir die Theme Farben via `localize_script` zur verfügung stellst, anstelle von sie direkt von der Data API abzurufen?
liebe grüße 🙂
Hi Fabian,
das ist cool, danke für die Ergänzung! Kein besonderer Grund, ich wusste nicht, dass der Wert auch per JS-API verfügbar ist 😀
Werde den Artikel entsprechend anpassen.
LG
Edit: Siehst du einen Nachteil dabei, nicht über
withSelect()
zu gehen, sondern direkt mitwp.data.select( 'core/block-editor' ).getSettings()
die Settings zu holen?Okay cool 🙂
Wenn ich direkt Select benutzt habe ist es vorgekommen, dass der block initiiert wurde bevor die settings verfügbar waren und ich ein undefined bekommen habe. Mit useSelect wird es genau wie mit subscribe jedes mal neu gerendert wenn sich der wert verändert.
Aber probiere gerne mal ein wenig damit herum, vielleicht ist es ja inzwischen etwas stabiler einfach nur select zu nutzen 🙂
Ah okay. Ich hab es jetzt mal direkt genutzt, behalte das aber mal im Hinterkopf falls das mal nicht funktioniert 🙂