BlockStudio Review: The Best Way of Creating ACF Gutenberg Blocks

As a WordPress developer, you might want to craft custom blocks and add your own special elements to WordPress. I've ran into this many times.

Either premade blocks don't have what you're looking for, come with tons of others, or just aren't powerful enough.

I've also experimented with ACF conditions for the top & bottom of my content, but many times you need blocks IN your writing. Like right here. Right after this paragraph. Look at this little tutorial difficulty block:

When creating ACF blocks (or Metabox), the BlockStudio block framework is undoubtably a great helper. Seamlessly integrating into the Gutenberg editor, this tool enables you to create blocks while retaining a user-friendly interface DIRECTLY in WordPress. And despite the need to write code, BlockStudio makes it easier, faster, and directly within WordPress.

I'm not really a developer. I used to make websites but since turned that all into a blog where myself (and the rest of our team) teaches. But along the way I've had to pick up a ton about WordPress. It's actually incredible learning about. Everything fits together like a puzzle, so why not take advantage of that?

I fell in love with BlockStudio after hating the process of creating blocks previously to using it. I don't even know what I was really doing. I spent the majority of a 10 hour flight learning how to customize blocks from a basic to advanced level to create some powerful WordPress customizations.

What Does BlockStudio Do?

BlockStudio gives WordPress developers (or anyone intrigued for that matter) the ultimate and simplified experience in creating custom Gutenberg blocks. As a WordPress plugin, it includes a full code editor that creates and edits all within the admin dashboard.

BlockStudio allows you to compose your own blocks with less effort. The plugin automatically registers blocks, as well as all the assets. To do so, the tool will look for a folder within your currently activated theme and will register all your subfolders that have block.json files. BlockStudio also lets you choose whether you want them only in the backend or frontend, external file, or directly inline.

BlockStudio enhances the capabilities of block.json, letting you specify fields for your block. These fields are seamlessly integrated into the WP editor and stored within the block as attributes. Gutenberg components facilitate the presentation of the controls dedicated to these fields, keeping things in sync & easy. You can import and export native blocks too.

It comes with 3 main features: fields, editor, and composition. Set up custom fields for blocks, edit those blocks within WordPress, and create new ones with extreme ease.

How Does BlockStudio Speed Up Block Creation?

With BlockStudio, there's no need for any setup hassles. You can dive right into crafting your unique blocks within a few seconds of setting up (and hours? of reading documentation).

WordPress allows a file-based approach through the WPDefinedPath string type, but BlockStudio takes it up a notch. Making the file system the primary and only method of registering blocks. 

The introduction of scoped styles ensures that your CSS remains organized and uncluttered. This not only simplifies your CSS structure but also expedites your workflow and enhances the speed of iteration. No switching back and forth confusion. I even made this review block (which I will customize for this review):

BlockStudio costs €99 and can be used on an unlimited number of websites. It comes with lifetime updates and product support through email. Here's a breakdown of how I used it & what I made (what you see above^)

Setup & Customization

The editor is deactivated by default. Purchase BlockStudio, active it with your license code, and then enable the editor (if you want to build within your WP admin). To enable the editor, add this code to your functions.php file (or through a Code Snippet).

Replace the numbers with the user ID you want the plugin working for. In this example, user ID 1 and 19 will have the editor enabled:

add_filter('blockstudio/editor/users', function () {
  return [1, 19];
});

As you can see, I created an instance which works as a WordPress plugin, added a folder, and set up a few blocks inside of it. The second plugin you see is called "Penguin Blocks" and has two types of blocks. You need a block.json for each one you're creating, and then can create index & stylesheets for the visual aspect of the block

You can set the schema, all the default information, and then start creating your block. Things can get quite complicated and messy if you aren't careful though.

They have incredible documentation that will walk you through everything though, so you don't have to worry. You can use conditional logic, disable, populate, and filter block attributes at ease.

I absolutely love the live preview feature too. You could spend the first half of your time creating a functioning block, then go ahead & create all the styles for it. Everything is formatted very beautifully (I didn't realize that was a word until I typed it). It's built on top of the code editor that powers VS Code:

The complete list of editor features include:

• A file browser for navigation
• The ability to effortlessly switch between your Blockstudio library and a browser-like file system
• A live preview feature that instantly reflects file changes
• A console that identifies PHP errors and prevents accidental saving
• Automatic Prettier formatting for CSS and JavaScript files
• Enhanced autocompletion incorporating available PHP functions from the current WordPress environment
• Preview breakpoints enabling quick assessment across various screen sizes
• The option to import NPM modules with automatic file downloads and imports rewriting
• Over 30 diverse code editor themes to personalize the coding experience.

In terms of composing all types of blocks, you can really do anything. Blockstudio offers a range of native features that enable effortless block composition with the full power of WordPress capabilities.

Composition Features:

1. Compose blocks effortlessly using WordPress capabilities.
2. Utilize nestable InnerBlocks sections for complex layouts and extensible blocks.
3. Implement RichText rendering for editable input and static HTML output.
4. Pass data between parent and child blocks using Context.
5. Define root element for blocks with useBlockProps to maintain consistent markup.
6. Conditionally render content based on the environment (editor, block preview, frontend).
7. Leverage render functions to display blocks outside the editor.

Final Thoughts

As a WordPress developer aiming to customize and extend the functionality of your site, the quest for tailored blocks and specialized elements can be such a damn headache.

BlockStudio is the solution for an all-inclusive solution to crafting custom Gutenberg blocks and seamlessly integrating them within WordPress. I'd highly recommend it and will probably never stop using it for as long as I own a WordPress website.

The tool's inherent ease of use eliminates setup hurdles, allowing developers to dive straight into building distinctive blocks with a very user-friendly interface, all while operating directly within the WordPress environment.

Blockstudio's impact can extend into a mind-blowing amount of block ideas. Imagine enhancing online courses with interactive tutorial blocks. Instead of linearly presenting information, these blocks could provide real-time difficulty ratings, time estimations, and prerequisites, helping learners gauge the content's complexity and suitability. Endless stuff.