Skip to content

Allow use of ref in theme.json settings, as is possible with styles #57286

@kaelansmith

Description

@kaelansmith

What problem does this address?

I use theme.json settings > color > palette to set a "global" list of allowed colors to use throughout the whole block editor, then I restrict certain blocks to certain colors by providing a refined list of colors in settings > blocks > {block_name} > color > palette; however, it seems I have to manually re-define color objects (i.e. { "slug": "...", "name": "...", "color": "..." }) when defining a block-specific palette, and can't reference colors from my global palette in a dynamic way. I end up having to copy/paste the color definitions from my global palette into my block-specific palettes multiple times, resulting in tons of duplicate code that creates maintenance hell should I choose to change colors later. Example:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
     "color": {
       "palette": [
          {
             "slug": "primary",
             "name": "Primary",
             "color": "#2563EB"
          },
          {
             "slug": "secondary",
             "name": "Secondary",
             "color": "#121212"
          }
        ]
     },
     "blocks": {
       "core/button": {
          "color": {
              "palette": [
                  { // duplicate copy-pasted definition:
                     "slug": "primary",
                     "name": "Primary",
                     "color": "#2563EB"
                  }
               ]
           }
        }
     }
  }
}

What is your proposed solution?

In my troubleshooting/research I came across the introduction of the ref mechanism in theme.json's styles, where you can dynamically reference other values in the styles object/tree. This is exactly the solution I want, but for theme.json settings. I would have expected ref to be use-able throughout the whole theme.json tree, not just under styles.

Here's what I'd like:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
     "color": {
       "palette": [
          {
             "slug": "primary",
             "name": "Primary",
             "color": "#2563EB"
          },
          {
             "slug": "secondary",
             "name": "Secondary",
             "color": "#121212"
          }
        ]
     },
     "blocks": {
       "core/button": {
          "color": {
              "palette": [
                  { "ref": "settings.color.palette.primary" }
               ]
           }
        }
     }
  }
}

Please let me know if I'm missing an existing capability for achieving this!

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Package] Style Engine/packages/style-engine[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions