Um im Gutenberg Editor eine eigene Farbpalette anzulegen muss in der functions.php ein Array zum add_theme_support() hinzugefügt werden:
function knaeckebrot_add_custom_gutenberg_color_palette() {
add_theme_support(
'editor-color-palette',
[
[
'name' => esc_html__( 'Brown', 'wpdc' ),
'slug' => 'red',
'color' => '#ff0000',
],
[
'name' => esc_html__( 'Orange', 'wpdc' ),
'slug' => 'yellow',
'color' => '#ffff00',
],
[
'name' => esc_html__( 'Light Green', 'wpdc' ),
'slug' => 'blue',
'color' => '#0000ff',
],
]
);
}
add_action( 'after_setup_theme', 'knaeckebrot_add_custom_gutenberg_color_palette' );
Seit WordPress 5.7. werden für die definierten Farben Klassen benutzt, vorher waren es Inline Styles. Der in der functions.php definierte Slug ist Teil des Klassennamens. Die Klassen sollten in der style.css und in der editor-styles.css platziert werden:
.has-red-background-color {
background-color: #3a3335;
}
.has-red-color {
color: #3a3335;
}
.has-yellow-background-color {
background-color: #f0544f;
}
.has-yellow-color {
color: #f0544f;
}
.has-blue-background-color {
background-color: #c6d8d3;
}
.has-blue-color {
color: #c6d8d3;
}
Gleiches geht auch mit Farbverläufen, auch die können vordefiniert werden. In der functions.php folgenden Code platzieren:
function knaeckebrot_add_custom_gutenberg_gradient_presets() {
add_theme_support(
'editor-gradient-presets',
[
[
'name' => esc_html__( 'Green to blue', 'knaeckebrot'),
'gradient' => 'linear-gradient(135deg,rgb(0,250,56) 0%,rgb(0,27,255) 100%)',
'slug' => 'green-to-blue'
],
[
'name' => esc_html__( 'Red to yellow', 'knaeckebrot'),
'gradient' => 'linear-gradient(115deg,rgb(250,0,0) 0%,rgb(255,225,0) 100%)',
'slug' => 'red-to-yellow'
],
]
);
}
add_action( 'after_setup_theme', 'knaeckebrot_add_custom_gutenberg_gradient_presets' );
In der style.css und in editor-styles.css dann folgendes CSS:
.has-green-to-blue-gradient-background {
background: linear-gradient(135deg,rgb(0,250,56) 0%,rgb(0,27,255) 100%);
}
.has-red-to-yellow-gradient-background {
background: background:linear-gradient(115deg,rgb(250,0,0) 0%,rgb(255,225,0) 100%);
}
Quelle: https://wpdevelopment.courses/articles/gutenberg-colour-settings/