Get Started

Modern and flexible block framework for WordPress.

Declare elements in a single file along with logic, markup and interactivity or kickstart development with the included block library. Requires Advanced Custom Fields Pro.

Purchase

99 €

Lifetime License.

How it works

One block at a time.

With Blockstudio, files in your blockstudio folder will automatically be registered as ready-to-use blocks in Gutenberg.

block.php
<?php /* Title: Call to Action Description: Call to action element. Category: design Icon: lightbulb Mode: preview SupportsAlign: false SupportsMode: false */

Setup

Block information is being defined in the header of the file. These settings correlate to their respective ACF register_block_type counterparts.

$fields = array( array( 'key' => 'cta_title_key', 'label' => 'Title', 'name' => 'cta_title', 'type' => 'text', ), array( 'key' => 'cta_text_key', 'label' => 'Text', 'name' => 'cta_text', 'type' => 'textarea', ), );

Custom fields

While defining fields via the ACF interface is completely fine, Blockstudio includes a handy way to register fields in the block files.

<div class="p-4 rounded-md bg-white shadow-sm"> <h1 class="mb-2 text-md color-gray-800"> <?php echo get_field( 'cta_title' ) ?: 'Title'; ?> </h1> <p class="text-sm color-gray-500"> <?php echo get_field( 'cta_text' ) ?: 'Text'; ?> </p> </div>

Markup

The block markup is defined at the end of each file. Just like ACF, it is possible to define a different structure for the editor and frontend.

Workflow

Customizable by nature.

Make Blockstudio work your way and define global defaults, run multiple instances or set block name prefixes.

Prefixes

Do you already have an existing ACF block library and are concerned about name collisions? Apply a prefix to all Blockstudio elements.

Custom Paths

Using a page builder that turns off themes altogether? Want to build your blocks from a plugin instead? Simply change the build path.

Multiple Instances

Need more fine grain control? Use the BlockstudioBuild class to create an unlimited amount of build locations with different prefixes!

Defaults

Forgot to set the correct post type for the 100 blocks you’ve just created with so much care? Set a global default and overwrite it in the block file if needed.

Now in beta

Professionally designed block library using Tailwind.

The template library provides you with an extensive and carefully crafted selection of professionally designed elements for your own and client websites.

image

Can be used for:

→ Design Systems

→ Mockups

→ Client work

→ Prototyping

View Library

99 €

Continue to checkout

Buy once,
use forever.