Purchase

A collection of web components
for WordPress developers.

A modern component-like
ACF blocks framework.

A minimal and feature-packed
WordPress theme.
fabrikatdigital.com

Modern, component-like
ACF blocks framework.

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

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 example image
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'; } );

Prefix

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 Path

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 BlockstudioBuild class to create an unlimited amount of build locations with different presets! Nice.

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

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.

 Coming soon

Tailwind
Block Library

The library will provide you with an extensive selection of professionally designed blocks for your website. Built with a utility-first approach using Tailwind.

Choose

Pick a fitting element from our ever growing block library. (50+ and counting)

Edit

Edit your chosen block and add it to your page.

Celebrate

🎊 Done!

* Please note that the block library is currently in construction, as we are still figuring out some of it's nuances. We are always looking for your ideas 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:

bsprefix - heroblock __ wrappername -- widemodifier

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 Blockstudios future:

99 €

Lifetime license

Proceed 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.

Products

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

© 2021 Fabrikat. All rights reserved.

hi@fabrikatdigital.com