Documentation

Everything you need to get started with Blocksy Theme and Companion

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;
}
Not the solution you are looking for?

Please check other articles or open a support ticket.