16. Oktober 2023

Eigene Farben im Gutenberg-Editor definieren / Span-Styles in WordPress

Wie man Blöcken im Gutenberg-Editor eigene Klassen zuweisen kann, hatte ich hier schon mal beschrieben. Hierbei wird die Klasse jedoch immer auf den gesamten Block angewendet. Will man eine Klasse jedoch nur auf einzelne Wörter anwenden, z.B. um sie in einer anderen Farbe darzustellen, muss man einen anderen Weg gehen.

Markiere das gewünschte Wort und klicke anschließend in der Block-Toolbar auf „Hervorheben“. Anschließend, kannst du aus einer Reihe von Farben auswählen.

Da diese Farben mit Sicherheit nicht dem CD deiner Website oder deines Kunden entsprechen, ist es sehr sinnvoll die Farbpalette hier selbst zu definieren. Das gelingt mit folgendem Code in der functions.php:

function add_new_colorpalette() {
    $newColorPalette = [
        [
            'name' => 'Blau',
            'slug' => 'blau',
            'color' => '#003c72',
        ],
        [
            'name' => 'Grün',
            'slug' => 'gruen',
            'color' => '#bfd73d',
        ],
        [
            'name' => 'Rot',
            'slug' => 'rot',
            'color' => '#c23616',
        ],
    ];
    add_theme_support( 'editor-color-palette', $newColorPalette);
}
add_action( 'after_setup_theme', 'add_new_colorpalette' );

Damit die Farben auch dargestellt werden, müssen sie noch im Stylesheet eingetragen werden:

.has-blau-color {
   color: #003c72;
}
.has-gruen-color {
    color: #bfd73d;
}
.has-rot-color {
    color: #c23616;
}

Und wenn die Farben auch im Backend angezeigt werden sollen, müssen sie zusätzlich noch in den Admin-Styles eingetragen werden.