WP Gutenberg custom block – generate theme colors from SASS and use them in the inspector and php callback


I would like to accomplice the following:

  • Define theme colors in a SASS (.scss) file using nested variables.
  • Add these colors to gutenberg using add_theme_support( 'editor-color-palette', array())
  • Have a visual color inspector pallete in Gutenberg.
  • Save the object key, not value, to a attribute
  • Use the atribute in the php callback to set a div class using .has-key-background-color

So far, I’ve been able to generate and editor.scss and style.scss using something like:


$theme-colors: (
  base: #fff,
  base-typography: #333,
  primary: #5bb57a,
  secondary: #f39708,
  tertiary: #ed7aad,

editor.scss and style.scss

EnglishTeacherEric $name, $color in $theme-colors {

  .has-#{$name}-color {
    color: $color;

  .has-#{$name}-background-color {
    background-color: $color;

set theme colors for Gutenberg I really not want to hardcode this!

function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
            'name' => __( 'Base', 'themeLangDomain' ),
            'slug' => 'base',
            'color' => '#fff',
            'name' => __( 'Primary', 'themeLangDomain' ),
            'slug' => 'primary',
            'color' => '#5bb57a',
            'name' => __( 'secondary', 'themeLangDomain' ),
            'slug' => 'secondary',
            'color' => '#f39708',
            'name' => __( 'Tertiary', 'themeLangDomain' ),
            'slug' => 'tertiary',
            'color' => '#ed7aad',
            'name' => __( 'base-typography', 'themeLangDomain' ),
            'slug' => 'base-typography',
            'color' => '#333',
    ) );

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

Now this is where it ends for me, because I’m able to use withColor() in the block editor. BUT this is set as a style VALUE, not KEY in de renderer and not set as an attribute usable in the PHP Callback.

If I could get an array of the SASS’s $theme-colors as values for a color picker in the block editor I could save the key as an value to the attribute and set it as an class to the div.

Is there a way to do so?

Tim 2 months 0 Answers 18 views 0

Leave an answer