Allow `ref` to groups of settings in `theme.json`.

[jdamner]

What problem does this address?

At the moment, you can only ref to another single value in theme.json, but quite often you might want different elements/blocks to share the same settings. For example, the core/post-title block you may wish to have the same settings as the core/heading block so that the post-title inherits any settings for heading such as typography and font-sizes.

Another example where this would make perfect sense would be the core/query-pagination-next and core/query-pagination-previous - typically I'd expect most themes to want these two blocks to share the same settings/styles and at the moment duplication is required in order to achieve this.

What is your proposed solution?

To enable ref to refer to a whole section of settings in theme.json. Effectively have the following example work as you'd expect.

{
  "$schema": "https://schemas.wp.org/wp/6.4/theme.json",
  "description": "Example of group-based refs",
  "settings": {
    "blocks": {
      "core/heading": {
        "typography": {
          "fontSizes": [
            {
              "fluid": false,
              "name": "Small",
              "size": "1.3215rem",
              "slug": "small"
            },
            {
              "fluid": {
                "max": "1.75rem",
                "min": "1.5rem"
              },
              "name": "Default",
              "size": "1.7rem",
              "slug": "default"
            },
            {
              "fluid": {
                "max": "2.625rem",
                "min": "1.75rem"
              },
              "name": "Large",
              "size": "2.25rem",
              "slug": "large"
            }
          ]
        }
      },
      "core/post-title": {
        "ref": "settings.blocks.core/heading"
      }
    }
  },
  "styles": {
    "blocks":{
      "core/query-pagination-next": {
        "color": { 
          "text": "red",
          "background": "blue"
         },
         "spacing": {
          "padding": {
            "top": "1rem",
            "bottom": "1rem"
          }
         }
      },
      "core/query-pagination-previous": {
        "ref": "styles.blocks.core/query-pagination-next"
      }
    }
  }
}

In this instance, I would expect the core/heading and core/post-title should inherit the same settings, and the core/query-pagination-next and core/query-pagination-previous should share the same styles.

[bacoords]

I just wanted to add to this issue that this inconsistency effects any properties that can take an object in addition to a string.

For example, if I have a font size declared like this

"fontSize":"14px" or "fontSize":"var(...)"

on one element, I can reference it from another element.

But if I have a font size declared like this

                  "fontSize": {
            "fluid": {
                "min": "1.25rem",
                "max": "1.5rem"
              },
              "size": "1.5rem"
          }

it cannot be referenced from another element.