Individuelle Gutenberg Farb-Palette zum WordPress-Theme hinzufügen
Der Gutenberg-Editor in WordPress beinhaltet bereits einige wenige Farbdefinitionen, welche du z.B. für die Hintergrundfarbe eines „Cover-Blocks“ oder für die Textfarbe des „Paragraph-Blocks“ verwenden kannst.
Allerdings bietet WordPress auch die Möglichkeit, ganz individuelle Farbdefinitionen bzw. eine eigene Farb-Palette für den Gutenberg-Editor hinzuzufügen. In diesem Artikel zeige ich euch wie einfach sich eine benutzerdefinierte Farb-Palette erstellen lässt. Außerdem erhaltet ihr eine bereits vorgefertigte Farbauswahl, die ihr so in euer WordPress Theme übernehmen könnt.
Wie lässt sich eine benutzerdefinierte Farb-Palette für den Gutenberg-Editor erstellen?
Das Hinzufügen individueller Farben ist denkbar einfach. Durch die Verwendung der Funktion add_theme_support( 'editor-color-palette', array() ); können wir eine benutzerdefinierte Farb-Palette für den Gutenberg-Editor hinzufügen. Eine Farb-Palette sollte immer durch das aktive WordPress Theme definiert sein und kann sich je nachdem unterscheiden. Sobald wir eigene Farbdefinitionen hinzufügen, überschreiben wir außerdem die Standard-Farben des Editors.
Im folgenden Beispiel könnt ihr anhand von zwei unterschiedlichen Farben ableiten, wie einfach wir nun neue Farben zur Gutenberg-Palette hinzufügen können:
Die fertige Farb-Palette für dein Gutenberg-Theme
Im folgenden Beispiel findet ihr bereits eine persönliche Auswahl an modernen Farben, die ihr so ganz einfach für euer Gutenberg Theme verwenden könnt. Kopiert dazu den folgenden Code z.B. in die functions.php Datei eures Themes:
Die neue Farb-Palette im Frontend verfügbar machen
Durch die Verwendung von add_theme_support( 'editor-color-palette', array() ); könnt ihr eine benutzerdefinierte Farbpalette im Editor verfügbar machen. Damit die neuen Farbwerte allerdings auch im Frontend des WordPress Themes verfügbar sind, müsst ihr zusätzliche CSS-Definitionen hinzufügen. Diese unterteilen sich in die Klassennamen .has-COLORNAME-background-color und .has-COLORNAME-color für die Verwendung als Hintergrund- und Textfarbe:
Die CSS-Definitionen für eure fertige Farbpalette
Wenn ihr meine zusammengestellte Farbpalette für den Gutenberg-Editor nutzen möchtet, benötigt ihr noch die dazugehörigen CSS-Definitionen. Dazu kopiert ihr einfach den folgenden Code und fügt ihn in eine Stylesheet-Datei eures WordPress Themes (Child-Themes) ein. Natürlich könnt ihr auch einfach eine neue CSS-Datei anlegen und diese mittels wp_enqueue_style() in euer Theme einfügen:
Gutenberg Farb-Palette deaktivieren
Sicherlich gibt es auch Gründe dafür, eine benutzerdefinierte Farb-Palette im Gutenberg Editor zu verwehren. Auch dafür gibt es es eine Lösung. Der folgende Code deaktiviert die Möglichkeit, neue individuelle Farb-Definitionen hinzuzufügen:
Wenn wir zusätzlich auch die Standard-Farbpalette im Gutenberg Editor deaktivieren möchten, dann verwenden wir stattdessen den folgenden Code:
