Blockstudio 6.0 Modernized core, Blade support & more

The block framework for WordPress

Create custom blocks using PHP only
25 different field types
Use features like InnerBlocks and RichText without JavaScript
Automatically enqueue styles and scripts
Edit blocks inside the admin with a full blown code editor
Extend core or third-party blocks with custom fields

Editor

Block editor

Custom blocks in 3 steps

1 Register the block and custom fields Define the template that should be rendered Add some styles and make it look nice!

1 block.json

2 index.php

3 style.css

		                  {
                    "name": "blockstudio/cta",
                    "title": "CTA",
                    "icon": "star-filled",
                    "blockstudio": {
                      "attributes": [
                        {
                          "id": "title",
                          "type": "text",
                          "label": "Title"
                        },
                        {
                          "id": "buttonText",
                          "type": "text",
                          "label": "Button Text"
                        }
                      ]
                    }
                  }
                
					
				Copy

		                  <div class="block-cta">
                    <h2 class="block-cta__title">
                      <?php echo $a['title']; ?>
                    </h2>
                    <a class="block-cta__button">
                      <?php echo $a['buttonText']; ?>
                    </a>
                    <InnerBlocks class="block-cta__inner" />
                  </div>
                
					
				Copy

		                  .block-cta {
                    padding: 2rem;
                    border-radius: 0.125rem;
                    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
                  }

                  .block-cta__title {
                    font-size: 2rem;
                  }

                  .block-cta__button {
                    padding: 0.5rem 1.25rem;
                    font-size: 1rem;
                    background: black;
                    border-radius: 0.25rem;
                  }
                
					
				Copy

+

Update

Save

My new page

Create blocks like a pro

Buy now

Post

Block

CTA

Title

Create blocks like a pro

Button Text

Buy now

Supercharge your block editor development process

Custom blocks

Create interactive, advanced custom blocks using nothing but PHP and JSON.

Extensions

Extend any core or third-party block with custom fields and functionality.

Admin code editor

Build blocks with a powerful code editor right from your WordPress admin dashboard.

Batteries included

Use Twig, automatically enqueue assets, compile SCSS, and much more.

block.json

		                      {
      "$schema": "https://app.blockstudio.dev/schema",
      "name": "marketing/cta",
      "title": "CTA",
      "description": "Custom Call to Action block.",
      "blockstudio": {
        "attributes": [
          {
            "type": "group",
            "title": "Group",
            "attributes": [
              {
                "id": "wysiwyg",
                "type": "wysiwyg",
                "label": "WYSIWYG",
                "toolbar": {
                  "formats": {
                    "bold": true,
                    "italic": true,
                    "underline": true,
                    "strikethrough": true
                  }
                }
              }
            ]
          }
        ]
      }
    }
    
    
      
					
				Copy

block.json

		                      {
      "$schema": "https://app.blockstudio.dev/schema/extend",
      "name": "core/*",
      "priority": 10,
      "blockstudio": {
        "extend": true,
        "attributes": [
          {
            "id": "customColor",
            "type": "select",
            "label": "Custom color",
            "options": [
              {
                "value": "#f00",
                "label": "Red"
              },
              {
                "value": "#00f",
                "label": "Blue"
              }
            ],
            "set": [
              {
                "attribute": "style",
                "value": "color: {attributes.customColor}"
              }
            ]
          }
        ]
      }
    }
    
    
      
					
				Copy

25 field types
Admin code editor
Asset Minification
Automatic asset enqueuing
Automatic asset processing
Block extensions
Block overrides
Block transforms
Block variations
Code field assets
Code snippets
Composer support
Conditional attributes
Conditional blocks
Conditional rendering
Custom JSON schemas
Custom icons
ES module handling
Environment-specific rendering
File-based system
Full context support
Global and admin assets
HTML utilities
Init files
Inline and scoped assets
InnerBlocks
JS Event hooks
Lazy-loading blocks
MediaPlaceholder
PHP Filters
Populating options
Post meta integration
RichText
SCSS compilation
Tailwind CSS support
Template transformations
Temporary disable attributes
Twig support
Unlimited folders
useBlockProps

File system based

Use a system you already know: files

All block.json files within the blockstudio directory are parsed and registered as custom blocks. Other assets like styles and scripts will automatically enqueued when the block is being used.

cta

block.json

index.php

script-inline.js

script-view.js

style.css

style.scss

style-global.css

Metadata

Metadata for the block. The Blockstudio schema extends the WordPress block.json schema with additional properties.

Template

The template (PHP or Twig) which will be rendered on the frontend and inside the editor. Field and block data can be accessed using the $a and $b variables respectively.

Inline script

Inline script which will be inlined in the editor and on your frontend if the block is used.

View script

Script file that will be enqueued on the frontend only. Useful for sending information to Google Tag Manager.

Style

Style file which will be enqueued in the editor and on your frontend if the block is used.

SCSS file

SCSS file which will be compiled and enqueued in the editor and on your frontend if the block is used.

Global style

Global styles will be rendered for all blocks in the editor and on the frontend.

block.json

		                                                            
            {
              "$schema": "https://app.blockstudio.dev/schema",
              "name": "blockstudio/cta",
              "title": "Call to Action",
              "category": "text",
              "icon": "star-filled",
              "description": "Call to action block.",
              "keywords": [
                "cta",
                "call to action"
              ],
              "supports": {
                "align": true,
                "anchor": true
              },
              "blockstudio": {
                "attributes": [
                  { "id": "link", "type": "link", "label": "Link" },
                  { "id": "title", "type": "text", "label": "Title" },
                  { "id": "text", "type": "textarea", "label": "Text" }
                ]
              }
            }

                                
                                
					
				Copy

index.php

		                                                            
            <a href="<?php $a["link"]['url'] ?>"
               class="block-cta">
                <h1><?= echo $a["title"] ?></h2>
                <?php if ($a['text']) : ?>
                    <h2><?= echo $a["text"] ?></h2>
                <?php endif; ?>
            </a>

                                
                                
					
				Copy

script-inline.js

		                                                            
            // Load NPM packages and use them in your blocks.
            // Files will be downloaded to your block directory.

            import confetti from "blockstudio/canvas-confetti@1.6.0";

            document.querySelectorAll('.block-cta').forEach(item => {
                item.addEventListener('click', () => {
                    confetti();
                }
            });

                                
                                
					
				Copy

script-view.js

		                                                            
            // Send Google event on click, only on frontend.

            document.querySelectorAll('.block-cta').forEach(item => {
                item.addEventListener('click', () => {
                    window?.dataLayer?.push({
                        event: "cta_click",
                        from: window.location.href
                    });
                }
            });

                                
                                
					
				Copy

style.css

		                                                            
            .block-cta {
                background: red;
                padding: 1rem 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                border-radius: 0.5rem;
            }

                                
                                
					
				Copy

style.scss

		                                                            
            @import "blocks/cta";

                                
                                
					
				Copy

style-global.css

		                                                            
            h1 {
                font-size: 2rem;
                color: #fff;
                font-weight: 600;
            }

            h2 {
                color: rgba(255,255,255,0.5);
            }

                                
                                
					
				Copy

Fields

25 different field types at your disposal

Blockstudio provides a versatile array of field types, from basic text fields to complex structures like repeaters and tabs, as well as DOM-focused fields such as classes and data attributes. This diverse selection caters to a wide range of development needs.

Attributes

Renders data attribute inputs.

Checkbox

Renders a set of checkbox inputs.

Classes

Renders a field to select CSS classes.

Code

Renders a code editor.

Color

Renders a color palette and color picker.

Date

Renders a date picker.

Datetime

Renders a date and time picker.

Files

Renders a button to the media library. Picked items can be reordered inline.

Gradient

Renders a gradient palette and gradient picker

Group

Renders multiple fields in an (optionally) collapsible container.

Icon

Renders an SVG icon from an icon set.

Link

Renders a link control to choose internal or external links.

Message

Renders a message with custom content.

Number

Renders a number input.

Radio

Renders a set of radio inputs.

Range

Renders a range input to set a numerical value between two points.

Repeater

Renders a set of fields that can be repeated.

Richtext

Attribute field for RichText fields.

Select

Renders a select input with support for single or multiple selections.

Tabs

Renders a tabbed interface for grouping fields.

Text

Renders a single line text input.

Textarea

Renders a textarea input.

Toggle

Renders a true/false toggle.

Unit

Renders a number input with a unit dropdown.

WYSIWYG

Renders a WYSIWYG editor.

Attributes

Renders data attribute inputs.

Checkbox

Renders a set of checkbox inputs.

Classes

Renders a field to select CSS classes.

Code

Renders a code editor.

Color

Renders a color palette and color picker.

Date

Renders a date picker.

Datetime

Renders a date and time picker.

Files

Renders a button to the media library. Picked items can be reordered inline.

Gradient

Renders a gradient palette and gradient picker

Group

Renders multiple fields in an (optionally) collapsible container.

Icon

Renders an SVG icon from an icon set.

Link

Renders a link control to choose internal or external links.

Message

Renders a message with custom content.

Number

Renders a number input.

Radio

Renders a set of radio inputs.

Range

Renders a range input to set a numerical value between two points.

Repeater

Renders a set of fields that can be repeated.

Richtext

Attribute field for RichText fields.

Select

Renders a select input with support for single or multiple selections.

Tabs

Renders a tabbed interface for grouping fields.

Text

Renders a single line text input.

Textarea

Renders a textarea input.

Toggle

Renders a true/false toggle.

Unit

Renders a number input with a unit dropdown.

WYSIWYG

Renders a WYSIWYG editor.

WYSIWYG

Renders a WYSIWYG editor.

Unit

Renders a number input with a unit dropdown.

Toggle

Renders a true/false toggle.

Textarea

Renders a textarea input.

Text

Renders a single line text input.

Tabs

Renders a tabbed interface for grouping fields.

Select

Renders a select input with support for single or multiple selections.

Richtext

Attribute field for RichText fields.

Repeater

Renders a set of fields that can be repeated.

Range

Renders a range input to set a numerical value between two points.

Radio

Renders a set of radio inputs.

Number

Renders a number input.

Message

Renders a message with custom content.

Link

Renders a link control to choose internal or external links.

Icon

Renders an SVG icon from an icon set.

Group

Renders multiple fields in an (optionally) collapsible container.

Gradient

Renders a gradient palette and gradient picker

Files

Renders a button to the media library. Picked items can be reordered inline.

Datetime

Renders a date and time picker.

Date

Renders a date picker.

Color

Renders a color palette and color picker.

Code

Renders a code editor.

Classes

Renders a field to select CSS classes.

Checkbox

Renders a set of checkbox inputs.

Attributes

Renders data attribute inputs.

WYSIWYG

Renders a WYSIWYG editor.

Unit

Renders a number input with a unit dropdown.

Toggle

Renders a true/false toggle.

Textarea

Renders a textarea input.

Text

Renders a single line text input.

Tabs

Renders a tabbed interface for grouping fields.

Select

Renders a select input with support for single or multiple selections.

Richtext

Attribute field for RichText fields.

Repeater

Renders a set of fields that can be repeated.

Range

Renders a range input to set a numerical value between two points.

Radio

Renders a set of radio inputs.

Number

Renders a number input.

Message

Renders a message with custom content.

Link

Renders a link control to choose internal or external links.

Icon

Renders an SVG icon from an icon set.

Group

Renders multiple fields in an (optionally) collapsible container.

Gradient

Renders a gradient palette and gradient picker

Files

Renders a button to the media library. Picked items can be reordered inline.

Datetime

Renders a date and time picker.

Date

Renders a date picker.

Color

Renders a color palette and color picker.

Code

Renders a code editor.

Classes

Renders a field to select CSS classes.

Checkbox

Renders a set of checkbox inputs.

Attributes

Renders data attribute inputs.

Attributes

Renders data attribute inputs.

Checkbox

Renders a set of checkbox inputs.

Classes

Renders a field to select CSS classes.

Code

Renders a code editor.

Color

Renders a color palette and color picker.

Date

Renders a date picker.

Datetime

Renders a date and time picker.

Files

Renders a button to the media library. Picked items can be reordered inline.

Gradient

Renders a gradient palette and gradient picker

Group

Renders multiple fields in an (optionally) collapsible container.

Icon

Renders an SVG icon from an icon set.

Link

Renders a link control to choose internal or external links.

Message

Renders a message with custom content.

Number

Renders a number input.

Radio

Renders a set of radio inputs.

Range

Renders a range input to set a numerical value between two points.

Repeater

Renders a set of fields that can be repeated.

Richtext

Attribute field for RichText fields.

Select

Renders a select input with support for single or multiple selections.

Tabs

Renders a tabbed interface for grouping fields.

Text

Renders a single line text input.

Textarea

Renders a textarea input.

Toggle

Renders a true/false toggle.

Unit

Renders a number input with a unit dropdown.

WYSIWYG

Renders a WYSIWYG editor.

Attributes

Renders data attribute inputs.

Checkbox

Renders a set of checkbox inputs.

Classes

Renders a field to select CSS classes.

Code

Renders a code editor.

Color

Renders a color palette and color picker.

Date

Renders a date picker.

Datetime

Renders a date and time picker.

Files

Renders a button to the media library. Picked items can be reordered inline.

Gradient

Renders a gradient palette and gradient picker

Group

Renders multiple fields in an (optionally) collapsible container.

Icon

Renders an SVG icon from an icon set.

Link

Renders a link control to choose internal or external links.

Message

Renders a message with custom content.

Number

Renders a number input.

Radio

Renders a set of radio inputs.

Range

Renders a range input to set a numerical value between two points.

Repeater

Renders a set of fields that can be repeated.

Richtext

Attribute field for RichText fields.

Select

Renders a select input with support for single or multiple selections.

Tabs

Renders a tabbed interface for grouping fields.

Text

Renders a single line text input.

Textarea

Renders a textarea input.

Toggle

Renders a true/false toggle.

Unit

Renders a number input with a unit dropdown.

WYSIWYG

Renders a WYSIWYG editor.

Composition

Blockstudio brings together the best of both worlds to create native WordPress blocks. React features inside the editor and plain server side rendered PHP for the frontend.

All inside the same file, without a build step

Find out how


          useBlockProps

Mark an element with this attribute and it will become the block wrapper inside the editor.


          <RichText />

Render an editable field inside the editor and static HTML on the frontend.


          <InnerBlocks />

Add child blocks inside the editor and render them on the frontend.

		          <div useBlockProps class="container">
            <RichText
              class="text-xl font-semibold"
              tag="h1"
              attribute="richtext"
              placeholder="Enter headline"
            />
            <InnerBlocks class="mt-4 p-4 border" />
          </div>
        
					
				Copy

Editor

The world of blocks at your fingertips

The Blockstudio editor is the next evolution in WordPress block development. It further reduces the barrier of editing blocks and brings a loved and well known code interface (Visual Code Studio via Monaco) to the WordPress admin area.

See editor features

AI

Unlock your AI's full potential with Blockstudio context

Turn your AI into a Blockstudio expert. We provide a comprehensive context file (blockstudio-llm.txt) with your project's unique setup—docs, schemas, and settings—so your AI assistant can generate precise, relevant code.

Optimize your AI development

Testimonials

What others are saying

Finding the balance between using native Gutenberg blocks and still achieving high level, advanced and complex layouts which clients can edit can be a challenge. Blockstudio lowers the barrier to entry for creating Gutenberg blocks by making use of ACF and Metabox functions in an easy to use system. It's as simple as creating a folder, adding a PHP file and defining your block. The possibilities are limitless.

Taylor Drayson

I've been using Blockstudio to build custom Gutenberg blocks for a few months, on both my personal site alongside several client projects. It makes creating blocks incredibly easy and really cuts out on dev time. I love that it works alongside ACF and Metabox as we use both, depending on project requirements. As Gutenberg grows, we're pivoting more towards blocks and away from custom themes and builders - Blockstudio is the enabler for that transition.

James LePage

Releases

Continous innovation

Our ethos at Blockstudio is rooted in swift, yet careful progression. We consistently enhance the plugin and expand features without compromising on stability. Stay updated with the most recent advancements and upgrades below.

See all releases Changelog

latest

6.0

5.6

5.5

5.4

Help Shape the Future

Join our active community in shaping the future of our products. As a customer, you can vote on upcoming features and submit your own ideas. See what's planned, what's in progress, and be part of the journey.

View full roadmap

Pricing

Act fast! Our lifetime license is ending soon! For years, the lifetime license has offered incredible value with lifetime updates and lifetime support. However, this special opportunity is going away for good on June 1st, 2025. Don't miss your last chance to secure this plan!

Starter

€49

EUR

per year

Get started

3 websites
1 year of updates
1 year of support

Pro

€99

EUR

per year

Get started

Unlimited websites
1 year of updates
1 year of support

Lifetime ♾️

Until 01.06.2025

€199

EUR

once

Get started

Unlimited websites
Lifetime updates
Lifetime support

Frequently asked questions

The Lifetime License has been available for the past 4.5 years, but it will be discontinued on June 1st, 2025. After this date, it will no longer be possible to purchase a lifetime license.

If you already own a Lifetime License, these changes do not affect you. You will continue to receive all the benefits of your existing lifetime license, including lifetime updates and support, as originally promised.

Yes, blocks will continue to work after the license expires. However, you will no longer receive updates or support. We recommend renewing your license to keep your blocks up to date and to receive support.

Yes, you can upgrade your license at any time. You will only need to pay the difference between the two licenses.

We accept all major credit cards, PayPal, and other secure payment methods.

Yes, we offer a 30-day money-back guarantee. If you are not satisfied with your purchase, you can request a refund within 30 days.

The block framework for WordPress

Supercharge your block editor development process

Use a system you already know: files

25 different field types at your disposal

Blockstudio brings together the best of both worlds to create native WordPress blocks. React features inside the editor and plain server side rendered PHP for the frontend.

All inside the same file, without a build step

The world of blocks at your fingertips

Unlock your AI's full potential with Blockstudio context

What others are saying

Continous innovation

Help Shape the Future

Pricing

MultitaskAI

Blockstudio

SleekWP

OneClick Pro

KickstartUI

Glaze