Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dimension Controls: Sliders jump to custom input and are therefore basically not usable anymore #51619

Closed
hanneslsm opened this issue Jun 18, 2023 · 8 comments · Fixed by #52661
Assignees
Labels
[Type] Bug An existing feature does not function as intended

Comments

@hanneslsm
Copy link

Description

The behavior of sliders seem to have changed in 16.0.
It's not possible to use them anymore, since they automatically jump to a custom input after selecting.

Step-by-step reproduction instructions

  1. Create a theme with custom spacing sizes
  2. Try to use the slider

Screenshots, screen recording, code snippet

Screen.Recording.2023-06-18.at.10.54.01.mp4

Here is my theme.json:
image
image

Environment info

  • WP 6.2.2
  • GB 16
  • Custom theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@aaronrobertshaw
Copy link
Contributor

aaronrobertshaw commented Jun 19, 2023

Thank you for taking the time to report this issue @hanneslsm 🙇

Unfortunately, I can't be 100% sure I'm testing with the correct theme.json settings as the screenshots in the above issue description are incomplete. I've made a "best guess" using TwentyTwentyThree as a base, and you can see the theme.json I've been testing with below.

Theme.json using TT3 as a base
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "customTemplates": [
    {
      "name": "blank",
      "postTypes": ["page", "post"],
      "title": "Blank"
    },
    {
      "name": "blog-alternative",
      "postTypes": ["page"],
      "title": "Blog (Alternative)"
    },
    {
      "name": "404",
      "postTypes": ["page"],
      "title": "404"
    }
  ],
  "settings": {
    "appearanceTools": true,
    "color": {
      "palette": [
        {
          "color": "#ffffff",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#000000",
          "name": "Contrast",
          "slug": "contrast"
        },
        {
          "color": "#9DFF20",
          "name": "Primary",
          "slug": "primary"
        },
        {
          "color": "#345C00",
          "name": "Secondary",
          "slug": "secondary"
        },
        {
          "color": "#F6F6F6",
          "name": "Tertiary",
          "slug": "tertiary"
        }
      ]
    },
    "layout": {
      "contentSize": "650px",
      "wideSize": "1200px"
    },
    "spacing": {
	  "spacingScale": {
		"steps": 0
	  },
      "spacingSizes": [
        {
          "name": "8px",
          "size": "var(--wp--preset--font-size--8)",
          "slug": "8"
        },
        {
          "name": "12px",
          "size": "var(--wp--preset--font-size--12)",
          "slug": "12"
        },
        {
          "name": "16px",
          "size": "var(--wp--preset--font-size--16)",
          "slug": "16"
        },
        {
          "name": "24px",
          "size": "var(--wp--preset--font-size--24)",
          "slug": "24"
        },
        {
          "name": "36px",
          "size": "var(--wp--preset--font-size--36)",
          "slug": "36"
        },
        {
          "name": "48px",
          "size": "var(--wp--preset--font-size--48)",
          "slug": "48"
        }
      ],
      "units": ["%", "px", "em", "rem", "vh", "vw"]
    },
    "typography": {
      "dropCap": false,
      "fluid": true,
      "fontFamilies": [
        {
          "fontFace": [
            {
              "fontFamily": "DM Sans",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/dm-sans/DMSans-Regular.woff2"]
            },
            {
              "fontFamily": "DM Sans",
              "fontStretch": "normal",
              "fontStyle": "italic",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/dm-sans/DMSans-Regular-Italic.woff2"]
            },
            {
              "fontFamily": "DM Sans",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/dm-sans/DMSans-Bold.woff2"]
            },
            {
              "fontFamily": "DM Sans",
              "fontStretch": "normal",
              "fontStyle": "italic",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2"]
            }
          ],
          "fontFamily": "\"DM Sans\", sans-serif",
          "name": "DM Sans",
          "slug": "dm-sans"
        },
        {
          "fontFace": [
            {
              "fontDisplay": "block",
              "fontFamily": "IBM Plex Mono",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": [
                "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Light.woff2"
              ]
            },
            {
              "fontDisplay": "block",
              "fontFamily": "IBM Plex Mono",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2"
              ]
            },
            {
              "fontDisplay": "block",
              "fontFamily": "IBM Plex Mono",
              "fontStretch": "normal",
              "fontStyle": "italic",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2"
              ]
            },
            {
              "fontDisplay": "block",
              "fontFamily": "IBM Plex Mono",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": [
                "file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2"
              ]
            }
          ],
          "fontFamily": "'IBM Plex Mono', monospace",
          "name": "IBM Plex Mono",
          "slug": "ibm-plex-mono"
        },
        {
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "200 900",
              "src": [
                "file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf"
              ]
            }
          ],
          "fontFamily": "\"Inter\", sans-serif",
          "name": "Inter",
          "slug": "inter"
        },
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
          "name": "System Font",
          "slug": "system-font"
        },
        {
          "fontFace": [
            {
              "fontFamily": "Source Serif Pro",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "200 900",
              "src": [
                "file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2"
              ]
            },
            {
              "fontFamily": "Source Serif Pro",
              "fontStretch": "normal",
              "fontStyle": "italic",
              "fontWeight": "200 900",
              "src": [
                "file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2"
              ]
            }
          ],
          "fontFamily": "\"Source Serif Pro\", serif",
          "name": "Source Serif Pro",
          "slug": "source-serif-pro"
        }
      ],
      "fontSizes": [
        {
          "fluid": {
            "min": "96px",
            "max": "64px"
          },
          "name": "96px",
          "size": "96px",
          "slug": "96"
        },
        {
          "fluid": {
            "min": "64px",
            "max": "48px"
          },
          "name": "64px",
          "size": "64px",
          "slug": "64"
        },
        {
          "fluid": {
            "min": "48px",
            "max": "36px"
          },
          "name": "48px",
          "size": "48px",
          "slug": "48"
        },
        {
          "fluid": {
            "min": "36px",
            "max": "24px"
          },
          "name": "36px",
          "size": "36px",
          "slug": "36"
        },
        {
          "fluid": {
            "min": "24px",
            "max": "16px"
          },
          "name": "24px",
          "size": "24px",
          "slug": "24"
        },
        {
          "fluid": {
            "min": "16px",
            "max": "12px"
          },
          "name": "16px",
          "size": "16px",
          "slug": "16"
        },
        {
          "fluid": {
            "min": "12px",
            "max": "8px"
          },
          "name": "12px",
          "size": "12px",
          "slug": "12"
        },
        {
          "fluid": {
            "min": "8px",
            "max": "8px"
          },
          "name": "8px",
          "size": "8px",
          "slug": "8"
        }
      ]
    },
    "useRootPaddingAwareAlignments": true
  },
  "styles": {
    "blocks": {
      "core/navigation": {
        "elements": {
          "link": {
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            },
            ":focus": {
              "typography": {
                "textDecoration": "underline dashed"
              }
            },
            ":active": {
              "typography": {
                "textDecoration": "none"
              }
            },
            "typography": {
              "textDecoration": "none"
            }
          }
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        }
      },
      "core/post-author": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        }
      },
      "core/post-content": {
        "elements": {
          "link": {
            "color": {
              "text": "var(--wp--preset--color--secondary)"
            }
          }
        }
      },
      "core/post-excerpt": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/post-date": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)",
          "fontWeight": "400"
        },
        "elements": {
          "link": {
            "typography": {
              "textDecoration": "none"
            },
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            }
          }
        }
      },
      "core/post-terms": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        }
      },
      "core/post-title": {
        "spacing": {
          "margin": {
            "bottom": "1.25rem",
            "top": "1.25rem"
          }
        },
        "typography": {
          "fontWeight": "400"
        },
        "elements": {
          "link": {
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            },
            ":focus": {
              "typography": {
                "textDecoration": "underline dashed"
              }
            },
            ":active": {
              "color": {
                "text": "var(--wp--preset--color--secondary)"
              },
              "typography": {
                "textDecoration": "none"
              }
            },
            "typography": {
              "textDecoration": "none"
            }
          }
        }
      },
      "core/comments-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--large)"
        },
        "spacing": {
          "margin": {
            "bottom": "var(--wp--preset--spacing--40)"
          }
        }
      },
      "core/comment-author-name": {
        "elements": {
          "link": {
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            },
            ":focus": {
              "typography": {
                "textDecoration": "underline dashed"
              }
            },
            ":active": {
              "color": {
                "text": "var(--wp--preset--color--secondary)"
              },
              "typography": {
                "textDecoration": "none"
              }
            },
            "typography": {
              "textDecoration": "none"
            }
          }
        }
      },
      "core/comment-date": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        },
        "elements": {
          "link": {
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            },
            ":focus": {
              "typography": {
                "textDecoration": "underline dashed"
              }
            },
            ":active": {
              "color": {
                "text": "var(--wp--preset--color--secondary)"
              },
              "typography": {
                "textDecoration": "none"
              }
            },
            "typography": {
              "textDecoration": "none"
            }
          }
        }
      },
      "core/comment-edit-link": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        }
      },
      "core/comment-reply-link": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)"
        }
      },
      "core/comments-pagination": {
        "spacing": {
          "margin": {
            "top": "var(--wp--preset--spacing--40)"
          }
        },
        "elements": {
          "link": {
            "typography": {
              "textDecoration": "none"
            }
          }
        }
      },
      "core/pullquote": {
        "border": {
          "style": "solid",
          "width": "1px 0"
        },
        "elements": {
          "cite": {
            "typography": {
              "fontSize": "var(--wp--preset--font-size--small)",
              "fontStyle": "normal",
              "textTransform": "none"
            }
          }
        },
        "typography": {
          "lineHeight": "1.3"
        },
        "spacing": {
          "margin": {
            "bottom": "var(--wp--preset--spacing--40) !important",
            "top": "var(--wp--preset--spacing--40) !important"
          }
        }
      },
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": "var(--wp--preset--font-size--x-large)"
            }
          }
        }
      },
      "core/query-pagination": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--small)",
          "fontWeight": "400"
        },
        "elements": {
          "link": {
            "typography": {
              "textDecoration": "none"
            },
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            }
          }
        }
      },
      "core/quote": {
        "border": {
          "width": "1px"
        },
        "elements": {
          "cite": {
            "typography": {
              "fontSize": "var(--wp--preset--font-size--small)",
              "fontStyle": "normal"
            }
          }
        },
        "spacing": {
          "padding": {
            "left": "var(--wp--preset--spacing--30)",
            "right": "var(--wp--preset--spacing--30)"
          }
        }
      },
      "core/site-title": {
        "elements": {
          "link": {
            ":hover": {
              "typography": {
                "textDecoration": "underline"
              }
            },
            ":focus": {
              "typography": {
                "textDecoration": "underline dashed"
              }
            },
            ":active": {
              "color": {
                "text": "var(--wp--preset--color--secondary)"
              },
              "typography": {
                "textDecoration": "none"
              }
            },
            "typography": {
              "textDecoration": "none"
            }
          }
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)",
          "fontWeight": "normal",
          "lineHeight": "1.4"
        }
      }
    },
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":visited": {
          "color": {
            "text": "var(--wp--preset--color--contrast)"
          }
        }
      },
      "h1": {
        "typography": {
          "fontSize": "3.625rem",
          "lineHeight": "1.2"
        }
      },
      "h2": {
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)",
          "lineHeight": "1.2"
        }
      },
      "h3": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--x-large)"
        }
      },
      "h4": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--large)"
        }
      },
      "h5": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)",
          "fontWeight": "700",
          "textTransform": "uppercase"
        }
      },
      "h6": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)",
          "textTransform": "uppercase"
        }
      },
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
    },
    "spacing": {
      "blockGap": "1.5rem",
      "padding": {
        "top": "var(--wp--preset--spacing--40)",
        "right": "var(--wp--preset--spacing--30)",
        "bottom": "var(--wp--preset--spacing--40)",
        "left": "var(--wp--preset--spacing--30)"
      }
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system-font)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    }
  },
  "templateParts": [
    {
      "area": "header",
      "name": "header",
      "title": "Header"
    },
    {
      "area": "footer",
      "name": "footer",
      "title": "Footer"
    },
    {
      "area": "uncategorized",
      "name": "comments",
      "title": "Comments"
    },
    {
      "area": "uncategorized",
      "name": "post-meta",
      "title": "Post Meta"
    }
  ]
} 

It appears the problem might be with the theme.json configuration for the spacing presets.

If I'm correct, the spacing preset values when applied will reference the calculated value of the font size presets. This means, when the 12px spacing size option is selected the value of var(--wp--preset--font-size--12) is applied to the block's spacing styles. This calculated value doesn't match any of the preset values in your theme.json config as they are all var() strings. As no matching preset is found, the control expects this to have been a custom value entered by a user, hence the switch to the custom input.

@glendaviesnz might have some further insight into how the spacing control was intended to handle referenced preset values.

For the record, the handling of these has not changed in 16.0. It also appears that referencing other style presets within settings isn't supported, only referencing other root-level styles within the styles config (not settings). You can read more in the theme.json docs.

In the meantime, @hanneslsm would you mind supplying your current theme.json so we can test with the same settings?

@glendaviesnz
Copy link
Contributor

glendaviesnz commented Jun 19, 2023

@hanneslsm I managed to get your spacing presets setup working on 15.9, the likes of the spacing preset of --wp--preset--spacing--8 will be applied, but this will just be a reference back to var(--wp--preset--font-size--8). I will take a look and see if I can work out what changes in 16.0 have stopped this from working.

@hanneslsm
Copy link
Author

Here is my current theme.json:

Details

{
  "$schema": "https://schemas.wp.org/wp/6.2/theme.json",
  "settings": {
    "appearanceTools": true,
    "blocks": {
      "core/code": {
        "appearanceTools": true,
        "color": {
          "background": true,
          "custom": true,
          "customDuotone": true,
          "customGradient": true,
          "duotone": [],
          "gradients": [],
          "palette": [
            {
              "color": "#fbfcfd",
              "name": "Neutral 1 - Subtle backgrounds",
              "slug": "neutral-1"
            },
            {
              "color": "#eceef0",
              "name": "Neutral 2 - Component backgrounds",
              "slug": "neutral-2"
            },
            {
              "color": "#dfe3e6",
              "name": "Neutral 3 - Borders",
              "slug": "neutral-3"
            },
            {
              "color": "#889096",
              "name": "Neutral 4 - Solid backgrounds",
              "slug": "neutral-4"
            },
            {
              "color": "#687076",
              "name": "Neutral 5 - low-contrast text",
              "slug": "neutral-5"
            },
            {
              "color": "#11181c",
              "name": "Neutral 6 - high-contrast text",
              "slug": "neutral-6"
            },
            {
              "color": "#fbfdff",
              "name": "Primary 1 - Subtle backgrounds",
              "slug": "primary-1"
            },
            {
              "color": "#e1f0ff",
              "name": "Primary 2 - Component backgrounds",
              "slug": "primary-2"
            },
            {
              "color": "#b7d9f8",
              "name": "Primary 3 - Borders",
              "slug": "primary-3"
            },
            {
              "color": "#0091ff",
              "name": "Primary 4 - Solid backgrounds",
              "slug": "primary-4"
            },
            {
              "color": "#006adc",
              "name": "Primary 5 - Low-contrast text",
              "slug": "primary-5"
            },
            {
              "color": "#00254d",
              "name": "Primary 6 - High-contrast text",
              "slug": "primary-6"
            },
            {
              "color": "#fffcfe",
              "name": "Secondary 1 - Subtle backgrounds",
              "slug": "secondary-1"
            },
            {
              "color": "#fce5f3",
              "name": "Secondary 2 - Component backgrounds",
              "slug": "secondary-2"
            },
            {
              "color": "#f3c6e2",
              "name": "Secondary 3 - Borders",
              "slug": "secondary-3"
            },
            {
              "color": "#d6409f",
              "name": "Secondary 4 - Solid backgrounds",
              "slug": "secondary-4"
            },
            {
              "color": "#cd1d8d",
              "name": "Secondary 5 - Low-contrast text",
              "slug": "secondary-5"
            },
            {
              "color": "#3b0a2a",
              "name": "Secondary 6 - High-contrast text",
              "slug": "secondary-6"
            },
            {
              "color": "#fefdfb",
              "name": "Tertiary 1 - Subtle backgrounds",
              "slug": "tertiary-1"
            },
            {
              "color": "#ffecbc",
              "name": "Tertiary 2 - Component backgrounds",
              "slug": "tertiary-2"
            },
            {
              "color": "#ffd386",
              "name": "Tertiary 3 - Borders",
              "slug": "tertiary-3"
            },
            {
              "color": "#ffb224",
              "name": "Tertiary 4 - Solid backgrounds",
              "slug": "tertiary-4"
            },
            {
              "color": "#ad5700",
              "name": "Tertiary 5 - Low-contrast text",
              "slug": "tertiary-5"
            },
            {
              "color": "#4e2009",
              "name": "Tertiary 6 - High-contrast text",
              "slug": "tertiary-6"
            },
            {
              "color": "#fffcfc",
              "name": "Error 1 - Subtle backgrounds",
              "slug": "error-1"
            },
            {
              "color": "#ffe6e2",
              "name": "Error 2 - Component backgrounds",
              "slug": "error-2"
            },
            {
              "color": "#fac7be",
              "name": "Error 3 - Borders",
              "slug": "error-3"
            },
            {
              "color": "#e54d2e",
              "name": "Error 4 - Solid backgrounds",
              "slug": "error-4"
            },
            {
              "color": "#ca3214",
              "name": "Error 5 - Low-contrast text",
              "slug": "error-5"
            },
            {
              "color": "#341711",
              "name": "Error 6 - High-contrast text",
              "slug": "error-6"
            },
            {
              "color": "#fdfdf9",
              "name": "Warning 1 - Subtle backgrounds",
              "slug": "warning-1"
            },
            {
              "color": "#fffce8",
              "name": "Warning 2 - Component backgrounds",
              "slug": "warning-2"
            },
            {
              "color": "#fffbd1",
              "name": "Warning 3 - Borders",
              "slug": "warning-3"
            },
            {
              "color": "#ebbc00",
              "name": "Warning 4 - Solid backgrounds",
              "slug": "warning-4"
            },
            {
              "color": "#946800",
              "name": "Warning 5 - Low-contrast text",
              "slug": "warning-5"
            },
            {
              "color": "#35290f",
              "name": "Warning 6 - High-contrast text",
              "slug": "warning-6"
            },
            {
              "color": "#fcfdfa",
              "name": "Success 1 - Subtle backgrounds",
              "slug": "success-1"
            },
            {
              "color": "#f7fcf0",
              "name": "Success 2 - Component backgrounds",
              "slug": "success-2"
            },
            {
              "color": "#eefadc",
              "name": "Success 3 - Borders",
              "slug": "success-3"
            },
            {
              "color": "#94ba2c",
              "name": "Success 4 - Solid backgrounds",
              "slug": "success-4"
            },
            {
              "color": "#5d770d",
              "name": "Success 5 - Low-contrast text",
              "slug": "success-5"
            },
            {
              "color": "#263209",
              "name": "Success 6 - High-contrast text",
              "slug": "success-6"
            },
            {
              "color": "#f9feff",
              "name": "Action 1 - Subtle backgrounds",
              "slug": "action-1"
            },
            {
              "color": "#f1fcff",
              "name": "Action 2 - Component backgrounds",
              "slug": "action-2"
            },
            {
              "color": "#e4f9ff",
              "name": "Action 3 - Borders",
              "slug": "action-3"
            },
            {
              "color": "#2ebde5",
              "name": "Action 4 - Solid backgrounds",
              "slug": "action-4"
            },
            {
              "color": "#0078a1",
              "name": "Action 5 - Low-contrast text",
              "slug": "action-5"
            },
            {
              "color": "#003242",
              "name": "Action 6 - High-contrast text",
              "slug": "action-6"
            },
            {
              "color": "#fff",
              "name": "White",
              "slug": "white"
            },
            {
              "color": "#000",
              "name": "Black",
              "slug": "black"
            }
          ],
          "text": true
        },
        "layout": {
          "contentSize": false,
          "definitions": {
            "constrained": {
              "baseStyles": [
                {
                  "rules": {
                    "float": "left",
                    "margin-inline-end": "2em",
                    "margin-inline-start": "0"
                  },
                  "selector": " > .alignleft"
                },
                {
                  "rules": {
                    "float": "right",
                    "margin-inline-end": "0",
                    "margin-inline-start": "2em"
                  },
                  "selector": " > .alignright"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important"
                  },
                  "selector": " > .aligncenter"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important",
                    "max-width": "var(--wp--style--global--content-size)"
                  },
                  "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))"
                },
                {
                  "rules": {
                    "max-width": "var(--wp--style--global--wide-size)"
                  },
                  "selector": " > .alignwide"
                }
              ],
              "className": "is-layout-constrained",
              "name": "constrained",
              "slug": "constrained",
              "spacingStyles": [
                {
                  "rules": {
                    "margin-block-start": "0"
                  },
                  "selector": " > :first-child:first-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0"
                  },
                  "selector": " > :last-child:last-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0",
                    "margin-block-start": null
                  },
                  "selector": " > *"
                }
              ]
            },
            "default": {
              "baseStyles": [
                {
                  "rules": {
                    "float": "left",
                    "margin-inline-end": "2em",
                    "margin-inline-start": "0"
                  },
                  "selector": " > .alignleft"
                },
                {
                  "rules": {
                    "float": "right",
                    "margin-inline-end": "0",
                    "margin-inline-start": "2em"
                  },
                  "selector": " > .alignright"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important"
                  },
                  "selector": " > .aligncenter"
                }
              ],
              "className": "is-layout-flow",
              "name": "default",
              "slug": "flow",
              "spacingStyles": [
                {
                  "rules": {
                    "margin-block-start": "0"
                  },
                  "selector": " > :first-child:first-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0"
                  },
                  "selector": " > :last-child:last-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0",
                    "margin-block-start": null
                  },
                  "selector": " > *"
                }
              ]
            },
            "flex": {
              "baseStyles": [
                {
                  "rules": {
                    "align-items": "center",
                    "flex-wrap": "wrap"
                  },
                  "selector": ""
                },
                {
                  "rules": {
                    "margin": "0"
                  },
                  "selector": " > *"
                }
              ],
              "className": "is-layout-flex",
              "displayMode": "flex",
              "name": "flex",
              "slug": "flex",
              "spacingStyles": [
                {
                  "rules": {
                    "gap": null
                  },
                  "selector": ""
                }
              ]
            },
            "grid": {
              "baseStyles": [
                {
                  "rules": {
                    "margin": "0"
                  },
                  "selector": " > *"
                }
              ],
              "className": "is-layout-grid",
              "displayMode": "grid",
              "name": "grid",
              "slug": "grid",
              "spacingStyles": [
                {
                  "rules": {
                    "gap": null
                  },
                  "selector": ""
                }
              ]
            }
          },
          "wideSize": false
        },
        "position": {
          "fixed": true
        },
        "shadow": {
          "defaultPresets": true,
          "presets": []
        },
        "spacing": {
          "customSpacingSize": true,
          "spacingScale": {
            "increment": 1.5,
            "mediumStep": 1.5,
            "operator": "*",
            "steps": 7,
            "unit": "rem"
          },
          "spacingSizes": [
            {
              "name": "8px",
              "size": "var(--wp--preset--font-size--8)",
              "slug": "8"
            },
            {
              "name": "12px",
              "size": "var(--wp--preset--font-size--12)",
              "slug": "12"
            },
            {
              "name": "16px",
              "size": "var(--wp--preset--font-size--16)",
              "slug": "16"
            },
            {
              "name": "24px",
              "size": "var(--wp--preset--font-size--24)",
              "slug": "24"
            },
            {
              "name": "36px",
              "size": "var(--wp--preset--font-size--36)",
              "slug": "36"
            },
            {
              "name": "48px",
              "size": "var(--wp--preset--font-size--48)",
              "slug": "48"
            },
            {
              "name": "60px",
              "size": "var(--wp--preset--font-size--64)",
              "slug": "60"
            },
            {
              "name": "96px",
              "size": "var(--wp--preset--font-size--96)",
              "slug": "96"
            }
          ],
          "units": ["%", "em", "px", "rem", "vh", "vw"]
        },
        "typography": {
          "customFontSize": true,
          "dropCap": true,
          "fluid": true,
          "fontFamilies": [
            {
              "fontFace": [],
              "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
              "name": "System Font",
              "slug": "system-font"
            },
            {
              "fontFace": [
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "400",
                  "src": ["file:./assets/fonts/inter_normal_400.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "500",
                  "src": ["file:./assets/fonts/inter_normal_500.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "600",
                  "src": ["file:./assets/fonts/inter_normal_600.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "700",
                  "src": ["file:./assets/fonts/inter_normal_700.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "800",
                  "src": ["file:./assets/fonts/inter_normal_800.ttf"]
                }
              ],
              "fontFamily": "Inter",
              "slug": "inter"
            }
          ],
          "fontSizes": [
            {
              "fluid": {
                "max": "96px",
                "min": "64px"
              },
              "name": "96px",
              "size": "96px",
              "slug": "96"
            },
            {
              "fluid": {
                "max": "64px",
                "min": "48px"
              },
              "name": "64px",
              "size": "64px",
              "slug": "64"
            },
            {
              "fluid": {
                "max": "48px",
                "min": "36px"
              },
              "name": "48px",
              "size": "48px",
              "slug": "48"
            },
            {
              "fluid": {
                "max": "36px",
                "min": "30px"
              },
              "name": "36px",
              "size": "36px",
              "slug": "36"
            },
            {
              "fluid": {
                "max": "30px",
                "min": "24px"
              },
              "name": "30px",
              "size": "30px",
              "slug": "30"
            },
            {
              "fluid": {
                "max": "24px",
                "min": "20px"
              },
              "name": "24px",
              "size": "24px",
              "slug": "24"
            },
            {
              "fluid": {
                "max": "20px",
                "min": "18px"
              },
              "name": "20px",
              "size": "20px",
              "slug": "20"
            },
            {
              "fluid": {
                "max": "18px",
                "min": "16px"
              },
              "name": "18px",
              "size": "18px",
              "slug": "18"
            },
            {
              "fluid": {
                "max": "16px",
                "min": "14px"
              },
              "name": "16px Base",
              "size": "16px",
              "slug": "16"
            },
            {
              "fluid": {
                "max": "14px",
                "min": "13px"
              },
              "name": "14px",
              "size": "14px",
              "slug": "14"
            },
            {
              "fluid": {
                "max": "12px",
                "min": "12px"
              },
              "name": "12px",
              "size": "12px",
              "slug": "12"
            },
            {
              "fluid": {
                "max": "8px",
                "min": "8px"
              },
              "name": "8px",
              "size": "8px",
              "slug": "8"
            },
            {
              "name": "Inherit",
              "size": "inherit",
              "slug": "inherit"
            }
          ],
          "fontStyle": true,
          "fontWeight": true,
          "letterSpacing": true,
          "textDecoration": true,
          "textTransform": true
        },
        "useRootPaddingAwareAlignments": true
      },
      "core/heading": {
        "appearanceTools": true,
        "color": {
          "background": true,
          "custom": true,
          "customDuotone": true,
          "customGradient": true,
          "duotone": [],
          "gradients": [],
          "text": true
        },
        "layout": {
          "contentSize": false,
          "definitions": {
            "constrained": {
              "baseStyles": [
                {
                  "rules": {
                    "float": "left",
                    "margin-inline-end": "2em",
                    "margin-inline-start": "0"
                  },
                  "selector": " > .alignleft"
                },
                {
                  "rules": {
                    "float": "right",
                    "margin-inline-end": "0",
                    "margin-inline-start": "2em"
                  },
                  "selector": " > .alignright"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important"
                  },
                  "selector": " > .aligncenter"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important",
                    "max-width": "var(--wp--style--global--content-size)"
                  },
                  "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))"
                },
                {
                  "rules": {
                    "max-width": "var(--wp--style--global--wide-size)"
                  },
                  "selector": " > .alignwide"
                }
              ],
              "className": "is-layout-constrained",
              "name": "constrained",
              "slug": "constrained",
              "spacingStyles": [
                {
                  "rules": {
                    "margin-block-start": "0"
                  },
                  "selector": " > :first-child:first-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0"
                  },
                  "selector": " > :last-child:last-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0",
                    "margin-block-start": null
                  },
                  "selector": " > *"
                }
              ]
            },
            "default": {
              "baseStyles": [
                {
                  "rules": {
                    "float": "left",
                    "margin-inline-end": "2em",
                    "margin-inline-start": "0"
                  },
                  "selector": " > .alignleft"
                },
                {
                  "rules": {
                    "float": "right",
                    "margin-inline-end": "0",
                    "margin-inline-start": "2em"
                  },
                  "selector": " > .alignright"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important"
                  },
                  "selector": " > .aligncenter"
                }
              ],
              "className": "is-layout-flow",
              "name": "default",
              "slug": "flow",
              "spacingStyles": [
                {
                  "rules": {
                    "margin-block-start": "0"
                  },
                  "selector": " > :first-child:first-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0"
                  },
                  "selector": " > :last-child:last-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0",
                    "margin-block-start": null
                  },
                  "selector": " > *"
                }
              ]
            },
            "flex": {
              "baseStyles": [
                {
                  "rules": {
                    "align-items": "center",
                    "flex-wrap": "wrap"
                  },
                  "selector": ""
                },
                {
                  "rules": {
                    "margin": "0"
                  },
                  "selector": " > *"
                }
              ],
              "className": "is-layout-flex",
              "displayMode": "flex",
              "name": "flex",
              "slug": "flex",
              "spacingStyles": [
                {
                  "rules": {
                    "gap": null
                  },
                  "selector": ""
                }
              ]
            },
            "grid": {
              "baseStyles": [
                {
                  "rules": {
                    "margin": "0"
                  },
                  "selector": " > *"
                }
              ],
              "className": "is-layout-grid",
              "displayMode": "grid",
              "name": "grid",
              "slug": "grid",
              "spacingStyles": [
                {
                  "rules": {
                    "gap": null
                  },
                  "selector": ""
                }
              ]
            }
          },
          "wideSize": false
        },
        "shadow": {
          "defaultPresets": true,
          "presets": []
        },
        "spacing": {
          "customSpacingSize": true,
          "spacingScale": {
            "increment": 1.5,
            "mediumStep": 1.5,
            "operator": "*",
            "steps": 7,
            "unit": "rem"
          },
          "spacingSizes": [
            {
              "name": "12px",
              "size": "var(--wp--preset--font-size--12)",
              "slug": "12"
            },
            {
              "name": "16px",
              "size": "var(--wp--preset--font-size--16)",
              "slug": "16"
            },
            {
              "name": "24px",
              "size": "var(--wp--preset--font-size--24)",
              "slug": "24"
            },
            {
              "name": "36px",
              "size": "var(--wp--preset--font-size--36)",
              "slug": "36"
            },
            {
              "name": "48px",
              "size": "var(--wp--preset--font-size--48)",
              "slug": "48"
            },
            {
              "name": "60px",
              "size": "var(--wp--preset--font-size--64)",
              "slug": "60"
            },
            {
              "name": "96px",
              "size": "var(--wp--preset--font-size--96)",
              "slug": "96"
            }
          ],
          "units": ["%", "em", "px", "rem", "vh", "vw"]
        },
        "typography": {
          "customFontSize": true,
          "dropCap": true,
          "fluid": true,
          "fontFamilies": [
            {
              "fontFace": [],
              "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
              "name": "System Font",
              "slug": "system-font"
            },
            {
              "fontFace": [
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "400",
                  "src": ["file:./assets/fonts/inter_normal_400.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "medium",
                  "fontWeight": "500",
                  "src": ["file:./assets/fonts/inter_normal_500.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "semibold",
                  "fontWeight": "600",
                  "src": ["file:./assets/fonts/inter_normal_600.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "bold",
                  "fontWeight": "700",
                  "src": ["file:./assets/fonts/inter_normal_700.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "extrabold",
                  "fontWeight": "800",
                  "src": ["file:./assets/fonts/inter_normal_800.ttf"]
                }
              ],
              "fontFamily": "Inter",
              "slug": "inter"
            }
          ],
          "fontSizes": [
            {
              "fluid": {
                "max": "96px",
                "min": "64px"
              },
              "name": "96px",
              "size": "96px",
              "slug": "96"
            },
            {
              "fluid": {
                "max": "64px",
                "min": "48px"
              },
              "name": "64px",
              "size": "64px",
              "slug": "64"
            },
            {
              "fluid": {
                "max": "48px",
                "min": "36px"
              },
              "name": "48px",
              "size": "48px",
              "slug": "48"
            },
            {
              "fluid": {
                "max": "36px",
                "min": "30px"
              },
              "name": "36px",
              "size": "36px",
              "slug": "36"
            },
            {
              "fluid": {
                "max": "30px",
                "min": "24px"
              },
              "name": "30px",
              "size": "30px",
              "slug": "30"
            },
            {
              "fluid": {
                "max": "24px",
                "min": "20px"
              },
              "name": "24px",
              "size": "24px",
              "slug": "24"
            },
            {
              "fluid": {
                "max": "20px",
                "min": "18px"
              },
              "name": "20px",
              "size": "20px",
              "slug": "20"
            },
            {
              "fluid": {
                "max": "18px",
                "min": "16px"
              },
              "name": "18px",
              "size": "18px",
              "slug": "18"
            },
            {
              "fluid": {
                "max": "16px",
                "min": "14px"
              },
              "name": "16px Base",
              "size": "16px",
              "slug": "16"
            },
            {
              "fluid": {
                "max": "14px",
                "min": "13px"
              },
              "name": "14px",
              "size": "14px",
              "slug": "14"
            },
            {
              "fluid": {
                "max": "12px",
                "min": "12px"
              },
              "name": "12px",
              "size": "12px",
              "slug": "12"
            },
            {
              "fluid": {
                "max": "8px",
                "min": "8px"
              },
              "name": "8px",
              "size": "8px",
              "slug": "8"
            },
            {
              "name": "Inherit",
              "size": "inherit",
              "slug": "inherit"
            }
          ],
          "fontStyle": true,
          "fontWeight": true,
          "letterSpacing": true,
          "textDecoration": true,
          "textTransform": true
        },
        "useRootPaddingAwareAlignments": true
      }
    },
    "color": {
      "defaultDuotone": false,
      "defaultGradients": false,
      "defaultPalette": false,
      "gradients": [
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--neutral-2) 100%)",
          "name": "White - Neutral 2 - 0deg",
          "slug": "white-neutral-2"
        },
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--colora-2) 100%)",
          "name": "White - ColorA 2 - 0deg",
          "slug": "white-colora-2"
        },
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--colorb-2) 100%)",
          "name": "White - ColorB 2 - 0deg",
          "slug": "white-colorb-2"
        },
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--colorc-2) 100%)",
          "name": "White - ColorC 2 - 0deg",
          "slug": "white-colorc-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-1) 0%, var(--wp--preset--color--neutral-2) 100%)",
          "name": "Neutral 1 - Neutral 2 - 45deg",
          "slug": "neutral-1-neutral-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-2) 0%, var(--wp--preset--color--neutral-3) 100%)",
          "name": "Neutral 2 - Neutral 3 - 45deg",
          "slug": "neutral-2-neutral-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-2) 0%, var(--wp--preset--color--neutral-4) 100%)",
          "name": "Neutral 2 - Neutral 4 - 45deg",
          "slug": "neutral-2-neutral-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-3) 0%, var(--wp--preset--color--neutral-4) 100%)",
          "name": "Neutral 3 - Neutral 4 - 45deg",
          "slug": "neutral-3-neutral-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-4) 0%, var(--wp--preset--color--neutral-5) 100%)",
          "name": "Neutral 4 - Neutral 5 - 45deg",
          "slug": "neutral-4-neutral-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-5) 0%, var(--wp--preset--color--neutral-6) 100%)",
          "name": "Neutral 5 - Neutral 6 - 45deg",
          "slug": "neutral-5-neutral-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colora-1) 0%, var(--wp--preset--color--colora-2) 100%)",
          "name": "ColorA 1 - ColorA 2 - 45deg",
          "slug": "colora-1-colora-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colora-2) 0%, var(--wp--preset--color--colora-3) 100%)",
          "name": "ColorA 2 - ColorA 3 - 45deg",
          "slug": "colora-2-colora-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colora-3) 0%, var(--wp--preset--color--colora-4) 100%)",
          "name": "ColorA 3 - ColorA 4 - 45deg",
          "slug": "colora-3-colora-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colora-4) 0%, var(--wp--preset--color--colora-5) 100%)",
          "name": "ColorA 4 - ColorA 5 - 45deg",
          "slug": "colora-4-colora-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colora-5) 0%, var(--wp--preset--color--colora-6) 100%)",
          "name": "ColorA 5 - ColorA 6 - 45deg",
          "slug": "colora-5-colora-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorb-1) 0%, var(--wp--preset--color--colorb-2) 100%)",
          "name": "ColorB 1 - ColorB 2 - 45deg",
          "slug": "colorb-1-colorb-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorb-2) 0%, var(--wp--preset--color--colorb-3) 100%)",
          "name": "ColorB 2 - ColorB 3 - 45deg",
          "slug": "colorb-2-colorb-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorb-3) 0%, var(--wp--preset--color--colorb-4) 100%)",
          "name": "ColorB 3 - ColorB 4 - 45deg",
          "slug": "colorb-3-colorb-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorb-4) 0%, var(--wp--preset--color--colorb-5) 100%)",
          "name": "ColorB 4 - ColorB 5 - 45deg",
          "slug": "colorb-4-colorb-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorb-5) 0%, var(--wp--preset--color--colorb-6) 100%)",
          "name": "ColorB 5 - ColorB 6 - 45deg",
          "slug": "colorb-5-color-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorc-1) 0%, var(--wp--preset--color--colorc-2) 100%)",
          "name": "ColorC 1 - ColorC 2 - 45deg",
          "slug": "colorc-1-colorc-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorc-2) 0%, var(--wp--preset--color--colorc-3) 100%)",
          "name": "ColorC 2 - ColorC 3 - 45deg",
          "slug": "colorc-2-colorc-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorc-3) 0%, var(--wp--preset--color--colorc-4) 100%)",
          "name": "ColorC 3 - ColorC 4 - 45deg",
          "slug": "colorc-3-colorc-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorc-4) 0%, var(--wp--preset--color--colorc-5) 100%)",
          "name": "ColorC 4 - ColorC 5 - 45deg",
          "slug": "colorc-4-colorc-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--colorc-5) 0%, var(--wp--preset--color--colorc-6) 100%)",
          "name": "ColorC 5 - ColorC 6 - 45deg",
          "slug": "colorc-5-colorc6"
        },

        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-1) 0%, var(--wp--preset--color--success-2) 100%)",
          "name": "Success 1 - Success 2 - 45deg",
          "slug": "success-1-success-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-2) 0%, var(--wp--preset--color--success-3) 100%)",
          "name": "Success 2 - Success 3 - 45deg",
          "slug": "success-2-success-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-3) 0%, var(--wp--preset--color--success-4) 100%)",
          "name": "Success 3 - Success 4 - 45deg",
          "slug": "success-3-success-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-4) 0%, var(--wp--preset--color--success-5) 100%)",
          "name": "Success 4 - Success 5 - 45deg",
          "slug": "success-4-success-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-5) 0%, var(--wp--preset--color--success-6) 100%)",
          "name": "Success 5 - Success 6 - 45deg",
          "slug": "success-5-success-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-1) 0%, var(--wp--preset--color--error-2) 100%)",
          "name": "Error 1 - Error 2 - 45deg",
          "slug": "error-1-error-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-2) 0%, var(--wp--preset--color--error-3) 100%)",
          "name": "Error 2 - Error 3 - 45deg",
          "slug": "error-2-error-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-3) 0%, var(--wp--preset--color--error-4) 100%)",
          "name": "Error 3 - Error 4 - 45deg",
          "slug": "error-3-error-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-4) 0%, var(--wp--preset--color--error-5) 100%)",
          "name": "Error 4 - Error 5 - 45deg",
          "slug": "error-4-error-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-5) 0%, var(--wp--preset--color--error-6) 100%)",
          "name": "Error 5 - Error 6 - 45deg",
          "slug": "error-5-error-6"
        }
      ],
      "palette": [
        {
          "color": "#fbfcfd",
          "name": "Neutral 1 - Subtle backgrounds",
          "slug": "neutral-1"
        },
        {
          "color": "#eceef0",
          "name": "Neutral 2 - Component backgrounds",
          "slug": "neutral-2"
        },
        {
          "color": "#dfe3e6",
          "name": "Neutral 3 - Borders",
          "slug": "neutral-3"
        },
        {
          "color": "#889096",
          "name": "Neutral 4 - Solid backgrounds",
          "slug": "neutral-4"
        },
        {
          "color": "#687076",
          "name": "Neutral 5 - low-contrast text",
          "slug": "neutral-5"
        },
        {
          "color": "#11181c",
          "name": "Neutral 6 - high-contrast text",
          "slug": "neutral-6"
        },
        {
          "color": "#FBFCFD",
          "name": "Color A1 - Subtle backgrounds",
          "slug": "colora-1"
        },
        {
          "color": "#EEF1F2",
          "name": "ColorA 2 - Component backgrounds",
          "slug": "colora-2"
        },
        {
          "color": "#DAE1E6",
          "name": "ColorA 3 - Borders",
          "slug": "colora-3"
        },
        {
          "color": "#A1ABB2",
          "name": "ColorA 4 - Solid backgrounds",
          "slug": "colora-4"
        },
        {
          "color": "#525D66",
          "name": "ColorA 5 - Low-contrast text",
          "slug": "colora-5"
        },
        {
          "color": "#14171A",
          "name": "ColorA 6 - High-contrast text",
          "slug": "colora-6"
        },
        {
          "color": "#FCFDFB",
          "name": "ColorB 1 - Subtle backgrounds",
          "slug": "colorb-1"
        },
        {
          "color": "#F0F2EE",
          "name": "ColorB 2 - Component backgrounds",
          "slug": "colorb-2"
        },
        {
          "color": "#E2E5DF",
          "name": "ColorB 3 - Borders",
          "slug": "colorb-3"
        },
        {
          "color": "#AAB2A1",
          "name": "ColorB 4 - Solid backgrounds",
          "slug": "colorb-4"
        },
        {
          "color": "#484D42",
          "name": "ColorB 5 - Low-contrast text",
          "slug": "colorb-5"
        },
        {
          "color": "#171A14",
          "name": "ColorB 6 - High-contrast text",
          "slug": "colorb-6"
        },
        {
          "color": "#FDFCFB",
          "name": "ColorC 1 - Subtle backgrounds",
          "slug": "colorc-1"
        },
        {
          "color": "#F7F5F0",
          "name": "ColorC 2 - Component backgrounds",
          "slug": "colorc-2"
        },
        {
          "color": "#EDE5D6",
          "name": "ColorC 3 - Borders",
          "slug": "colorc-3"
        },
        {
          "color": "#CCBB99",
          "name": "ColorC 4 - Solid backgrounds",
          "slug": "colorc-4"
        },
        {
          "color": "#665C47",
          "name": "ColorC 5 - Low-contrast text",
          "slug": "colorc-5"
        },
        {
          "color": "#1A1710",
          "name": "ColorC 6 - High-contrast text",
          "slug": "colorc-6"
        },
        {
          "color": "#fffcfc",
          "name": "Error 1 - Subtle backgrounds",
          "slug": "error-1"
        },
        {
          "color": "#ffe6e2",
          "name": "Error 2 - Component backgrounds",
          "slug": "error-2"
        },
        {
          "color": "#fac7be",
          "name": "Error 3 - Borders",
          "slug": "error-3"
        },
        {
          "color": "#e54d2e",
          "name": "Error 4 - Solid backgrounds",
          "slug": "error-4"
        },
        {
          "color": "#ca3214",
          "name": "Error 5 - Low-contrast text",
          "slug": "error-5"
        },
        {
          "color": "#341711",
          "name": "Error 6 - High-contrast text",
          "slug": "error-6"
        },
        {
          "color": "#fdfdf9",
          "name": "Warning 1 - Subtle backgrounds",
          "slug": "warning-1"
        },
        {
          "color": "#fffce8",
          "name": "Warning 2 - Component backgrounds",
          "slug": "warning-2"
        },
        {
          "color": "#fffbd1",
          "name": "Warning 3 - Borders",
          "slug": "warning-3"
        },
        {
          "color": "#ebbc00",
          "name": "Warning 4 - Solid backgrounds",
          "slug": "warning-4"
        },
        {
          "color": "#946800",
          "name": "Warning 5 - Low-contrast text",
          "slug": "warning-5"
        },
        {
          "color": "#35290f",
          "name": "Warning 6 - High-contrast text",
          "slug": "warning-6"
        },
        {
          "color": "#fcfdfa",
          "name": "Success 1 - Subtle backgrounds",
          "slug": "success-1"
        },
        {
          "color": "#f7fcf0",
          "name": "Success 2 - Component backgrounds",
          "slug": "success-2"
        },
        {
          "color": "#eefadc",
          "name": "Success 3 - Borders",
          "slug": "success-3"
        },
        {
          "color": "#94ba2c",
          "name": "Success 4 - Solid backgrounds",
          "slug": "success-4"
        },
        {
          "color": "#5d770d",
          "name": "Success 5 - Low-contrast text",
          "slug": "success-5"
        },
        {
          "color": "#263209",
          "name": "Success 6 - High-contrast text",
          "slug": "success-6"
        },
        {
          "color": "#f9feff",
          "name": "Action 1 - Subtle backgrounds",
          "slug": "action-1"
        },
        {
          "color": "#f1fcff",
          "name": "Action 2 - Component backgrounds",
          "slug": "action-2"
        },
        {
          "color": "#e4f9ff",
          "name": "Action 3 - Borders",
          "slug": "action-3"
        },
        {
          "color": "#2ebde5",
          "name": "Action 4 - Solid backgrounds",
          "slug": "action-4"
        },
        {
          "color": "#0078a1",
          "name": "Action 5 - Low-contrast text",
          "slug": "action-5"
        },
        {
          "color": "#003242",
          "name": "Action 6 - High-contrast text",
          "slug": "action-6"
        },
        {
          "color": "#FFFFFF1",
          "name": "White Opactiy 10%",
          "slug": "white-o10"
        },
        {
          "color": "#FFFFFF40",
          "name": "White Opactiy 25%",
          "slug": "white-o25"
        },
        {
          "color": "#FFFFFF80",
          "name": "White Opactiy 50%",
          "slug": "white-o50"
        },
        {
          "color": "#FFFFFFBF",
          "name": "White Opactiy 75%",
          "slug": "white-o75"
        },
        {
          "color": "#fff",
          "name": "White",
          "slug": "white"
        },
        {
          "color": "#000",
          "name": "Black",
          "slug": "black"
        }
      ]
    },
    "layout": {
      "contentSize": "620px",
      "wideSize": "1000px"
    },
    "shadow": {
      "defaultPresets": false,
      "presets": [
        {
          "name": "shadow sm",
          "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
          "slug": "shadow-sm"
        },
        {
          "name": "shadow",
          "shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
          "slug": "shadow"
        },
        {
          "name": "shadow-md",
          "shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
          "slug": "shadow-md"
        },
        {
          "name": "shadow-lg",
          "shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
          "slug": "shadow-lg"
        },
        {
          "name": "shadow-xl",
          "shadow": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
          "slug": "shadow-xl"
        },
        {
          "name": "shadow-2xl",
          "shadow": "0 25px 50px -12px rgb(0 0 0 / 0.25);",
          "slug": "shadow-2xl"
        },
        {
          "name": "shadow-inner",
          "shadow": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
          "slug": "shadow-inner"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "name": "8px",
          "size": "var(--wp--preset--font-size--8)",
          "slug": "8"
        },
        {
          "name": "12px",
          "size": "var(--wp--preset--font-size--12)",
          "slug": "12"
        },
        {
          "name": "16px",
          "size": "var(--wp--preset--font-size--16)",
          "slug": "16"
        },
        {
          "name": "24px",
          "size": "var(--wp--preset--font-size--24)",
          "slug": "24"
        },
        {
          "name": "36px",
          "size": "var(--wp--preset--font-size--36)",
          "slug": "36"
        },
        {
          "name": "48px",
          "size": "var(--wp--preset--font-size--48)",
          "slug": "48"
        },
        {
          "name": "60px",
          "size": "var(--wp--preset--font-size--64)",
          "slug": "60"
        },
        {
          "name": "96px",
          "size": "var(--wp--preset--font-size--96)",
          "slug": "96"
        }
      ],
      "units": ["%", "em", "px", "rem", "vh", "vw"]
    },
    "typography": {
      "fluid": true,
      "fontFamilies": [
        {
          "fontFace": [],
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
          "name": "System Font",
          "slug": "system-font"
        },
        {
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/inter_normal_400.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "500",
              "src": ["file:./assets/fonts/inter_normal_500.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "600",
              "src": ["file:./assets/fonts/inter_normal_600.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/inter_normal_700.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "800",
              "src": ["file:./assets/fonts/inter_normal_800.ttf"]
            }
          ],
          "fontFamily": "Inter",
          "slug": "inter"
        }
      ],
      "fontSizes": [
        {
          "fluid": {
            "max": "96px",
            "min": "64px"
          },
          "name": "96px",
          "size": "96px",
          "slug": "96"
        },
        {
          "fluid": {
            "max": "64px",
            "min": "48px"
          },
          "name": "64px",
          "size": "64px",
          "slug": "64"
        },
        {
          "fluid": {
            "max": "48px",
            "min": "36px"
          },
          "name": "48px",
          "size": "48px",
          "slug": "48"
        },
        {
          "fluid": {
            "max": "36px",
            "min": "30px"
          },
          "name": "36px",
          "size": "36px",
          "slug": "36"
        },
        {
          "fluid": {
            "max": "30px",
            "min": "24px"
          },
          "name": "30px",
          "size": "30px",
          "slug": "30"
        },
        {
          "fluid": {
            "max": "24px",
            "min": "20px"
          },
          "name": "24px",
          "size": "24px",
          "slug": "24"
        },
        {
          "fluid": {
            "max": "20px",
            "min": "18px"
          },
          "name": "20px",
          "size": "20px",
          "slug": "20"
        },
        {
          "fluid": {
            "max": "18px",
            "min": "16px"
          },
          "name": "18px",
          "size": "18px",
          "slug": "18"
        },
        {
          "fluid": {
            "max": "16px",
            "min": "14px"
          },
          "name": "16px Base",
          "size": "16px",
          "slug": "16"
        },
        {
          "fluid": {
            "max": "14px",
            "min": "13px"
          },
          "name": "14px",
          "size": "14px",
          "slug": "14"
        },
        {
          "fluid": {
            "max": "12px",
            "min": "12px"
          },
          "name": "12px",
          "size": "12px",
          "slug": "12"
        },
        {
          "fluid": {
            "max": "8px",
            "min": "8px"
          },
          "name": "8px",
          "size": "8px",
          "slug": "8"
        },
        {
          "name": "Inherit",
          "size": "inherit",
          "slug": "inherit"
        }
      ]
    },
    "useRootPaddingAwareAlignments": true
  },
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "radius": "6px"
        },
        "color": {
          "background": "var(--wp--preset--color--colora-5)",
          "text": "var(--wp--preset--color--colora-1)"
        },
        "shadow": "var(--wp--preset--shadow--shadow-lg)",
        "variations": {
          "outline": {
            "border": {
              "bottom": {
                "color": "var(--wp--preset--color--colora-5)",
                "style": "solid",
                "width": "2px"
              },
              "left": {
                "color": "var(--wp--preset--color--colora-5)",
                "style": "solid",
                "width": "2px"
              },
              "right": {
                "color": "var(--wp--preset--color--colora-5)",
                "style": "solid",
                "width": "2px"
              },
              "top": {
                "color": "var(--wp--preset--color--colora-5)",
                "style": "solid",
                "width": "2px"
              }
            },
            "color": {
              "background": "var(--wp--preset--color--colora-1)",
              "text": "var(--wp--preset--color--colora-5)"
            },
            "shadow": "var(--wp--preset--shadow--shadow-lg)"
          }
        }
      },
      "core/code": {
        "border": {
          "bottom": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          },
          "left": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          },
          "right": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          },
          "top": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          }
        },
        "color": {
          "background": "var(--wp--preset--color--neutral-1)"
        },
        "spacing": {
          "padding": {
            "bottom": "var(--wp--preset--spacing--24)",
            "left": "var(--wp--preset--spacing--24)",
            "right": "var(--wp--preset--spacing--24)",
            "top": "var(--wp--preset--spacing--24)"
          }
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--14)"
        }
      }
    },
    "color": {
      "text": "var(--wp--preset--color--neutral-6)"
    },
    "elements": {
      "button": {
        "color": {
          "background": "var(--wp--preset--color--colora-5)",
          "text": "var(--wp--preset--color--colora-1)"
        },
        ":hover": {
          "shadow": "var(--wp--preset--shadow--shadow-md)"
        }
      },
      "link": {
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--action-6)"
          }
        },
        "color": {
          "text": "var(--wp--preset--color--action-5)"
        }
      }
    },
    "spacing": {
      "blockGap": "var(--wp--preset--font-size--12)",
      "padding": {
        "left": "var(--wp--preset--font-size--16)",
        "right": "var(--wp--preset--font-size--16)"
      }
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter)",
      "fontSize": "var(--wp--preset--font-size--16)",
      "fontWeight": "var(--wp--custom--font-weight--regular)",
      "lineHeight": "1.5"
    }
  },
  "templateParts": [
    {
      "area": "header",
      "name": "header"
    },
    {
      "area": "footer",
      "name": "footer"
    }
  ],
  "version": 2
}

It looks like this issue happened already in 15.9 with block spacing, I've just overseen this so far.

@hanneslsm
Copy link
Author

hanneslsm commented Jun 19, 2023

@aaronrobertshaw @glendaviesnz
I managed to get it working by defining custom spacings first and referring to them.
Here is the updated theme.json

Details

{
  "settings": {
    "appearanceTools": true,
    "blocks": {
      "core/code": {
        "appearanceTools": true,
        "color": {
          "background": true,
          "custom": true,
          "customDuotone": true,
          "customGradient": true,
          "duotone": [],
          "gradients": [],
          "palette": [
            {
              "color": "#fbfcfd",
              "name": "Neutral 1 - Subtle backgrounds",
              "slug": "neutral-1"
            },
            {
              "color": "#eceef0",
              "name": "Neutral 2 - Component backgrounds",
              "slug": "neutral-2"
            },
            {
              "color": "#dfe3e6",
              "name": "Neutral 3 - Borders",
              "slug": "neutral-3"
            },
            {
              "color": "#889096",
              "name": "Neutral 4 - Solid backgrounds",
              "slug": "neutral-4"
            },
            {
              "color": "#687076",
              "name": "Neutral 5 - low-contrast text",
              "slug": "neutral-5"
            },
            {
              "color": "#11181c",
              "name": "Neutral 6 - high-contrast text",
              "slug": "neutral-6"
            },
            {
              "color": "#fbfdff",
              "name": "Primary 1 - Subtle backgrounds",
              "slug": "primary-1"
            },
            {
              "color": "#e1f0ff",
              "name": "Primary 2 - Component backgrounds",
              "slug": "primary-2"
            },
            {
              "color": "#b7d9f8",
              "name": "Primary 3 - Borders",
              "slug": "primary-3"
            },
            {
              "color": "#0091ff",
              "name": "Primary 4 - Solid backgrounds",
              "slug": "primary-4"
            },
            {
              "color": "#006adc",
              "name": "Primary 5 - Low-contrast text",
              "slug": "primary-5"
            },
            {
              "color": "#00254d",
              "name": "Primary 6 - High-contrast text",
              "slug": "primary-6"
            },
            {
              "color": "#fffcfe",
              "name": "Secondary 1 - Subtle backgrounds",
              "slug": "secondary-1"
            },
            {
              "color": "#fce5f3",
              "name": "Secondary 2 - Component backgrounds",
              "slug": "secondary-2"
            },
            {
              "color": "#f3c6e2",
              "name": "Secondary 3 - Borders",
              "slug": "secondary-3"
            },
            {
              "color": "#d6409f",
              "name": "Secondary 4 - Solid backgrounds",
              "slug": "secondary-4"
            },
            {
              "color": "#cd1d8d",
              "name": "Secondary 5 - Low-contrast text",
              "slug": "secondary-5"
            },
            {
              "color": "#3b0a2a",
              "name": "Secondary 6 - High-contrast text",
              "slug": "secondary-6"
            },
            {
              "color": "#fefdfb",
              "name": "Tertiary 1 - Subtle backgrounds",
              "slug": "tertiary-1"
            },
            {
              "color": "#ffecbc",
              "name": "Tertiary 2 - Component backgrounds",
              "slug": "tertiary-2"
            },
            {
              "color": "#ffd386",
              "name": "Tertiary 3 - Borders",
              "slug": "tertiary-3"
            },
            {
              "color": "#ffb224",
              "name": "Tertiary 4 - Solid backgrounds",
              "slug": "tertiary-4"
            },
            {
              "color": "#ad5700",
              "name": "Tertiary 5 - Low-contrast text",
              "slug": "tertiary-5"
            },
            {
              "color": "#4e2009",
              "name": "Tertiary 6 - High-contrast text",
              "slug": "tertiary-6"
            },
            {
              "color": "#fffcfc",
              "name": "Error 1 - Subtle backgrounds",
              "slug": "error-1"
            },
            {
              "color": "#ffe6e2",
              "name": "Error 2 - Component backgrounds",
              "slug": "error-2"
            },
            {
              "color": "#fac7be",
              "name": "Error 3 - Borders",
              "slug": "error-3"
            },
            {
              "color": "#e54d2e",
              "name": "Error 4 - Solid backgrounds",
              "slug": "error-4"
            },
            {
              "color": "#ca3214",
              "name": "Error 5 - Low-contrast text",
              "slug": "error-5"
            },
            {
              "color": "#341711",
              "name": "Error 6 - High-contrast text",
              "slug": "error-6"
            },
            {
              "color": "#fdfdf9",
              "name": "Warning 1 - Subtle backgrounds",
              "slug": "warning-1"
            },
            {
              "color": "#fffce8",
              "name": "Warning 2 - Component backgrounds",
              "slug": "warning-2"
            },
            {
              "color": "#fffbd1",
              "name": "Warning 3 - Borders",
              "slug": "warning-3"
            },
            {
              "color": "#ebbc00",
              "name": "Warning 4 - Solid backgrounds",
              "slug": "warning-4"
            },
            {
              "color": "#946800",
              "name": "Warning 5 - Low-contrast text",
              "slug": "warning-5"
            },
            {
              "color": "#35290f",
              "name": "Warning 6 - High-contrast text",
              "slug": "warning-6"
            },
            {
              "color": "#fcfdfa",
              "name": "Success 1 - Subtle backgrounds",
              "slug": "success-1"
            },
            {
              "color": "#f7fcf0",
              "name": "Success 2 - Component backgrounds",
              "slug": "success-2"
            },
            {
              "color": "#eefadc",
              "name": "Success 3 - Borders",
              "slug": "success-3"
            },
            {
              "color": "#94ba2c",
              "name": "Success 4 - Solid backgrounds",
              "slug": "success-4"
            },
            {
              "color": "#5d770d",
              "name": "Success 5 - Low-contrast text",
              "slug": "success-5"
            },
            {
              "color": "#263209",
              "name": "Success 6 - High-contrast text",
              "slug": "success-6"
            },
            {
              "color": "#f9feff",
              "name": "Action 1 - Subtle backgrounds",
              "slug": "action-1"
            },
            {
              "color": "#f1fcff",
              "name": "Action 2 - Component backgrounds",
              "slug": "action-2"
            },
            {
              "color": "#e4f9ff",
              "name": "Action 3 - Borders",
              "slug": "action-3"
            },
            {
              "color": "#2ebde5",
              "name": "Action 4 - Solid backgrounds",
              "slug": "action-4"
            },
            {
              "color": "#0078a1",
              "name": "Action 5 - Low-contrast text",
              "slug": "action-5"
            },
            {
              "color": "#003242",
              "name": "Action 6 - High-contrast text",
              "slug": "action-6"
            },
            {
              "color": "#fff",
              "name": "White",
              "slug": "white"
            },
            {
              "color": "#000",
              "name": "Black",
              "slug": "black"
            }
          ],
          "text": true
        },
        "layout": {
          "contentSize": false,
          "definitions": {
            "constrained": {
              "baseStyles": [
                {
                  "rules": {
                    "float": "left",
                    "margin-inline-end": "2em",
                    "margin-inline-start": "0"
                  },
                  "selector": " > .alignleft"
                },
                {
                  "rules": {
                    "float": "right",
                    "margin-inline-end": "0",
                    "margin-inline-start": "2em"
                  },
                  "selector": " > .alignright"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important"
                  },
                  "selector": " > .aligncenter"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important",
                    "max-width": "var(--wp--style--global--content-size)"
                  },
                  "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))"
                },
                {
                  "rules": {
                    "max-width": "var(--wp--style--global--wide-size)"
                  },
                  "selector": " > .alignwide"
                }
              ],
              "className": "is-layout-constrained",
              "name": "constrained",
              "slug": "constrained",
              "spacingStyles": [
                {
                  "rules": {
                    "margin-block-start": "0"
                  },
                  "selector": " > :first-child:first-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0"
                  },
                  "selector": " > :last-child:last-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0",
                    "margin-block-start": null
                  },
                  "selector": " > *"
                }
              ]
            },
            "default": {
              "baseStyles": [
                {
                  "rules": {
                    "float": "left",
                    "margin-inline-end": "2em",
                    "margin-inline-start": "0"
                  },
                  "selector": " > .alignleft"
                },
                {
                  "rules": {
                    "float": "right",
                    "margin-inline-end": "0",
                    "margin-inline-start": "2em"
                  },
                  "selector": " > .alignright"
                },
                {
                  "rules": {
                    "margin-left": "auto !important",
                    "margin-right": "auto !important"
                  },
                  "selector": " > .aligncenter"
                }
              ],
              "className": "is-layout-flow",
              "name": "default",
              "slug": "flow",
              "spacingStyles": [
                {
                  "rules": {
                    "margin-block-start": "0"
                  },
                  "selector": " > :first-child:first-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0"
                  },
                  "selector": " > :last-child:last-child"
                },
                {
                  "rules": {
                    "margin-block-end": "0",
                    "margin-block-start": null
                  },
                  "selector": " > *"
                }
              ]
            },
            "flex": {
              "baseStyles": [
                {
                  "rules": {
                    "align-items": "center",
                    "flex-wrap": "wrap"
                  },
                  "selector": ""
                },
                {
                  "rules": {
                    "margin": "0"
                  },
                  "selector": " > *"
                }
              ],
              "className": "is-layout-flex",
              "displayMode": "flex",
              "name": "flex",
              "slug": "flex",
              "spacingStyles": [
                {
                  "rules": {
                    "gap": null
                  },
                  "selector": ""
                }
              ]
            },
            "grid": {
              "baseStyles": [
                {
                  "rules": {
                    "margin": "0"
                  },
                  "selector": " > *"
                }
              ],
              "className": "is-layout-grid",
              "displayMode": "grid",
              "name": "grid",
              "slug": "grid",
              "spacingStyles": [
                {
                  "rules": {
                    "gap": null
                  },
                  "selector": ""
                }
              ]
            }
          },
          "wideSize": false
        },
        "shadow": {
          "defaultPresets": true,
          "presets": []
        },
        "spacing": {
          "customSpacingSize": true,
          "spacingScale": {
            "increment": 1.5,
            "mediumStep": 1.5,
            "operator": "*",
            "steps": 7,
            "unit": "rem"
          },
          "spacingSizes": [
            {
              "name": "8px",
              "size": "var(--wp--preset--font-size--8)",
              "slug": "8"
            },
            {
              "name": "12px",
              "size": "var(--wp--preset--font-size--12)",
              "slug": "12"
            },
            {
              "name": "16px",
              "size": "var(--wp--preset--font-size--16)",
              "slug": "16"
            },
            {
              "name": "24px",
              "size": "var(--wp--preset--font-size--24)",
              "slug": "24"
            },
            {
              "name": "36px",
              "size": "var(--wp--preset--font-size--36)",
              "slug": "36"
            },
            {
              "name": "48px",
              "size": "var(--wp--preset--font-size--48)",
              "slug": "48"
            },
            {
              "name": "60px",
              "size": "var(--wp--preset--font-size--64)",
              "slug": "60"
            },
            {
              "name": "96px",
              "size": "var(--wp--preset--font-size--96)",
              "slug": "96"
            }
          ],
          "units": ["%", "em", "px", "rem", "vh", "vw"]
        },
        "typography": {
          "customFontSize": true,
          "dropCap": true,
          "fluid": true,
          "fontFamilies": [
            {
              "fontFace": [],
              "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
              "name": "System Font",
              "slug": "system-font"
            },
            {
              "fontFace": [
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "400",
                  "src": ["file:./assets/fonts/inter_normal_400.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "500",
                  "src": ["file:./assets/fonts/inter_normal_500.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "600",
                  "src": ["file:./assets/fonts/inter_normal_600.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "700",
                  "src": ["file:./assets/fonts/inter_normal_700.ttf"]
                },
                {
                  "fontFamily": "Inter",
                  "fontStyle": "normal",
                  "fontWeight": "800",
                  "src": ["file:./assets/fonts/inter_normal_800.ttf"]
                }
              ],
              "fontFamily": "Inter",
              "slug": "inter"
            }
          ],
          "fontSizes": [
            {
              "fluid": {
                "max": "96px",
                "min": "64px"
              },
              "name": "96px",
              "size": "96px",
              "slug": "96"
            },
            {
              "fluid": {
                "max": "64px",
                "min": "48px"
              },
              "name": "64px",
              "size": "64px",
              "slug": "64"
            },
            {
              "fluid": {
                "max": "48px",
                "min": "36px"
              },
              "name": "48px",
              "size": "48px",
              "slug": "48"
            },
            {
              "fluid": {
                "max": "36px",
                "min": "30px"
              },
              "name": "36px",
              "size": "36px",
              "slug": "36"
            },
            {
              "fluid": {
                "max": "30px",
                "min": "24px"
              },
              "name": "30px",
              "size": "30px",
              "slug": "30"
            },
            {
              "fluid": {
                "max": "24px",
                "min": "20px"
              },
              "name": "24px",
              "size": "24px",
              "slug": "24"
            },
            {
              "fluid": {
                "max": "20px",
                "min": "18px"
              },
              "name": "20px",
              "size": "20px",
              "slug": "20"
            },
            {
              "fluid": {
                "max": "18px",
                "min": "16px"
              },
              "name": "18px",
              "size": "18px",
              "slug": "18"
            },
            {
              "fluid": {
                "max": "16px",
                "min": "14px"
              },
              "name": "16px Base",
              "size": "16px",
              "slug": "16"
            },
            {
              "fluid": {
                "max": "14px",
                "min": "13px"
              },
              "name": "14px",
              "size": "14px",
              "slug": "14"
            },
            {
              "fluid": {
                "max": "12px",
                "min": "12px"
              },
              "name": "12px",
              "size": "12px",
              "slug": "12"
            },
            {
              "fluid": {
                "max": "8px",
                "min": "8px"
              },
              "name": "8px",
              "size": "8px",
              "slug": "8"
            },
            {
              "name": "Inherit",
              "size": "inherit",
              "slug": "inherit"
            }
          ],
          "fontStyle": true,
          "fontWeight": true,
          "letterSpacing": true,
          "textDecoration": true,
          "textTransform": true
        },
        "useRootPaddingAwareAlignments": true
      }
    },
    "color": {
      "defaultDuotone": false,
      "defaultGradients": false,
      "defaultPalette": false,
      "gradients": [
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--neutral-2) 100%)",
          "name": "White - Neutral 2 - 0deg",
          "slug": "white-neutral-2"
        },
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--color-a-2) 100%)",
          "name": "White - color-a 2 - 0deg",
          "slug": "white-color-a-2"
        },
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--color-b-2) 100%)",
          "name": "White - color-b 2 - 0deg",
          "slug": "white-color-b-2"
        },
        {
          "gradient": "linear-gradient(0deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--color-c-2) 100%)",
          "name": "White - color-c 2 - 0deg",
          "slug": "white-color-c-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-1) 0%, var(--wp--preset--color--neutral-2) 100%)",
          "name": "Neutral 1 - Neutral 2 - 45deg",
          "slug": "neutral-1-neutral-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-2) 0%, var(--wp--preset--color--neutral-3) 100%)",
          "name": "Neutral 2 - Neutral 3 - 45deg",
          "slug": "neutral-2-neutral-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-2) 0%, var(--wp--preset--color--neutral-4) 100%)",
          "name": "Neutral 2 - Neutral 4 - 45deg",
          "slug": "neutral-2-neutral-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-3) 0%, var(--wp--preset--color--neutral-4) 100%)",
          "name": "Neutral 3 - Neutral 4 - 45deg",
          "slug": "neutral-3-neutral-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-4) 0%, var(--wp--preset--color--neutral-5) 100%)",
          "name": "Neutral 4 - Neutral 5 - 45deg",
          "slug": "neutral-4-neutral-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--neutral-5) 0%, var(--wp--preset--color--neutral-6) 100%)",
          "name": "Neutral 5 - Neutral 6 - 45deg",
          "slug": "neutral-5-neutral-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-a-1) 0%, var(--wp--preset--color--color-a-2) 100%)",
          "name": "color-a 1 - color-a 2 - 45deg",
          "slug": "color-a-1-color-a-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-a-2) 0%, var(--wp--preset--color--color-a-3) 100%)",
          "name": "color-a 2 - color-a 3 - 45deg",
          "slug": "color-a-2-color-a-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-a-3) 0%, var(--wp--preset--color--color-a-4) 100%)",
          "name": "color-a 3 - color-a 4 - 45deg",
          "slug": "color-a-3-color-a-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-a-4) 0%, var(--wp--preset--color--color-a-5) 100%)",
          "name": "color-a 4 - color-a 5 - 45deg",
          "slug": "color-a-4-color-a-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-a-5) 0%, var(--wp--preset--color--color-a-6) 100%)",
          "name": "color-a 5 - color-a 6 - 45deg",
          "slug": "color-a-5-color-a-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-b-1) 0%, var(--wp--preset--color--color-b-2) 100%)",
          "name": "color-b 1 - color-b 2 - 45deg",
          "slug": "color-b-1-color-b-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-b-2) 0%, var(--wp--preset--color--color-b-3) 100%)",
          "name": "color-b 2 - color-b 3 - 45deg",
          "slug": "color-b-2-color-b-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-b-3) 0%, var(--wp--preset--color--color-b-4) 100%)",
          "name": "color-b 3 - color-b 4 - 45deg",
          "slug": "color-b-3-color-b-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-b-4) 0%, var(--wp--preset--color--color-b-5) 100%)",
          "name": "color-b 4 - color-b 5 - 45deg",
          "slug": "color-b-4-color-b-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-b-5) 0%, var(--wp--preset--color--color-b-6) 100%)",
          "name": "color-b 5 - color-b 6 - 45deg",
          "slug": "color-b-5-color-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-c-1) 0%, var(--wp--preset--color--color-c-2) 100%)",
          "name": "color-c 1 - color-c 2 - 45deg",
          "slug": "color-c-1-color-c-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-c-2) 0%, var(--wp--preset--color--color-c-3) 100%)",
          "name": "color-c 2 - color-c 3 - 45deg",
          "slug": "color-c-2-color-c-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-c-3) 0%, var(--wp--preset--color--color-c-4) 100%)",
          "name": "color-c 3 - color-c 4 - 45deg",
          "slug": "color-c-3-color-c-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-c-4) 0%, var(--wp--preset--color--color-c-5) 100%)",
          "name": "color-c 4 - color-c 5 - 45deg",
          "slug": "color-c-4-color-c-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--color-c-5) 0%, var(--wp--preset--color--color-c-6) 100%)",
          "name": "color-c 5 - color-c 6 - 45deg",
          "slug": "color-c-5-color-c6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-1) 0%, var(--wp--preset--color--success-2) 100%)",
          "name": "Success 1 - Success 2 - 45deg",
          "slug": "success-1-success-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-2) 0%, var(--wp--preset--color--success-3) 100%)",
          "name": "Success 2 - Success 3 - 45deg",
          "slug": "success-2-success-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-3) 0%, var(--wp--preset--color--success-4) 100%)",
          "name": "Success 3 - Success 4 - 45deg",
          "slug": "success-3-success-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-4) 0%, var(--wp--preset--color--success-5) 100%)",
          "name": "Success 4 - Success 5 - 45deg",
          "slug": "success-4-success-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--success-5) 0%, var(--wp--preset--color--success-6) 100%)",
          "name": "Success 5 - Success 6 - 45deg",
          "slug": "success-5-success-6"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-1) 0%, var(--wp--preset--color--error-2) 100%)",
          "name": "Error 1 - Error 2 - 45deg",
          "slug": "error-1-error-2"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-2) 0%, var(--wp--preset--color--error-3) 100%)",
          "name": "Error 2 - Error 3 - 45deg",
          "slug": "error-2-error-3"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-3) 0%, var(--wp--preset--color--error-4) 100%)",
          "name": "Error 3 - Error 4 - 45deg",
          "slug": "error-3-error-4"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-4) 0%, var(--wp--preset--color--error-5) 100%)",
          "name": "Error 4 - Error 5 - 45deg",
          "slug": "error-4-error-5"
        },
        {
          "gradient": "linear-gradient(45deg, var(--wp--preset--color--error-5) 0%, var(--wp--preset--color--error-6) 100%)",
          "name": "Error 5 - Error 6 - 45deg",
          "slug": "error-5-error-6"
        }
      ],
      "palette": [
        {
          "color": "#fbfcfd",
          "name": "Neutral 1 - Subtle backgrounds",
          "slug": "neutral-1"
        },
        {
          "color": "#eceef0",
          "name": "Neutral 2 - Component backgrounds",
          "slug": "neutral-2"
        },
        {
          "color": "#dfe3e6",
          "name": "Neutral 3 - Borders",
          "slug": "neutral-3"
        },
        {
          "color": "#889096",
          "name": "Neutral 4 - Solid backgrounds",
          "slug": "neutral-4"
        },
        {
          "color": "#687076",
          "name": "Neutral 5 - low-contrast text",
          "slug": "neutral-5"
        },
        {
          "color": "#11181c",
          "name": "Neutral 6 - high-contrast text",
          "slug": "neutral-6"
        },
        {
          "color": "#FBFCFD",
          "name": "color-a 1 - Subtle backgrounds",
          "slug": "color-a-1"
        },
        {
          "color": "#EEF1F2",
          "name": "color-a 2 - Component backgrounds",
          "slug": "color-a-2"
        },
        {
          "color": "#DAE1E6",
          "name": "color-a 3 - Borders",
          "slug": "color-a-3"
        },
        {
          "color": "#A1ABB2",
          "name": "color-a 4 - Solid backgrounds",
          "slug": "color-a-4"
        },
        {
          "color": "#525D66",
          "name": "color-a 5 - Low-contrast text",
          "slug": "color-a-5"
        },
        {
          "color": "#14171A",
          "name": "color-a 6 - High-contrast text",
          "slug": "color-a-6"
        },
        {
          "color": "#FCFDFB",
          "name": "color-b 1 - Subtle backgrounds",
          "slug": "color-b-1"
        },
        {
          "color": "#F0F2EE",
          "name": "color-b 2 - Component backgrounds",
          "slug": "color-b-2"
        },
        {
          "color": "#E2E5DF",
          "name": "color-b 3 - Borders",
          "slug": "color-b-3"
        },
        {
          "color": "#AAB2A1",
          "name": "color-b 4 - Solid backgrounds",
          "slug": "color-b-4"
        },
        {
          "color": "#484D42",
          "name": "color-b 5 - Low-contrast text",
          "slug": "color-b-5"
        },
        {
          "color": "#171A14",
          "name": "color-b 6 - High-contrast text",
          "slug": "color-b-6"
        },
        {
          "color": "#FDFCFB",
          "name": "color-c 1 - Subtle backgrounds",
          "slug": "color-c-1"
        },
        {
          "color": "#F7F5F0",
          "name": "color-c 2 - Component backgrounds",
          "slug": "color-c-2"
        },
        {
          "color": "#EDE5D6",
          "name": "color-c 3 - Borders",
          "slug": "color-c-3"
        },
        {
          "color": "#CCBB99",
          "name": "color-c 4 - Solid backgrounds",
          "slug": "color-c-4"
        },
        {
          "color": "#665C47",
          "name": "color-c 5 - Low-contrast text",
          "slug": "color-c-5"
        },
        {
          "color": "#1A1710",
          "name": "color-c 6 - High-contrast text",
          "slug": "color-c-6"
        },
        {
          "color": "#fffcfc",
          "name": "Error 1 - Subtle backgrounds",
          "slug": "error-1"
        },
        {
          "color": "#ffe6e2",
          "name": "Error 2 - Component backgrounds",
          "slug": "error-2"
        },
        {
          "color": "#fac7be",
          "name": "Error 3 - Borders",
          "slug": "error-3"
        },
        {
          "color": "#e54d2e",
          "name": "Error 4 - Solid backgrounds",
          "slug": "error-4"
        },
        {
          "color": "#ca3214",
          "name": "Error 5 - Low-contrast text",
          "slug": "error-5"
        },
        {
          "color": "#341711",
          "name": "Error 6 - High-contrast text",
          "slug": "error-6"
        },
        {
          "color": "#fdfdf9",
          "name": "Warning 1 - Subtle backgrounds",
          "slug": "warning-1"
        },
        {
          "color": "#fffce8",
          "name": "Warning 2 - Component backgrounds",
          "slug": "warning-2"
        },
        {
          "color": "#fffbd1",
          "name": "Warning 3 - Borders",
          "slug": "warning-3"
        },
        {
          "color": "#ebbc00",
          "name": "Warning 4 - Solid backgrounds",
          "slug": "warning-4"
        },
        {
          "color": "#946800",
          "name": "Warning 5 - Low-contrast text",
          "slug": "warning-5"
        },
        {
          "color": "#35290f",
          "name": "Warning 6 - High-contrast text",
          "slug": "warning-6"
        },
        {
          "color": "#fcfdfa",
          "name": "Success 1 - Subtle backgrounds",
          "slug": "success-1"
        },
        {
          "color": "#f7fcf0",
          "name": "Success 2 - Component backgrounds",
          "slug": "success-2"
        },
        {
          "color": "#eefadc",
          "name": "Success 3 - Borders",
          "slug": "success-3"
        },
        {
          "color": "#94ba2c",
          "name": "Success 4 - Solid backgrounds",
          "slug": "success-4"
        },
        {
          "color": "#5d770d",
          "name": "Success 5 - Low-contrast text",
          "slug": "success-5"
        },
        {
          "color": "#263209",
          "name": "Success 6 - High-contrast text",
          "slug": "success-6"
        },
        {
          "color": "#f9feff",
          "name": "Action 1 - Subtle backgrounds",
          "slug": "action-1"
        },
        {
          "color": "#f1fcff",
          "name": "Action 2 - Component backgrounds",
          "slug": "action-2"
        },
        {
          "color": "#e4f9ff",
          "name": "Action 3 - Borders",
          "slug": "action-3"
        },
        {
          "color": "#2ebde5",
          "name": "Action 4 - Solid backgrounds",
          "slug": "action-4"
        },
        {
          "color": "#0078a1",
          "name": "Action 5 - Low-contrast text",
          "slug": "action-5"
        },
        {
          "color": "#003242",
          "name": "Action 6 - High-contrast text",
          "slug": "action-6"
        },
        {
          "color": "#FFFFFF1A",
          "name": "White Opactiy 10%",
          "slug": "white-o10"
        },
        {
          "color": "#FFFFFF40",
          "name": "White Opactiy 25%",
          "slug": "white-o25"
        },
        {
          "color": "#FFFFFF80",
          "name": "White Opactiy 50%",
          "slug": "white-o50"
        },
        {
          "color": "#FFFFFFBF",
          "name": "White Opactiy 75%",
          "slug": "white-o75"
        },
        {
          "color": "#fff",
          "name": "White",
          "slug": "white"
        },
        {
          "color": "#000",
          "name": "Black",
          "slug": "black"
        }
      ]
    },
    "custom": {
      "size": {
        "0": "0px",
        "border-radius": "6px",
        "8": "clamp(8px, 0.5rem + ((1vw - 3.2px) * 1), 8px)",
        "12": "clamp(13px, 0.813rem + ((1vw - 3.2px) * 0.147), 14px)",
        "14": "clamp(13px, 0.813rem + ((1vw - 3.2px) * 0.147), 14px)",
        "16": "clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.294), 16px)",
        "18": "clamp(16px, 1rem + ((1vw - 3.2px) * 0.294), 18px)",
        "20": "clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.294), 20px)",
        "24": "clamp(20px, 1.25rem + ((1vw - 3.2px) * 0.588), 24px)",
        "30": "clamp(24px, 1.5rem + ((1vw - 3.2px) * 0.882), 30px)",
        "36": "clamp(30px, 1.875rem + ((1vw - 3.2px) * 0.882), 36px)",
        "48": "clamp(36px, 2.25rem + ((1vw - 3.2px) * 1.765), 48px)",
        "64": "clamp(48px, 3rem + ((1vw - 3.2px) * 2.353), 64px)",
        "96": "clamp(64px, 4rem + ((1vw - 3.2px) * 4.706), 96px)"
      }
    },
    "layout": {
      "contentSize": "840px",
      "wideSize": "1280px"
    },
    "shadow": {
      "defaultPresets": false,
      "presets": [
        {
          "name": "shadow-sm",
          "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
          "slug": "shadow-sm"
        },
        {
          "name": "shadow",
          "shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
          "slug": "shadow"
        },
        {
          "name": "shadow-md",
          "shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
          "slug": "shadow-md"
        },
        {
          "name": "shadow-lg",
          "shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
          "slug": "shadow-lg"
        },
        {
          "name": "shadow-xl",
          "shadow": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
          "slug": "shadow-xl"
        },
        {
          "name": "shadow-xxl",
          "shadow": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
          "slug": "shadow-xxl"
        },
        {
          "name": "shadow-inner",
          "shadow": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
          "slug": "shadow-inner"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "name": "12px",
          "size": "var(--wp--custom--size--12)",
          "slug": "12"
        },
        {
          "name": "16px",
          "size": "var(--wp--custom--size--16)",
          "slug": "16"
        },
        {
          "name": "24px",
          "size": "var(--wp--custom--size--24)",
          "slug": "24"
        },
        {
          "name": "36px",
          "size": "var(--wp--custom--size--36)",
          "slug": "36"
        },
        {
          "name": "48px",
          "size": "var(--wp--custom--size--48)",
          "slug": "48"
        },
        {
          "name": "64px",
          "size": "var(--wp--custom--size--64)",
          "slug": "64"
        },
        {
          "name": "96px",
          "size": "var(--wp--custom--size--96)",
          "slug": "96"
        }
      ],
      "units": ["%", "em", "px", "rem", "vh", "vw"]
    },
    "typography": {
      "fluid": true,
      "fontFamilies": [
        {
          "fontFace": [],
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
          "name": "System Font",
          "slug": "system-font"
        },
        {
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/inter_normal_400.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "500",
              "src": ["file:./assets/fonts/inter_normal_500.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "600",
              "src": ["file:./assets/fonts/inter_normal_600.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/inter_normal_700.ttf"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "800",
              "src": ["file:./assets/fonts/inter_normal_800.ttf"]
            }
          ],
          "fontFamily": "Inter",
          "slug": "inter"
        },
        {
          "fontFamily": "Barlow",
          "slug": "barlow",
          "fontFace": [
            {
              "fontFamily": "Barlow",
              "fontStyle": "normal",
              "fontWeight": "600",
              "src": ["file:./assets/fonts/barlow_normal_600.ttf"]
            },
            {
              "fontFamily": "Barlow",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/barlow_normal_400.ttf"]
            },
            {
              "fontFamily": "Barlow",
              "fontStyle": "italic",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/barlow_italic_400.ttf"]
            },
            {
              "fontFamily": "Barlow",
              "fontStyle": "italic",
              "fontWeight": "600",
              "src": ["file:./assets/fonts/barlow_italic_600.ttf"]
            },
            {
              "fontFamily": "Barlow",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/barlow_normal_700.ttf"]
            },
            {
              "fontFamily": "Barlow",
              "fontStyle": "italic",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/barlow_italic_700.ttf"]
            }
          ]
        }
      ],
      "fontSizes": [
        {
          "fluid": {
            "max": "96px",
            "min": "64px"
          },
          "name": "96px",
          "size": "96px",
          "slug": "96"
        },
        {
          "fluid": {
            "max": "64px",
            "min": "48px"
          },
          "name": "64px",
          "size": "64px",
          "slug": "64"
        },
        {
          "fluid": {
            "max": "48px",
            "min": "36px"
          },
          "name": "48px",
          "size": "48px",
          "slug": "48"
        },
        {
          "fluid": {
            "max": "36px",
            "min": "30px"
          },
          "name": "36px",
          "size": "36px",
          "slug": "36"
        },
        {
          "fluid": {
            "max": "30px",
            "min": "24px"
          },
          "name": "30px",
          "size": "30px",
          "slug": "30"
        },
        {
          "fluid": {
            "max": "24px",
            "min": "20px"
          },
          "name": "24px",
          "size": "24px",
          "slug": "24"
        },
        {
          "fluid": {
            "max": "20px",
            "min": "18px"
          },
          "name": "20px",
          "size": "20px",
          "slug": "20"
        },
        {
          "fluid": {
            "max": "18px",
            "min": "16px"
          },
          "name": "18px",
          "size": "18px",
          "slug": "18"
        },
        {
          "fluid": {
            "max": "16px",
            "min": "14px"
          },
          "name": "16px Base",
          "size": "16px",
          "slug": "16"
        },
        {
          "fluid": {
            "max": "14px",
            "min": "13px"
          },
          "name": "14px",
          "size": "14px",
          "slug": "14"
        },
        {
          "fluid": {
            "max": "12px",
            "min": "12px"
          },
          "name": "12px",
          "size": "12px",
          "slug": "12"
        },
        {
          "fluid": {
            "max": "8px",
            "min": "8px"
          },
          "name": "8px",
          "size": "8px",
          "slug": "8"
        }
      ]
    },
    "useRootPaddingAwareAlignments": true
  },
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "radius": "var(--wp--custom--size--border-radius)"
        },
        "color": {
          "background": "var(--wp--preset--color--color-a-5)",
          "text": "var(--wp--preset--color--color-a-1)"
        },
        "shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "variations": {
          "outline": {
            "border": {
              "bottom": {
                "color": "var(--wp--preset--color--color-a-5)",
                "style": "solid",
                "width": "2px"
              },
              "left": {
                "color": "var(--wp--preset--color--color-a-5)",
                "style": "solid",
                "width": "2px"
              },
              "right": {
                "color": "var(--wp--preset--color--color-a-5)",
                "style": "solid",
                "width": "2px"
              },
              "top": {
                "color": "var(--wp--preset--color--color-a-5)",
                "style": "solid",
                "width": "2px"
              }
            },
            "color": {
              "background": "var(--wp--preset--color--color-a-1)",
              "text": "var(--wp--preset--color--color-a-5)"
            },
            "shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
          }
        }
      },
      "core/code": {
        "border": {
          "bottom": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          },
          "left": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          },
          "right": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          },
          "top": {
            "color": "var(--wp--preset--color--neutral-3)",
            "style": "solid",
            "width": "1px"
          }
        },
        "color": {
          "background": "var(--wp--preset--color--neutral-1)"
        },
        "spacing": {
          "padding": {
            "bottom": "var(--wp--preset--spacing--24)",
            "left": "var(--wp--preset--spacing--24)",
            "right": "var(--wp--preset--spacing--24)",
            "top": "var(--wp--preset--spacing--24)"
          }
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--14)"
        }
      }
    },
    "color": {
      "text": "var(--wp--preset--color--neutral-6)"
    },
    "elements": {
      "button": {
        ":hover": {
          "shadow": "var(--wp--preset--shadow--shadow-md)"
        },
        "color": {
          "background": "var(--wp--preset--color--color-a-5)",
          "text": "var(--wp--preset--color--color-a-1)"
        }
      },
      "link": {
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--action-6)"
          }
        },
        "color": {
          "text": "var(--wp--preset--color--action-5)"
        }
      }
    },
    "spacing": {
      "blockGap": "var(--wp--custom--size--16)",
      "padding": {
        "left": "var(--wp--custom--size--16)",
        "right": "var(--wp--custom--size--16)"
      }
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter)",
      "fontSize": "var(--wp--preset--font-size--16)",
      "fontWeight": "var(--wp--custom--font-weight--regular)",
      "lineHeight": "1.5"
    }
  },
  "templateParts": [
    {
      "area": "header",
      "name": "header"
    },
    {
      "area": "footer",
      "name": "footer"
    }
  ],
  "version": 2,
  "$schema": "https://schemas.wp.org/trunk/theme.json"
}

for me this issues can be closed. I leave it open, because I do not know if you want to investigate it further. Feel free to close it

@hanneslsm
Copy link
Author

Okay, this issue still exists. Now, even with my updated theme.json, I get this error when trying to use the sliders in the Global styles for the layouts.

@ndiego ndiego added the [Type] Bug An existing feature does not function as intended label Jun 20, 2023
@glendaviesnz
Copy link
Contributor

It looks like it might be related to this change. If I use your theme.json on trunk the custom controls display by default, but if i revert the change in that PR the preset select control displays as expected.

I haven't worked out why yet, but hopefully we can find an approach that fixes the original bug but doesn't cause the issue you are experiencing.

@ndiego
Copy link
Member

ndiego commented Jul 14, 2023

cc @t-hamano @andrewserong any ideas on this one? #51891 might also be related. #51891 is a regression in 6.3.

@t-hamano
Copy link
Contributor

t-hamano commented Jul 15, 2023

I was also able to reproduce this problem. Here is a small theme.json to reproduce the issue.

Details
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		},
		"spacing": {
			"spacingSizes": [
				{
					"name": "8px",
					"size": "var(--wp--preset--font-size--8)",
					"slug": "8"
				},
				{
					"name": "12px",
					"size": "var(--wp--preset--font-size--12)",
					"slug": "12"
				},
				{
					"name": "16px",
					"size": "var(--wp--preset--font-size--16)",
					"slug": "16"
				},
				{
					"name": "24px",
					"size": "var(--wp--preset--font-size--24)",
					"slug": "24"
				}
			]
		},
		"typography": {
			"fontSizes": [
				{
					"name": "8px",
					"size": "8px",
					"slug": "8"
				},
				{
					"name": "12px",
					"size": "12px",
					"slug": "12"
				},
				{
					"name": "16px",
					"size": "16px",
					"slug": "16"
				},
				{
					"name": "24px",
					"size": "24px",
					"slug": "24"
				}
			]
		}
  }
}

As @glendaviesnz said, it appears that reverting the changes made in #50956 will fix #51891 as well as this issue. I expect that this change has caused the decoding of values to not work well, so I'll do some investigating.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 16, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

6 participants