Introduction

With version 5.0, WordPress introduced a new post editing experience called Gutenberg . Instead of a rich text writing flow, the new editor prioritizes blocks to design and create content.

Creating custom blocks is not a trivial task, as Javascript is now needed on all steps to do so. As of now, there is no native way to create custom blocks using PHP, the programming language that WordPress is built on.

Advanced Custom Fields (ACF), WordPress' most popular custom field solution, launched their own wrapper to create custom blocks using PHP with version 5.8. Here at Fabrikat , we were so blown away by the possibilities of this solution that we decided to build an internal framework that makes composing ACF blocks easier and quicker. The result is Blockstudio. (BS)

What has initially started as a pure ACF PHP solution, is now completely agnostic. This means that you can choose between using ACF or Metabox (MB) Blocks as your field framework and use PHP and Twig (using Timber ) for templating.

Under the hood

BS is using the acf_register_block_type function for all ACF blocks and the rwmb_meta_boxes filter for all MB blocks.

Motivation

Components have made a big impact on the way sites and apps are built in the current day, with frameworks like React , Vue and Angular revolutionising a jQuery past.

While the bare functionality of BS is not forcing any of those methodologies on it's users, the accompanying starter blocks are trying to find a middle ground between the old and the new and are thus making use of two libraries: Tailwind and Alpine .

The combination of the two brings the benefits of the tools mentioned above to any DOM and is thus perfect for a new WordPress world consisting of blocks.

On top of that, creating a unified way to declare blocks can help with the transition to and between different block frameworks. BS templates are structured in a way, that allow you to use the same templates and syntax for either ACF or MB blocks.

Why PHP blocks

You might wonder at this stage, why bother with Advanced Custom Fields or Metabox for block creation when you could just use WordPress core? While we have been toying with React based blocks for a bit, constructing new elements with ACF or MB has one big advantage over the "WordPress way":

Dynamic blocks don't need to duplicate the rendering logic in Javascript and PHP for each block. This is huge, especially when the list of blocks is constantly growing. There is a healthy discussion on this topic in the Gutenberg GitHub if you want to learn more about the issue.

Since the single file component approach is so central to BS, using ACF or MB blocks is the best option out there right now. Of course, we will keep our ears open to new developments and extend BS to use new APIs where we see fit!

Acknowledgements

The blocks creation process is heavily inspired by the work of Maciej Palmowski and his Timber WP blocks plugin.