Skip to content

Block Development (Turbo Blocks)

Turbo Blocks are registered via block.json and live inside the Turbo Blocks plugin. Each block has its own folder with its editor and frontend styles.

Folder structure

  • wp-content/plugins/turbo-blocks/blocks/
  • banner/
  • buttons/
  • features/
  • …

Each block folder typically includes:

  • block.json – block metadata and registration
  • editor.js – editor controls and JSX
  • style.css – frontend + editor styling
  • render.php – server-side render (only for dynamic blocks)

Creating a new block

npm run make:block "my new block"

This creates:

blocks/my-new-block/
  block.json
  editor.js
  style.css

Registering the block

Blocks auto-register when they contain a block.json.
No manual PHP registration is required.

Editing styles

Each block’s style.css is bundled into the global blocks.css file.

Rebuild after changes:

npm run build:blocks-css

For watch mode:

npm run watch:blocks-css

Editor controls

Most blocks use a mix of:

  • InspectorControls
  • PanelBody
  • RangeControl
  • SelectControl
  • PanelColorSettings

Match naming with existing patterns to keep controls consistent across blocks.

Dynamic blocks (PHP render)

If a block needs PHP rendering:

  • Add render.php
  • In block.json add:
"render": "file:./render.php"

Use the render file to output markup and any inline style variables.

Recommended workflow

  • Create a block with npm run make:block.
  • Build editor UI in editor.js.
  • Write styles in style.css.
  • Run npm run build:blocks-css.
  • Test in the WordPress editor and frontend.