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 or Metabox Blocks.

Purchase

99 €

Lifetime License.

How it works

One block at a time.

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

cta.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 register_block_type counterparts.

$fields = array( array( 'key' => 'cta_title_key', 'label' => 'Title', 'name' => 'cta_title', 'type' => 'text', ), array( 'key' => 'cta_button_text_key', 'label' => 'Text', 'name' => 'cta_button_text', 'type' => 'text', ), );

Custom fields

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

<div class="font-sans w-full rounded-md 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> <a class="mt-8 p-4 rounded-lg bg-white bg-opacity-50 text-center cursor-pointer text-md uppercase text-black font-semibold tracking-wide md:mt-0 md:whitespace-nowrap md:ml-10 md:px-6 md:py-4"> <?php the_field( 'cta_button_text' ); ?> </a> </div>

Markup

The block markup is defined at the end of each file. Just like with ACF or MB, it is possible to define a different structure for the editor and frontend and provide example fields for the preview window.

Frontend

Get started with Blockstudio

Buy Now

Backend

cta example
Workflow

Customizable by nature.

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

Text

Prefixes

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

File Tray Stacked

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.

Layers

Multiple Instances

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

Earth

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.

Code Slash

Twig support

Are you using Timber? Blockstudio works with PHP and Twig files. Mix and match your block templates as you please.

Logo Javascript

Included script

Just wanna start developing? Simply activate the included JS file (~60kb) and start composing interactive Blocks using Twind and Alpine.

See documentation
Now available

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

Rocket

Buy once,
use forever.