Blockstudio 4.2 is out
Arrow Forward

The block framework for WordPress.

Blockstudio gives you the ultimate developer experience for creating custom, production-ready PHP blocks using a filesystem based approach. Native fields, InnerBlocks, RichText, built-in code editor, inline assets, scoped styles, Twig support and much more.

Information Circle 99 € lifetime license for unlimited sites.

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!
block.json
index.php
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
Star
CTA
Title
Create blocks like a pro
Button Text
Buy now

Stop Block registration

Create native blocks
with ease.

Blockstudio extends the block.json to allow you to define fields for your block. They are automatically added to the editor and saved to the block as attributes. Gutenberg components are used to display the controls for those fields, assuring a coherent editing experience.

block.json

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

Available field types:

Checkbox

Renders a set of checkbox inputs.

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.

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.

Text

Renders a single line text input.

Textarea

Renders a textarea input.

Toggle

Renders a true/false toggle.

Token

Renders a field similar to the “to” field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.

WYSIWYG

Renders a WYSIWYG editor.

Layers Composition

Blockstudio brings together the best of both worlds. Native WordPress React features inside the editor and plain old server side rendered PHP for the frontend.

All inside the same file, without a build step.

File Tray Stacked File system based

Use a system that 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.

Folder Open

cta

Document
block.json
Arrow Forward
Document
index.php
Arrow Forward
Logo Nodejs
script-view.js
Arrow Forward
Logo Css3
style.css
Arrow Forward
Logo Css3
style-scoped.css
Arrow Forward
Document

Metadata

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

Document

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.

Logo Nodejs

View script

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

Logo Css3

Style

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

Logo Css3

Scoped style

Scoped inline styles which will be rendered inside a style tag in the editor and on your frontend if the block is used.

block.json

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

                                
                                
        
Copy
index.php

                                                                        
            <a href="<?php $a["link"] ?>"
               class="block-cta <?php echo bs_get_scoped_class( $b["name"] ) ?>">
                <!-- Styles inside style-scoped.css will
                     only apply to elements in this block. -->
                <h1><?php echo $a["title"] ?></h2>
                <?php if ($a['text']) : ?>
                    <h2><?php echo $a["text"] ?></h2>
                <?php endif; ?>
            </a>
Copy
script.js

                                                                        
            document.querySelectorAll('.block-cta').forEach(item => {
                item.addEventListener('click', () => {
                    // Send Google event on 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-scoped.css

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

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

                                
                                
        
Copy

Available asset types:

Logo Css3

Style

Editor + Frontend

Logo Css3

Editor Style

Editor only

Logo Css3

Inline Style

Editor + Frontend (in a style tag)

Logo Css3

Scoped Style

Editor + Frontend (read more)

Logo Nodejs

Script

Editor + Frontend

Logo Nodejs

Editor Script

Editor only

Logo Nodejs

Inline Script

Editor + Frontend (in a script tag)

Logo Nodejs

View Script

Frontend only

Albums Scoped styles

Style encapsulation made easy.

Never worry about overlapping styles or class names ever again. With scoped styles you can keep your CSS structure simple, move quicker and iterate faster.

index.php

                                
        <div class="<?php echo bs_get_scoped_class( $b["name"] ) ?>">
            <h1>Scope me!</h1>
        </div>
Copy
style-scoped.css

                                
        h1 {
            color: red;
        }

          
          
        
Copy

Result:


                                                  <style>
                .bs-62df71e6cc9a h1 {
                    color: red;
                }
              </style>

              <div class="bs-62df71e6cc9a">
                <h1>Scope me!</h1>
              </div>
Copy

Cube 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.

editor

Chatbox Ellipses 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

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

James LePage

Cart Purchase

Buy once, use forever.

Checkmark Unlimited sites Checkmark Lifetime updates Checkmark Product support (via E-Mail) Checkmark Access to private Discord (soon) Checkmark Discounts for future products