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.
{ "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
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.
{ "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.
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 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
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.
{ "$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
<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
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
.block-cta { background: red; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 0.5rem; }Copy
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.
<div class="<?php echo bs_get_scoped_class( $b["name"] ) ?>"> <h1>Scope me!</h1> </div>Copy
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.
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
Purchase