Modern, component-like
ACF blocks framework.

Declare elements in a single file along with logic, markup and interactivity or kickstart development with the included headless block library.

Purchase

99 €

Lifetime license. Requires ACF Pro.
<?php // Declare block settings as comments in file. /* Title: Feature Category: design Icon: folders */ // Blockstudio will automatically look // for a $fields variable inside your file, // register and link the fields to the block. $fields = array( array( 'key' => 'feature_img_field', 'label' => 'Image', 'name' => 'feature_img', 'type' => 'image', ), array( 'key' => 'feature_pretitle_field', 'label' => 'Pretitle', 'name' => 'feature_pretitle', 'type' => 'text', ) // …you get the idea. 😉 ); $img = get_field( 'feature_img' ); $pretitle = get_field( 'feature_pretitle' ); // Render markup for the block. ?> <div class="blockstudio-block__feature__container"> <div class="blockstudio-block__feature__container-inner"> <span class="blockstudio-block__feature__type"><?php echo $type ?></span> <img src="<?php echo $img['url'] ?>" class="blockstudio-block__feature__img"/> <div class="blockstudio-block__feature__content"> <h1 class="blockstudio-block__feature__pretitle"><?php echo $pretitle ?></span> <h2 class="blockstudio-block__feature__title"><?php echo $title ?></span> <p class="blockstudio-block__feature__text"><?php echo $text ?></span> <a href="<?php echo $link ?>" class="blockstudio-block__feature__link">Read more →</a> </div> </div> </div>
New
Design Modern architecture Plaid chillwave neutra fashion axe meggings paleo austin jianbing unicorn woke irony shoreditch lyft yr. Gluten-free freegan pitchfork seitan, iceland chambray godard meh hot chicken viral beard wax. Read more →
Feature

Customisable to the core.

Blockstudio is not imposing any methodologies or principles on it’s users, make it your own.

<?php add_filter( 'blockstudio/prefix', function () { return 'bs'; } );

Prefixes

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

<?php add_filter( 'blockstudio/path' , function () { return get_template_directory() . '/blocks'; } );

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.

<?php add_action( 'acf/init', function () { // Blockstudio\Build::init( $folder, $prefix ); Blockstudio\Build::init( 'client-blocks', 'client' ); Blockstudio\Build::init( 'documentation-blocks', 'marketing' ); } );

Multiple Instances

Need more fine grain control? Use the Blockstudio\Build class to create an unlimited amount of build locations with different presets! Nice.

<?php add_filter( 'blockstudio/defaults', function () { return array( 'post_types' => array( 'post' ), ); } );

Defaults

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

Want to build faster?
We got you covered.

The library provides you with a set of modularised ACF field components and structural, headless blocks to jumpstart your next projects.

Structure

Fully accessible and extendable (but unstyled) building blocks like tabs, text components, media galleries and more.

Styling

Drop in your favourite CSS frameworks (full support coming soon) or write styles yourself.

Celebration

🎊 Done!

* Please note that the block library is currently in a beta phase, as we are still figuring out some of it’s nuances. We are always looking for user feedback and suggestions. Message us!

Created with design
systems in mind.

Blockstudio helps in establishing a cohesive developer experience with focus on flexibility.

<div class="<?php echo Blockstudio\Library::classFilter( $block, 'wrapper', FALSE ) ?>"> <div class="<?php echo Blockstudio\Library::classFilter( $block, 'text' ) ?>"> <h1 class="<?php echo Blockstudio\Library::classFilter( $block, 'h1' ) ?>">My hero headline</h1> <p class="<?php echo Blockstudio\Library::classFilter( $block, 'p' ) ?>">My hero text</p> </div> </div>

Use the classFilter when composing blocks.

<div class="hero__wrapper"> <div class="text hero__text"> <h1 class="h1 hero__h1">My hero headline</h1> <p class="p hero__p">My hero text</p> </div> </div>

Block dependant CSS class names will be generated automatically on the frontend.

The default class naming system is inspired by the industry standard BEM (Block, Element, Modifier) and is structured like so:

bs prefix – hero block __ wrapper name — wide modifier

If BEM class naming is not your thing, Blockstudio has support for a utility class based approach.

A bright future ahead.

With the WordPress editing experience evolving to a new era, one thing is certain: blocks are here to stay. That’s why we are even more excited for what is in store for Blockstudio:

  • Theming system for block library

  • Flexible content field based page builder optimised for Gutenbergs sidebar

  • Cloud based library for user blocks

  • Inline editing for ACF fields

  • Full page block patterns

99 €

Lifetime license

Continue to checkout

Stay in the loop

For:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing.

Learn more about Mailchimp's privacy practices here.

Projects

A collection of web components
for WordPress developers.

A modern component-like
ACF blocks framework.

A minimal and feature-packed
WordPress theme.

Quicklinks

Documentation Privacy Login Reset password

© 2020 Fabrikat. All rights reserved.

hi@fabrikatdigital.com