theme-with-comment.txt

{
  "version": 2,
  "settings": {
    // Setting that enables the following UI tools:border: color, radius, style, width, color: link, spacing: blockGap, margin, padding, typography: lineHeight
    "appearanceTools": true,
    // Settings related to borders
    "border": {
      color: false,
      radius: false,
      style: false,
      width: false
    },
    // Settings related to colors.
    "color": {
      // Allow users to set background colors.
      "background": true,
      // Allow users to select custom colors.
      "custom": true,
      // Allow users to create custom duotone filters.
      "customDuotone": true,
      // Allow users to create custom gradients.
      "customGradient": true,
      // Allow users to choose filters from the default duotone filter presets.
      "defaultDuotone": true,
      // Allow users to choose colors from the default gradients.
      "defaultGradients": true,
      // Allow users to choose colors from the default palette.
      "defaultPalette": true,
      // Duotone presets for the duotone picker.\nDoesn't generate classes or properties.
      "duotone": [
        // example
        {
          "colors": ["#000000", "#ffffff"],
          "name": "Foreground and background",
          "slug": "foreground-and-background"
        }
      ],
      // Gradient presets for the gradient picker.\nGenerates a single class (`.has-{slug}-background`) and custom property (`--wp--preset--gradient--{slug}`) per preset value.
      "gradients": [
        // example
        {
        "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--tertiary) 100%)",
        "name": "Vertical secondary to tertiary",
        "slug": "vertical-secondary-to-tertiary"
        },
      ],
      // Allow users to set link colors.
      "link": false,
      // Color palette presets for the color picker.\nGenerates three classes (`.has-{slug}-color`, `.has-{slug}-background-color`, and `.has-{slug}-border-color`) and a single custom property (`--wp--preset--color--{slug}`) per preset value.
      "palette": [
        {
          "color": "#000000",
          "name": "Foreground",
          "slug": "foreground"
        },
      ],
      // Allow users to set text colors.
      "text": true
    }
  },
  // Settings related to layout.
  "layout": {
    // Sets the max-width of the content.
    contentSize: ''
    // Sets the max-width of wide (`.alignwide`) content.
    wideSize: ''
  },
  // Settings related to spacing.
  "spacing" : {
    // Enables `--wp--style--block-gap` to be generated from styles.spacing.blockGap.\nA value of `null` instead of `false` further disables layout styles from being generated.
    "blockGap" : null | true,
    // Allow users to set a custom margin
    "margin": false,
    // Allow users to set a custom padding.
    "padding": false,
    // List of units the user can use for spacing values.
    "units":  ["px", "em", "rem", "vh", "vw", "%"]
  },
  // Settings related to typography.
  "typography": {
    // Allow users to set custom font sizes
    "customFontSize": true,
    // Allow users to set custom font styles
    "fontStyle": true,
    // Allow users to set custom font weights.
    "fontWeight": true,
    // Allow users to set custom letter spacing.
    "letterSpacing": true,
    // Allow users to set custom line height.
    "lineHeight": false,
    // Allow users to set custom text decorations.
    "textDecoration": true,
    // Allow users to set custom text transforms.
    "textTransform": true,
    // Enable drop cap.
    "dropCap": true,
    // Font size presets for the font size selector.\nGenerates a single class (`.has-{slug}-color`) and custom property (`--wp--preset--font-size--{slug}`) per preset value.
    "fontSizes": [
      // example
      {
        "name": "ttt",
        "size": "1rem",
        "slug": "small"
      }
    ],
    // Font family presets for the font family selector.\nGenerates a single custom property (`--wp--preset--font-family--{slug}`) per preset value.
    "fontFamilies": [
      // example
      {
          "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
          "name": "System Font",
          "slug": "system-font"
        },
        {
          "fontFace": [
            {
              "fontFamily": "Sora",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/Sora-Bold.woff2"]
            },
            {
              "fontFamily": "Sora",
              "fontStretch": "normal",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/Sora-Regular.woff2"],
              // all under are optional
              // CSS font-stretch value.
              "fontStretch": "string"
              // CSS ascend-override value.
              "ascendOverride": "string",
              // CSS descend-override value.
              "descendOverride": "string",
              // CSS font-variant value.
              "fontVariant": "string",
              // CSS font-feature-settings value.
              "fontFeatureSettings": "string",
              // CSS font-variation-settings value.
              "fontVariationSettings": "string",
              // CSS line-gap-override value
              "lineGapOverride": "string",
              // CSS size-adjust value.
              "sizeAdjust": "string",
              // CSS unicode-range value.
              "unicodeRange": "string"
            }
          ],
          "fontFamily": "\"Sora\", sans-serif",
          "name": "Sora",
          "slug": "Sora"
        }
      }
    ]
  },
  // Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.
  "custom": {
    // example
    "my-custom": "#000", => --wp--custom--my-custom
    "spacing": {
      "large": "clamp(4rem, 10vw, 8rem)",
      "medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
      "outer": "var(--wp--custom--spacing--small, 1.25rem)",
      "small": "max(1.25rem, 5vw)"
    },
    "typography": {
      "font-size": {
        "colossal": "clamp(3.25rem, 8vw, 6.25rem)",
        "gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
        "huge": "clamp(2.25rem, 4vw, 2.75rem)"
      },
      "line-height": {
        "medium": 1.3999999999999999,
        "normal": 1.6000000000000001,
        "small": 1.2,
        "tiny": 1.1499999999999999
      }
    }
  }
  // Organized way to set CSS properties. Styles in the top-level will be added in the `body` selector.
  "styles": {
    // Styles defined on a per-element basis using the element's selector.
    "elements": {
      "link": {
        "border": {},
        "color": {},
        "spacing": {},
        "typography": {}
      },
      "h1": {},
      "h2": {},
      "h3": {},
      "h4": {},
      "h5": {},
      "h6": {},
    },
    // Styles defined on a per-block basis using the block's selector.
    "blocks": {
      "core/archives": {
         "border": {},
          "color": {},
          "spacing": {},
          "typography": {},
          "elements": {
            'link',
            'h1',
            'h2',
            ...
          }
      },
      "core/audio": {},
      "core/avatar": {},
      "core/block": {},
      "core/button": {},
      "core/buttons": {},
      "core/calendar": {},
      "core/categories": {},
      "core/code": {},
      "core/column": {},
      "core/columns": {},
      "core/comment-author-name": {},
      "core/comment-content": {},
      "core/comment-date": {},
      "core/comment-edit-link": {},
      "core/comment-reply-link": {},
      "core/comment-template": {},
      "core/comments-query-loop": {},
      "core/cover": {},
      "core/embed": {},
      "core/file": {},
      "core/freeform": {},
      "core/gallery": {},
      "core/group": {},
      "core/heading": {},
      "core/home-link": {},
      "core/html": {},
      "core/image": {},
      "core/latest-comments": {},
      "core/latest-posts": {},
      "core/list": {},
      "core/loginout": {},
      "core/media-text": {},
      "core/missing": {},
      "core/more": {},
      "core/navigation": {},
      "core/navigation-link": {},
      "core/nextpage": {},
      "core/page-list": {},
      "core/paragraph": {},
      "core/post-author": {},
      "core/post-comments": {},
      "core/post-comments-count": {},
      "core/post-comments-form": {},
      "core/post-comments-link": {},
      "core/post-content": {},
      "core/post-date": {},
      "core/post-excerpt": {},
      "core/post-featured-image": {},
      "core/post-navigation-link": {},
      "core/post-template": {},
      "core/post-terms": {},
      "core/post-title": {},
      "core/preformatted": {},
      "core/pullquote": {},
      "core/query": {},
      "core/query-pagination": {},
      "core/query-pagination-next": {},
      "core/query-pagination-numbers": {},
      "core/query-pagination-previous": {},
      "core/query-title": {},
      "core/quote": {},
      "core/rss": {},
      "core/search": {},
      "core/separator": {},
      "core/shortcode": {},
      "core/site-logo": {},
      "core/site-tagline": {},
      "core/site-title": {},
      "core/social-link": {},
      "core/social-links": {},
      "core/spacer": {},
      "core/table": {},
      "core/table-of-contents": {},
      "core/tag-cloud": {},
      "core/template-part": {},
      "core/term-description": {},
      "core/text-columns": {},
      "core/verse": {},
      "core/video": {},
      "core/widget-area": {},
      "core/legacy-widget": {},
      "core/widget-group": {}
    }
  },
  // Additional metadata for custom templates defined in the templates folder.
  "customTemplates": {
    // Filename, without extension, of the template in the templates folder.
    "name": "string",
    // Title of the template, translatable.
    "title": "string",
    // List of post types that can use this custom template.
    "postTypes": ["page"]
  },
  // Additional metadata for template parts defined in the parts folder.
  "templateParts": [
    {
      // Filename, without extension, of the template in the parts folder.
      "name": "string", *required
      // Title of the template, translatable.
      "title": "string",
      // The area the template part is used for. Block variations for `header` and `footer` values exist and will be used when the area is set to one of those.
      "area": "uncategorized"
    }
  ],
  // An array of pattern slugs to be registered from the Pattern Directory.
  "patterns":  ["string"]
}