Modern and flexible block framework for WordPress.

Checkmark Declare blocks in a single file Checkmark Works with PHP and Twig Checkmark Edit blocks within WordPress (beta) Checkmark Requires ACF Pro or MB Blocks

Information Circle 99 € lifetime license for unlimited sites.

1 Meta information about the block is defined in the file header.
2 Custom fields are be registered by declaring a $fields variable.
3 The markup of the block will be output in the Gutenberg editor and on the frontend.
<?php // cta.php /* Title: Call to Action Icon: admin-comments */ $fields = [ [ 'key' => 'cta_title_key', 'label' => 'Title', 'name' => 'cta_title', 'type' => 'text', ], ]; ?> <div class="font-sans w-full rounded-xl bg-gradient-to-tr from-teal-400 to-cyan-400 p-12 flex flex-col justify-center md:flex-row md:items-center"> <h2 class="text-white text-3xl font-bold uppercase text-center md:text-left lg:text-4xl"> <?php the_field( 'cta_title' ); ?> </h2> </div>
Chatbox Call to Action

Cog Features

A developers dream.

Blockstudios carefully crafted feature set is made to deliver the best developer experience (DX) for its users.

Document

File-based

Each file in your Blockstudio folder represents one Gutenberg block. A proven and easy mental model that scales with you.

Logo Css3

Enqueue assets

Blockstudio will automagically enqueue CSS and JavaScript files in the frontend when available. No setup needed.

Code Working

Inline assets

CSS and JavaScript files can be inlined by appending an -inline to the file name, saving additional network requests when needed.

Text

Prefixes

Apply a prefix to all Blockstudio based blocks, preventing ID collisions with your pre-existing block library.

File Tray Stacked

Custom Path

Change the path where Blockstudio should look for Blocks. By default, Blockstudio will try and look for blocks inside your currently activated theme.

Layers

Locations

Use the BlockstudioBuild class to create an unlimited amount of locations (plugins, child themes, etc.) for your blocks.

Earth

Defaults

Easily set default settings like supported post types or icons for your block library, then override from the file if needed.

Code Slash

Twig support

Blockstudio works with PHP and Twig (using Timber) files. Mix and match your block templates in the same folder as you please.

Stop Circle

Exclude folders

Exclude certain folder names from being parsed by Blockstudio as a way to prevent reusable elements from becoming blocks.

Want to the full rundown?

Code Slash Boilerplate

Reduce code and get running faster.

Below is a code comparison to illustrate how many potential lines of code can be saved by using Blockstudio (left) vs. the usual way in Advanced Custom Fields. (right)

Blockstudio 45.45% less code
<?php // testimonial.php /* Title: Testimonial Description: A custom testimonial block. Category: formatting Icon: admin-comments Keywords testimonial quote */ $fields = [ [ 'key' => 'testimonial_key', 'label' => 'Testimonial', 'name' => 'testimonial', 'type' => 'text', ], [ 'key' => 'author_key', 'label' => 'Author', 'name' => 'author', 'type' => 'text', ], ]; ?> <blockquote class="testimonial-blockquote"> <span class="testimonial-text"><?php echo get_field('testimonial') ?: 'Your testimonial here...'; ?> </span> <span class="testimonial-author"><?php echo get_field('author') ?: 'Author name'; ?> </span> </blockquote>
* Some of the code for the ACF example has been taken from their documentation.
ACF only
<?php add_action('acf/init', 'my_acf_init_block_types'); function my_acf_init_block_types() { if( function_exists('acf_register_block_type') ) { acf_register_block_type(array( 'name' => 'testimonial', 'title' => 'Testimonial', 'description' => 'A custom testimonial block.', 'render_callback' => 'testimonial_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); } } if( function_exists('acf_add_local_field_group') ): acf_add_local_field_group(array( 'key' => 'testimonial_group', 'title' => 'Testimonial', 'fields' => array ( array ( 'key' => 'testimonial_key', 'label' => 'Testimonial', 'name' => 'testimonial', 'type' => 'text', ), array ( 'key' => 'author_key', 'label' => 'Author', 'name' => 'author', 'type' => 'text', ) ), 'location' => array ( array ( array ( 'param' => 'block', 'operator' => '==', 'value' => 'acf/testimonial', ), ), ), )); endif; function testimonial_callback() { ?> <blockquote class="testimonial-blockquote"> <span class="testimonial-text"><?php echo get_field('testimonial') ?: 'Your testimonial here...'; ?> </span> <span class="testimonial-author"><?php echo get_field('author') ?: 'Author name'; ?> </span> </blockquote> <?php }

Cube Editor (beta)

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.

Currently in development, the editor will be out of beta soon. For a lack of a better phrase: make sure to watch this space!

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