Override theme's palette for custom block.

[crs1138]

We have created a bunch of custom blocks and a custom made theme that has a palette defined in theme.json as property settings.color.palette. Now, for some of the blocks we would like to override the theme palette and provide a block specific one instead. We can achieve that functionality for core blocks but not for our own. What are we doing wrong? Is that even possible?

Here is a relevant snippet of our theme.json:

{
    "$schema": "https://github.com/WordPress/gutenberg/blob/trunk/schemas/json/theme.json",
    "version": 2,
    "settings": {
        "color": {
            "custom": false,
            "defaultPalette": false,
            "palette": [
                {
                    "slug": "primary",
                    "color": "#6772E5",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#74E4A2",
                    "name": "Secondary"
                }
            ]
        },
        "blocks": {
            "cv-wp-gb-lib-blocks/cell": {
                "color": {
                    "palette": [
                        {
                            "slug": "custom",
                            "color": "#CCCCCC",
                            "name": "Custom"
                        }
                    ]
                }
            },
            "core/paragraph": {
                "color": {
                    "palette": [
                        {
                            "slug": "primary",
                            "color": "#6772E5",
                            "name": "Primary"
                        }
                    ]
                }
            }
        }
    }
}

And the blocks.json in our plugin:

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "cv-wp-gb-lib-blocks/cell",
    "title": "Cell",
    "category": "cvgb-blocks",
    "description": "",
    "keywords": ["Cell", "Box"],
    "attributes": {
        "isOrdered": {
            "type": "boolean",
            "default": false
        },
        "alignment": {
            "type": "string",
            "default": "left"
        }
    },
    "styles": [
        {
            "name": "default",
            "label": "Default",
            "isDefault": true
        },
        {
            "name": "light",
            "label": "Light"
        }
    ],
    "example": {},
    "supports": {
        "color": {
            "text": false,
            "background": true
        }
    }
}

The core/paragraph block behaves as desired but our custom block cv-wp-gb-lib-blocks/cell displays only the palette defined for the whole theme.

[t-hamano]

I have tested and could not reproduce it. How about testing with the latest WordPress and Gutenberg plugin?

Here are the steps:

• run npm @wordpress/create-block gutenpride

• Update gutenpride/build/block.json to support colors as follows:

  gutenpride/build/block.json

  {
    "supports": {
      "html": false,
      "color": {
        "text": false,
        "background": true
      }
    }
  }

• Add the following .wp-env.override.json to the gutenberg repo:

  .wp-env.override.json

  {
    "plugins": [
      ".",
      "../gutenpride"
    ]
  }

• Update Empty Theme's theme.json as follows:

  gutenberg/test/emptytheme/theme.json

  {
    "settings": {
      "color": {
          "custom": false,
          "defaultPalette": false,
          "palette": [
              {
                  "slug": "blue",
                  "color": "#0000ff",
                  "name": "Blue"
              }
          ]
      },
      "blocks": {
        "core/paragraph": {
          "color": {
            "palette": [
              {
                "slug": "red",
                "color": "#ff0000",
                "name": "Red"
              }
            ]
          }
        },
        "create-block/gutenpride": {
          "color": {
            "palette": [
              {
                "slug": "red",
                "color": "#ff0000",
                "name": "Red"
              }
            ]
          }
        }
      }
    }
  }

• npm run wp-env start -- --update

• Activate Empty Theme.

• Insert the heading, paragraph, gutenpride block.

---

Heading block has theme default palette:

Paragraph block has overridden palette:

Custom Block has overridden palette: