Custom blocks in 3 files No JavaScript, no build step, no boilerplate.

Define fields in JSON

Add a blockstudio key to block.json. Define attributes with types such as text, toggle, and color. Blockstudio generates the editor UI automatically, with 26 field types from text inputs to repeaters and code editors.

Full JSON Schema support gives autocomplete and validation in VS Code, PhpStorm, and every compatible editor.

Field types reference

block.json

{
  "name": "starter/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": {
      "heading": { "type": "text" },
      "showCta": { "type": "toggle", "label": "Show CTA" },
      "background": { "type": "color" }
    }
  }
}

3-file workflow

block.json for fields, a template for markup, and an optional stylesheet.

React in PHP

RichText, InnerBlocks, and useblockprops=”true” work directly in PHP, Twig, or Blade.

SCSS and Tailwind

Use CSS, SCSS, or Tailwind. Blockstudio compiles and minifies automatically.

26 field types

Text, color, image, repeater, select, code editor, and more, configured in JSON.

JSON Schema

Autocomplete and validation in VS Code, PhpStorm, and compatible editors.

Three template languages

PHP, Twig, and Blade share the same variables and components.

npm imports

Import packages in script.js; local in production and CDN-backed in the editor.

Interactivity API

Enable the WordPress Interactivity API with one flag.

React components in PHP templates

Use <RichText /> for inline editing and static frontend HTML, <InnerBlocks /> for child blocks, and useblockprops="true" for the wrapper—all in one template.

In the editor these become real React components. On the frontend they render as server-side HTML, with no JavaScript shipped to visitors.

Explore components

index.php

<div useblockprops="true" class="container">
  <RichText
    class="text-xl font-semibold"
    tag="h1"
    attribute="richtext"
    placeholder="Enter headline"
  />

  <?php if ($a['showCta']): ?>
    <a href="<?= $a['ctaUrl'] ?>"><?= $a['ctaLabel'] ?></a>
  <?php endif; ?>

  <InnerBlocks class="mt-4 p-4 border" />
</div>

Write in PHP, Twig, or Blade

Use the template language you know. PHP works out of the box; add Timber for Twig or jenssegers/blade for Blade. The variables, components, and behavior stay the same.

$a (attributes), $b (block), $c (context), and $innerBlocks are available in every language.

Template languages

index.twig

<div useblockprops="true" class="card">
  <RichText tag="h2" attribute="title" placeholder="Card title" />
  <img src="{{ a.image.url }}" alt="{{ a.image.alt }}" />
  <div class="card__body">{{ a.description }}</div>
  <InnerBlocks allowedBlocks='["core/button"]' />
</div>

Conditional logic and dynamic options

Show and hide fields with operators including ==, !=, includes, empty, and comparisons. Combine conditions with OR logic.

Populate options from posts, users, terms, functions, or APIs. Mix static options with live data instead of hardcoding lists.

Conditional logic

block.json

{
  "attributes": {
    "layout": {
      "type": "select",
      "options": ["default", "featured", "minimal"],
      "populate": {
        "type": "query",
        "query": "posts",
        "arguments": { "post_type": "layout", "posts_per_page": -1 }
      }
    },
    "columns": {
      "type": "range",
      "min": 1,
      "max": 4,
      "conditions": [{ "id": "layout", "operator": "!=", "value": "minimal" }]
    }
  }
}

ES modules without a build step

Add script.js and it loads as an ES module. Import npm packages with the npm: prefix and Blockstudio downloads them locally for production.

The editor gets instant preview while the frontend uses local modules with zero external dependency, enqueued only once.

Asset processing

script.js

import { register } from
  "npm:swiper@11.0.0/element/bundle";
import "npm:swiper@11.0.0/swiper.min.css";

register();
const el = document.querySelector(".swiper");
Object.assign(el, {
  slidesPerView: 3,
  spaceBetween: 20,
  loop: true,
});
el.initialize();

Post meta and options

Store values in post meta or options alongside block attributes.

Conditional logic

Show fields based on values using equality, inclusion, emptiness, and comparisons.

Dynamic populations

Populate choices from posts, users, terms, functions, or APIs.

Variations and overrides

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