Built for the people who edit

A wider field drawer, toolbar controls, editor policies and an admin inventory, set in block.json and blockstudio.json.

Room for every field

Repeaters, code fields and nested groups get cramped in the sidebar. The block header carries an Open Expanded Editor button that opens the same fields in a wider drawer from the right. Done, the backdrop or Esc closes it, and the block stays selected.

It is the same field renderer writing the same attributes, so the preview updates while you type, and no block.json setting is needed. Fields that belong next to the content can move to the block toolbar with "position": "toolbar".

Expanded Editor

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      {
        "id": "alignment",
        "type": "select",
        "label": "Alignment",
        "position": "toolbar",
        "options": [
          { "value": "left", "label": "Left" },
          { "value": "center", "label": "Center" },
          { "value": "right", "label": "Right" }
        ]
      },
      {
        "id": "title",
        "type": "text",
        "label": "Title"
      }
    ]
  }
}

Autocomplete from your CSS

List stylesheet URLs in blockEditor.cssClasses and cssVariables, and the classes and code fields suggest what those files define.

Hover and selection cues

Set blockEditor.enhance to add Blockstudio’s hover and selection affordances to the editor.

Who gets editor access

users.ids and users.roles in blockstudio.json name the user IDs and roles with Blockstudio editor access.

In your client’s language

Field controls, the admin screen and the canvas follow the site language or each user’s profile language, from bundled translations.

Editor-only assets

editor.assets in blockstudio.json lists additional assets to load in the editor.

Media in the first payload

Files fields read attachment data from the initial editor payload, through nested groups, tabs and repeaters, before asking the media endpoint.

One preview request at a time

A newer preview request for a block cancels the previous one in the browser, and the current preview stays on screen meanwhile.

Each block keeps its values

Multi-selected blocks keep their own values, and undo and redo cover RichText and sidebar fields.

Switch a field off, keep its value

An editor can turn a field off from the inspector: hover its left edge until the blue border appears, then click. The field turns translucent, its value stays saved, and the block stops rendering it until someone turns it back on.

The same works for single items in a files field, so one image can sit out while the others show. Set "switch": true to give a field a visible toggle, and read $a['_disabled'] when a template needs to know.

Disabling attributes

block.json

{
  "name": "acme/card",
  "title": "Card",
  "blockstudio": {
    "attributes": [
      {
        "id": "title",
        "type": "text",
        "label": "Title",
        "switch": true
      }
    ]
  }
}

index.php

<?php if (!empty($a['_disabled']) && in_array('title', $a['_disabled'])) : ?>
  <p>No title on this one.</p>
<?php else : ?>
  <h1><?php echo esc_html($a['title']); ?></h1>
<?php endif; ?>

A preview in the inserter

Add an example key to block.json and the block shows a preview when an editor hovers it in the block inserter. An empty object is enough for a block that looks right with its defaults.

Give example.attributes sample values for your own fields, or example.innerBlocks a starting tree for a block that wraps other blocks.

Inserter preview

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "category": "text",
  "example": {
    "attributes": {
      "title": "This title will be shown in the preview"
    }
  },
  "blockstudio": true
}

index.php

<h1><?php echo esc_html($a['title']); ?></h1>

Editor policy in one file

Decide what the inserter offers without theme glue code. blockEditor.blocks takes allow and deny lists with wildcards such as core/*, renames and orders categories, removes block styles registered in PHP, hides legacy widgets and can switch off the block directory.

blockEditor.patterns turns the core, remote, theme and Blockstudio pattern sources on or off and filters their categories. blockEditor.media switches off Openverse and limits the image sizes editors can pick.

Block editor settings

blockstudio.json

{
  "blockEditor": {
    "blocks": {
      "allow": ["core/*", "my-theme/*"],
      "deny": ["core/embed", "core/freeform"],
      "directory": false,
      "categories": {
        "rename": { "text": "Writing" },
        "order": ["my-theme", "text", "media"]
      },
      "styles": {
        "deny": { "my-theme/card": ["outline"] }
      },
      "legacyWidgets": { "hide": ["archives", "calendar"] }
    },
    "patterns": {
      "core": false,
      "remote": false,
      "categories": { "deny": ["gallery"] }
    },
    "media": {
      "openverse": false,
      "imageSizes": { "allow": ["thumbnail", "large"] }
    }
  }
}

A fast first paint

Blockstudio blocks render on the server. The editor preloads the rendered output of the blocks already in the post, including nested blocks in synced patterns, and reuses it for the first paint instead of sending a renderer request per saved block.

Code, classes, attributes and WYSIWYG controls download when they first appear, so unselected blocks never load them. A block that does not need a live preview can set disableLoading and show a placeholder, with every field still editable.

Editor loading

block.json

{
  "name": "my-theme/map",
  "title": "Map",
  "blockstudio": {
    "blockEditor": {
      "disableLoading": true
    }
  }
}

blockstudio.json

{
  "blockEditor": {
    "disableLoading": true
  }
}

Previews that behave like the page

The Interactivity API loads inside the editor iframe, so data-wp-context, bindings, event handlers and your store actions run in the canvas. The bundled bsui/* components build on it, so a dialog opens and a select drops down while you edit.

Links in a preview never navigate away, whether clicked, opened with a modifier key or activated from the keyboard, and the click still selects the block. With assets.reset.enabled, the theme’s body classes are copied to the canvas, so selectors such as .brand-a .site-card match there too.

Interactivity

block.json

{
  "name": "my-theme/disclosure",
  "title": "Disclosure",
  "blockstudio": {
    "interactivity": true
  }
}

functions.php

<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
  return array_values(array_diff($classes, ['logged-in']));
});

An inventory at Tools > Blockstudio

The admin screen lists what Blockstudio registered from the filesystem: blocks, extensions, fields, pages with their sync state, and db.php schemas, in native WordPress DataViews tables. A Databases view browses each schema’s records, fetched and paginated through the REST API.

When the theme’s blocks.json names registries, a Registry view lists their blocks and imports them into your block directory from wp-admin. The screen is open to users with manage_options, and the blockstudio/admin/enabled filter turns it off.

Admin screen

blocks.json

{
  "$schema": "https://blockstudio.dev/schema/blocks.json",
  "directory": "blockstudio",
  "registries": {
    "ui": "https://blocks.example.com/registry.json"
  }
}

functions.php

<?php
add_filter('blockstudio/admin/enabled', '__return_false');

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