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.
{
"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;
}
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.
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" }
]
}
}
<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:
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
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"
},
]
}
}
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
Icon
Link
Number
Radio
Range
Select
Text
Textarea
Toggle
Token
More field types (query, repeater etc.) are actively being developed.
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>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.
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