Skip to content

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.

extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "animation",
        "type": "select",
        "allowNull": "None",
        "options": [
          { "value": "fade", "label": "Fade" },
          { "value": "slide", "label": "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.

A field that returns several values applies set to each one. Classes and styles add up; for any other attribute, "join": true writes every value, separated by spaces, instead of keeping the last.

extend-color.json
{
  "name": "core/heading",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "customColor",
        "type": "select",
        "returnFormat": "both",
        "options": [
          { "value": "#f00", "label": "Red" },
          { "value": "#00f", "label": "Blue" }
        ],
        "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.

A top-level exclude list skips blocks that name would match, using the same exact and wildcard matching. An excluded block gets neither the fields nor their output.

extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "animation",
        "type": "select",
        "options": [
          { "value": "fade", "label": "Fade" },
          { "value": "slide", "label": "Slide" }
        ]
      }
    ]
  }
}

Exclude blocks

Skip single blocks or whole prefixes that a wildcard would otherwise match.

Joined values

Write every selected value of a multi-value field into one attribute.

Attributes field

An attributes field writes its name and value pairs onto the block without a set rule.

Inspect from PHP

bs_block_extension_fields() returns the fields every matching extension adds to a block, core and third-party blocks included.

Plus

The official extension kit

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

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