Getting Started

This guide will help you set up Blockstudio and create your first custom block.

Installation

Via Composer (Recommended)

composer require blockstudio/blockstudio

Composer installations receive updates through Composer. The built-in GitHub updater is automatically disabled.

Manual Installation

Upload the zip to your WordPress plugins directory and activate the plugin. Manual installations receive automatic update notifications in the WordPress dashboard via the built-in GitHub updater.

Creating Your First Block

1. Create a Block Directory

Create a new directory in your theme:

my-theme/
  blockstudio/
    my-first-block/
      block.json
      index.php

2. Define the Block Schema

Create block.json with your block configuration:

{
  "$schema": "https://blockstudio.dev/schema/block",
  "name": "my-theme/my-first-block",
  "title": "My First Block",
  "category": "common",
  "icon": "star-filled",
  "blockstudio": {
    "attributes": [
      {
        "id": "heading",
        "type": "text",
        "label": "Heading",
        "default": "Hello World"
      },
      {
        "id": "content",
        "type": "textarea",
        "label": "Content"
      }
    ]
  }
}

3. Create the Template

Create index.php for rendering:

<div class="my-first-block">
  <h2><?php echo $a['heading']; ?></h2>
  <p><?php echo $a['content']; ?></p>
</div>

Using Twig Templates

Blockstudio supports Twig templates out of the box. Simply use index.twig instead:

<div class="my-first-block">
  <h2>{{ a.heading }}</h2>
  <p>{{ a.content }}</p>
</div>

Adding Styles

Create a style.css file in the same folder:

.my-first-block {
  padding: 2rem;
  background: #f5f5f5;
}

Blockstudio will automatically enqueue this stylesheet when the block is used.

Next Steps

Your block is now ready to use in the WordPress editor. Continue exploring the documentation to learn about:

• Field Types - All available field types
• Components - InnerBlocks, RichText, and more
• Tailwind Integration - Using Tailwind CSS
• Hooks - Extending functionality with filters and actions