Blockstudio 5.4 - extend core and 3rd-party blocks

The block framework for WordPress.

Create custom blocks using PHP only Over 20 different available 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

Unlock next-level productivity

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

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.

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.

See more features

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-bold"
              tag="h1"
              attribute="richtext"
              placeholder="Enter headline"
            />
            <InnerBlocks class="mt-4 p-4 border" />
          </div>Copy

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.

cta

block.json

index.php

script-view.js

style.css

style-scoped.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.

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.

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 <?= bs_get_scoped_class( $b["name"] ) ?>">
                <!-- Styles inside style-scoped.css will
                     only apply to elements in this block. -->
                <h1><?= echo $a["title"] ?></h2>
                <?php if ($a['text']) : ?>
                    <h2><?= 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:

Style

Editor + Frontend

Editor Style

Editor only

Inline Style

Editor + Frontend (in a style tag)

Scoped Style

Editor + Frontend (read more)

Script

Editor + Frontend

Editor Script

Editor only

Inline Script

Editor + Frontend (in a script tag)

View Script

Frontend only

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

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

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

5.4

5.3

5.2

5.1

Pricing

Starter

49 €

3 websites 1 year of updates 1 year of support

Get started

Pro

99 €

Unlimited websites 1 year of updates 1 year of support

Get started

Lifetime

199 €

Unlimited websites Lifetime updates Lifetime support

Get started

The block framework for WordPress.

Create native blockswith ease.

Available field types:

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.

Use a system that you already know: files.

Available asset types:

Style encapsulation made easy.

The world of blocks at your fingertips.

What others are saying:

Continous innovation.

Pricing

Create native blocks
with ease.