Add fields to any block
Extend core blocks, third-party blocks, or your own with custom fields. Pure JSON, no templates, no render callbacks.
Custom fields, zero templates
Create a JSON file, target a block with name, and define your fields. The set property maps field values directly to HTML attributes: classes, styles, data attributes, or anything else.
No templates, no render callbacks. Blockstudio handles the output automatically using the WordPress HTML Tag Processor.
{
"name": "core/*",
"blockstudio": {
"extend": true,
"attributes": {
"animation": {
"type": "select",
"label": "Animation",
"options": ["none", "fade", "slide"],
"set": [{
"attribute": "class",
"value": "animate-{attributes.animation}"
}]
}
}
}
}Target any block
Extend a single block, a list of blocks, or use wildcards like core/* to target entire namespaces.
The set property
Map field values to classes, styles, data attributes, or any HTML attribute. Dot notation for nested values.
Conditional fields
Show and hide fields based on other values. Same conditional logic operators as blocks.
Full feature set
All 26 field types, conditional logic, populated data sources, and the same field properties as blocks.
Inspector positioning
Place fields in the settings, styles, or advanced tab. Control exactly where your fields appear.
Priority ordering
Multiple extensions can target the same block. Priority controls the order they appear in the inspector.
No render callbacks
Blockstudio applies set values using the WordPress HTML Tag Processor. No PHP templates needed.
JSON Schema
Dedicated extension schema for full autocomplete and validation in your editor.
Map values to HTML with set
The set property is the core of extensions. Map field values to classes, inline styles, data attributes, or any HTML attribute using dot notation like {attributes.fieldId}.
Access nested values from fields that return objects. Apply values conditionally. Multiple set entries per field let you output to different attributes from a single input.
{
"attributes": {
"customColor": {
"type": "color",
"label": "Custom 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 a single block by name: "core/paragraph". Target multiple blocks with an array: ["core/paragraph", "core/heading"]. Or use wildcards like "core/*" to extend every block in a namespace.
Extensions live as JSON files in your blocks folder. Multiple extensions can target the same block. Priority controls the order they appear in the inspector.
{
"name": "core/*",
"blockstudio": {
"extend": true,
"priority": 10,
"attributes": {
"animation": {
"type": "select",
"options": ["none", "fade", "slide"],
"set": [{
"attribute": "class",
"value": "animate-{attributes.animation}"
}]
}
}
}
}
{
"name": ["core/group", "core/cover"],
"blockstudio": {
"extend": true,
"priority": 20,
"group": "advanced",
"attributes": {
"visibility": {
"type": "select",
"label": "Visibility",
"options": ["visible", "hidden-mobile"],
"set": [{
"attribute": "class",
"value": "{attributes.visibility}"
}]
}
}
}
}The official extension kit
Premium site templates, AI system instructions, and a private Discord community. One-time purchase, lifetime updates.
- 150+ site templates
- AI system instructions
- Lifetime updates
- Private Discord community