Gutenberg-Farbpalette von WordPress anpassen oder deaktivieren
Von Konstantin Die Farbpalette des WordPress Block-Editors (Gutenberg) kann mit einfachen Anpassungen deaktiviert oder durch eigene Farben ersetzt werden.
Der Block Editor von WordPress (Gutenberg) stellt eine Farbpalette zur Verfügung, mit der beispielsweise die Textfarbe in einem Block und dessen Hintergrundfarbe verändert werden können. Standardmäßig umfasst die Palette zwölf vordefinierten Farben sowie die Option, eigene Farben mit einem Color-Picker auszuwählen. In vielen Fällen ist es aber sinnvoll statt des Standards eine angepasste Farbauswahl im Theme anzubieten. Wir zeigen euch, wie ihr die Farbeinstellungen deaktivieren oder eine Farbpalette mit eigenen Farben registrieren könnt.
Inhalte
Gutenberg Farbeinstellungen deaktivieren
Wenn ihr keine Farbanpassungen im Editor erlauben, Farben also ausschließlich über das Stylesheet eures Themes steuern wollt, könnt ihr die Farbeinstellungen für Editor-Blöcke mit folgendem Code vollständig deaktivieren. Der Code wird in der functions.php eingefügt.
function disable_color_palette() {
add_theme_support('editor-color-palette');
add_theme_support('disable-custom-colors');
}
add_action('after_setup_theme', 'disable_color_palette');Eigene Farbpalette anlegen
Um eine eigene Farbpalette zu registrieren, übergibt man der Funktion add_theme_support() den Namen des Features 'editor-color-palette' sowie ein Array mit den Farben. Die Informationen zu den Farben stehen in assoziativen Arrays, in denen jeweils Name, Slug und Farbwert festgelegt werden. Der Name wird dabei als Info im Editor ausgegeben und der Slug wird in generierten CSS-Klassen verwendet. Die Farben können u.a. als Hexadezimal-, RGB- oder RGBA-Werte angegeben werden, so dass z. B. auch Transparenzen möglich sind.
function customize_color_palette() {
add_theme_support('editor-color-palette', array(
array(
'name' => __('Petrol'),
'slug' => 'petrol',
'color' => '#0094A0',
),
array(
'name' => __('Red'),
'slug' => 'red',
'color' => '#E2574C',
),
array(
'name' => __('Black'),
'slug' => 'black',
'color' => '#000000',
),
));
}
add_action('after_setup_theme', 'customize_color_palette');Die vordefinierte Farbpalette von WordPress wird damit nicht ergänzt, sondern überschrieben. Das Beispiel erzeugt also eine Farbpalette mit drei Farben.
Color-Picker deaktivieren
Standardmäßig enthält WordPress zusätzlich zu den Theme-Farben einen Color-Picker, der das Auswählen einer beliebigen Farbe ermöglicht. Wenn ihr die Farbauswahl auf die definierten Farben beschränken wollt, könnt ihr diese Option deaktivieren, indem ihr die Funktion customize_color_palette() um die Zeile add_theme_support('disable-custom-colors'); ergänzt.
function customize_color_palette() {
// …
add_theme_support('disable-custom-colors');
}
add_action('after_setup_theme', 'customize_color_palette');CSS-Klassen für Block-Farben hinzufügen
Für die Farben der Farbpalette werden CSS-Klassen nach dem Muster has-$slug-color und has-$slug-background-color generiert und dem Block hinzugefügt. Damit diese Klassen einen sichtbaren Effekt im Frontend haben, müssen sie mit entsprechenden Farbangaben dem Stylesheet des Themes hinzugefügt werden. Für die drei Farben aus unserer Beispielpalette sieht das beispielsweise so aus:
.has-petrol-color { color: #0094A0; }
.has-petrol-background-color { background-color: #0094A0; }
.has-red-color { color: #E2574C; }
.has-red-background-color { background-color: #E2574C; }
.has-black-color { color: #000000; }
.has-black-background-color { background-color: #000000; }Geschrieben von Konstantin Hanke
Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.
