Blockstudio is evolving
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, built-in code editor, inline assets, scoped styles, Twig support and much more.

Information Circle 99 € lifetime license for unlimited sites.

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" } ] } }
<div class="block-cta"> <h2 class="block-cta__title"> <?php echo $a['title']; ?> </h2> <a class="block-cta__button"> <?php echo $a['buttonText']; ?> </a> </div>
.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; }
+
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

File Tray Stacked File system based

Create blocks using 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.

{ "$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" } ] } }
<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>
document.querySelectorAll('.block-cta').forEach(item => { item.addEventListener('click', () => { // Send Google event on click. window?.dataLayer?.push({ event: "cta_click", from: window.location.href }); } });
.block-cta { background: red; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 0.5rem; }
h1 { font-size: 2rem; color: #fff; font-weight: 600; } h2 { color: rgba(255,255,255,0.5); }

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

Create Fields

Custom fields without extra plugins.

Blockstudio comes with a set of field types that can be attached to blocks. Gutenberg components are used to display the controls for those fields, assuring that updates to the editor will also benefit the experience of using Blockstudio.

{ "blockstudio": { "attributes": [ { "id": "group", "type": "group", "title": "Group", "initialOpen": true, "attributes": [ { "id": "files", "type": "files", "label": "Files", "multiple": true, "returnFormat": "id" }, ] }, { "id": "message", "type": "text", "label": "Message" }, ] } }
blockstudio schema

Fields are declared directly inside the block.json file, allowing for easy transport and duplication of already existing blocks. Want to beef up the developer experience? Use the Blockstudio schema to get help like descriptions, autocomplete and validation straight to your IDE. No documentation needed.

Available field types:

Checkbox

Color

Date

Datetime

Files

Gradient

Group

Link

Number

Radio

Range

Select

Text

Textarea

Toggle

Token

Arrow Forward Circle

More field types (query, repeater etc.) are actively being developed.

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.

<?php /* index.php */ ?> <div class="<?php echo bs_get_scoped_class( $b["name"] ) ?>"> <h1>Scope me!</h1> </div>
/* style-scoped.css */ h1 { color: red; }

Result:

<style> .bs-62df71e6cc9a h1 { color: red; } </style> <div class="bs-62df71e6cc9a"> <h1>Scope me!</h1> </div>

Cube Editor

The world of blocks at your fingertips.

The brand new Blockstudio editor is the next evolution in 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.

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