Avoid quoting CSS variables in formatFontFamily - #69926

What?

Fixes an issue where font families defined as CSS variables in theme.json (e.g., "fontFamily": "var(--font-family-variable)") are incorrectly quoted when rendered in the Site Editor → Styles → Typography → Fonts panel.

Why?

Currently, when a font family is defined using a CSS variable in theme.json, it is rendered with quotes in the Site Editor UI. This causes the font not to be recognized or applied correctly. However, in other parts of the system (like frontend rendering), these variables are left unquoted and work as expected. This inconsistency leads to bugs and confusion for theme developers and users.

How?

Updated the formatFontFamily utility to detect and preserve valid CSS variable definitions using a regular expression (/^var(--[a-zA-Z0-9_-]+(,.+)?)$/). When such a value is found, it is returned as-is, without additional formatting or quoting. Other font family names continue to be trimmed and quoted when necessary.

Testing Instructions

1. Testing Instructions
2. Add a theme.json to your theme with a fontFamilies entry like this:

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Base font",
          "slug": "base-font",
          "fontFamily": "var(--font-family-variable)"
        }
      ]
    }
  }
}

3. Open the Site Editor.
4. Go to Styles → Typography → Fonts.
5. Confirm that the font variable var(--font-family-variable) appears without surrounding quotes. (Inspect the element)