Modern and flexible block framework for WordPress.

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

Buy Now View Docs

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>

Ready to use in Gutenberg! 🚀 Call to Action

Features

A developers dream.

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

File-based

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

Enqueue assets

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

Inline assets

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

Prefixes

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

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.

Locations

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

Defaults

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

Twig support

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

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?

View Documentation

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 }

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 Docs

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

Buy once, use forever.

Unlimited sites Lifetime updates Product support (via E-Mail) Access to private Discord (soon) Discounts for future products

99 €

Continue to checkout