How to customize the color pallets you can select in a gutenberg block in your theme. And the tweak if you are running a childtheme.
In Gutenberg you can customize the colors of the some blocks like the paragraph block (this is a paragraph block.) The theme can add some default colors to pick from or a user can pick his a custom color.
Define theme color pallets
In a theme add the following code to the functions.php:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'grey', 'theme translation' ),
'slug' => 'grey',
'color' => '#111111',
),
array(
'name' => __( 'red', 'theme translation' ),
'slug' => 'red',
'color' => '#ee4035',
),
array(
'name' => __( 'orange', 'theme translation' ),
'slug' => 'orange',
'color' => '#f37736',
),
array(
'name' => __( 'yellow', 'theme translation' ),
'slug' => 'yellow',
'color' => '#fdf498',
),
array(
'name' => __( 'green', 'theme translation' ),
'slug' => 'green',
'color' => '#7bc043',
),
array(
'name' => __( 'blue', 'theme translation' ),
'slug' => 'blue',
'color' => '#0392cf',
),
) );
Above is the example of the 6 colors that this theme uses. The name is used when hovering over the color pallet. the slug shouldn’t matter as long as they are different.
Finally the color is simple hexadecimal color notation.
This will work on normal theme’s. But not on child themes.
Define color pallets for child themes.
The following might differ a bit depending on the parent theme setup. But the trick is to add the colors after the parent does it. My theme is a child of twentysixteen.
The best way to overrule the parent should be to add the code as this:
function janwsixteen_after_setup() {
// Adds support for editor color palette.
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'grey', 'theme translation' ),
'slug' => 'grey',
'color' => '#111111',
),
array(
'name' => __( 'red', 'theme translation' ),
'slug' => 'red',
'color' => '#ee4035',
),
array(
'name' => __( 'orange', 'theme translation' ),
'slug' => 'orange',
'color' => '#f37736',
),
array(
'name' => __( 'yellow', 'theme translation' ),
'slug' => 'yellow',
'color' => '#fdf498',
),
array(
'name' => __( 'green', 'theme translation' ),
'slug' => 'green',
'color' => '#7bc043',
),
array(
'name' => __( 'blue', 'theme translation' ),
'slug' => 'blue',
'color' => '#0392cf',
),
) );
}
add_action( 'after_setup_theme', 'janwsixteen_after_setup', 100 );
Now this code will run during the after_setup_theme event at priority 100 (which is a late priority).
If this does not work I recommend setting replacing the action after_setup_theme to init.
