kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Gutenberg-Farbpalette von WordPress anpassen oder deaktivieren

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

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.

Angepasste Farbpalette im WordPress-Block-Editor
Angepasste Farbpalette im WordPress-Block-Editor

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.