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.

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, }, ] } />

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; }

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 ); } }

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.

4 Kommentare zu »Gutenberg-Farboption mit der Theme-Farbpalette erstellen«

  1. 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?

    const themeColors = useSelect( ( select ) => {
        const settings = select( 'core/block-editor' ).getSettings();
        
        if( !settings || !settings.colors ) {
            return [];
        }
        return settings.colors;
    } );

    liebe grüße 🙂

    1. 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 mit wp.data.select( 'core/block-editor' ).getSettings() die Settings zu holen?

      1. 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 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.