Add fields to any block Pure JSON. No templates, no render callbacks.

Custom fields, zero templates

Create a JSON file, target a block with name, and define fields. set maps values to classes, styles, data attributes, or any other HTML attribute.

Blockstudio applies output with the WordPress HTML Tag Processor. No templates or render callbacks.

Extension basics
extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": true,
    "attributes": {
      "animation": {
        "type": "select",
        "options": ["none", "fade", "slide"],
        "set": [{
          "attribute": "class",
          "value": "animate-{attributes.animation}"
        }]
      }
    }
  }
}

Target any block

Extend a block, a list, or a namespace wildcard.

The set property

Map fields to classes, styles, data attributes, or any HTML attribute.

Conditional fields

Show fields according to other values with block-style logic.

Full feature set

All field types, conditional logic, populations, and properties.

Inspector positioning

Place fields in settings, styles, or advanced tabs.

Priority ordering

Order multiple extensions targeting the same block.

No render callbacks

The HTML Tag Processor applies output automatically.

JSON Schema

Dedicated schema autocomplete and validation.

Map values to HTML with set

set maps values to classes, inline styles, data attributes, or any HTML attribute using dot notation such as {attributes.fieldId}.

Access nested object values, apply them conditionally, or output one field to multiple attributes.

The set property
extend-color.json
{
  "attributes": {
    "customColor": {
      "type": "color",
      "returnFormat": "both",
      "set": [
        { "attribute": "style", "value": "color: {attributes.customColor.value}" },
        { "attribute": "data-color", "value": "{attributes.customColor.label}" },
        { "attribute": "class", "value": "has-custom-color" }
      ]
    }
  }
}

Target one block or thousands

Target one name such as "core/paragraph", an array of names, or an entire namespace with "core/*".

Multiple JSON extensions may target the same block. Priority controls their inspector order.

Targeting blocks
extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": true,
    "priority": 10,
    "attributes": {
      "animation": { "type": "select", "options": ["none", "fade", "slide"] }
    }
  }
}
Plus

The official extension kit

Premium site templates, AI system instructions, and a private Discord community. One-time purchase, lifetime updates.

  • 450+ site templates
  • AI system instructions
  • Lifetime updates
  • Private Discord community
Get Plus