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.

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 or Twig (using Timber ) or both for templating.

Under the hood

Native Blocks: register_block_type

ACF Blocks: acf_register_block_type

MB Blocks: rwmb_meta_boxes

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.

On top of that, creating a unified way to declare blocks can help with the transition to and between different block frameworks. Blockstudio 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 Blockstudio, 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 Blockstudio 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.