Add custom colours to the Gutenberg editor

The Gutenberg editor is very powerful and it lets you select from a palette of colours that’s been defined globally. If Blocksy’s colours are not enough for you, you can easily intercept the editor-color-palette function and add colours to it.

add_filter('blocksy:editor-color-palette', function ($colors) {
  $colors[] = [
    'name' => __('Custom Color 1', 'blocksy'),
    'slug' => 'custom-color-1',
    'color' => '#a156b4',
  ];

  $colors[] = [
    'name' => __('Custom Color 2', 'blocksy'),
    'slug' => 'custom-color-2',
    'color' => '#a156b3',
  ];

  return $colors;
});

With this, you add support for additional colours inside of the Gutenberg editor, but you still need to declare them via CSS, so that the front-end knows how to apply them.

.has-custom-color-1 {
 color: #f78ae0 !important;
}

.has-custom-color-2 {
 color: #b0f566 !important;
}