Eigene Farbpalette definieren für den WordPress-Gutenberg Editor

Die eigene Farbpalette im Gutenberg-Editor

Das Schöne am WordPress Gutenberg-Blockeditor ist, dass er den RedakteurInnen und AutorInnen mehr Gestaltungsfreiheit lässt. Aber für Webdesigner ist es nicht immer wünschenswert, allen Beteiligten Zugang zu bestimmten Funktionen zu gewähren. Zum Beispiel zur gesamten Farbpalette.

Dafür müssen ein paar Zeilen Code ins WordPress-Theme. Genauer gesagt in die functions.php-Datei. Stelle wie immer sicher, dass du dabei ein Child-Theme verwendest.

Benutzerdefinierte Farben (und Verläufe) deaktivieren

Erstmal musst du die benutzerdefinierten Farben ausschalten.

Dieses Snippet schaltet im Wesentlichen die Farbauswahl des Editors aus und verhindert so, dass Benutzer irgendeinen beliebigen Farbton auswählen können:

// Disable Gutenberg Custom Colors
add_theme_support( 'disable-custom-colors' );

// Disable Gutenberg Custom Gradients
add_theme_support( 'disable-custom-gradients' );

Farbpalette definieren

Nun kannst du eigene Farben definieren. Achte darauf: Schwarz und Weiss sind vielleicht nicht spezifisches Brand-Farben. Trotzdem sollten sie im Block-Editor verwendet werden können. Du musst also auch diese Farben hinzufügen.

Achtung, du musst jeweils deine Text-Domain angeben im Code. Ersetze dabei 'textdomain'. Wie du deine Text-Domain herausfindest, lernst du hier.

Verwende also dieses Snippet in deiner functions.php-Datei, um eigene Farben zu definieren:

// Editor Color Palette
 add_theme_support( 'editor-color-palette', array(
            array(
                'name'  => __( 'Weiss', 'textdomain' ),
                'slug'  => 'white',
                'color' => '#FFFFFF',
            ),
       array(
                'name' => __( 'Schwarz', 'textdomain' ),
                'slug' => 'black',
                'color' => '#000000',
            ),
            array(
                'name'  => __( 'Gelb', 'textdomain' ),
                'slug'  => 'yellow',
                'color' => '#ffff00',
            ),
            array(
                'name'  => __( 'Blau', 'textdomain' ),
                'slug'  => 'blue',
                'color' => '#0000ff',
            ),
            array(
                'name'  => __( 'Grün', 'textdomain' ),
                'slug'  => 'green',
                'color' => '#00ff00',
            ),
        ) );

Dabei musst du immer drei Attribute definieren:

  • name: Wird angezeigt im Block-Editor
  • slug: Wird verwendet für CSS-Klassen auf Blöcke oder Elemente mit dieser Farbe
  • color: Der hexadezimale Wert für die Farbe

Dasselbe funktioniert auch für die Farbverläufe:

add_theme_support(
    'Editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
        array(
            'name'     => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
            'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
        ),
        array(
            'name'     => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
            'slug'     => 'light-green-cyan-to-vivid-green-cyan',
        ),
        array(
            'name'     => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
            'slug'     => 'luminous-vivid-amber-to-luminous-vivid-orange',
        ),
        array(
            'name'     => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
            'slug'     => 'luminous-vivid-orange-to-vivid-red',
        ),
    )
);

Auch hier gibt es wieder name und slug, neu ist gradient. Gradient ist ein CSS-Wert eines Verlaufs, der zum Beispiel auf ein Hintergrundbild des Blocks angewendet wird. Details zu gültigen Verlaufstypen findest du in der Mozilla-Dokumentation.


Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 0 )
Passende Themen
Kommentare (0)

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.