Ever since the release of WordPress 5.9, there has been a major uproar among the development community about the future of the underlying techstack of our much-beloved CMS. As per Codex.wordpress.com, making a new custom developer-defined block in the now integrated Gutenberg editor requires going beyond PHP and delving into JavaScript, Node.js, and a bit of PHP here and there. While this is a good step in terms of futureproofing, dealing with the accompanied “change management” needed for re-orienting a largebase of PHP developers has so far not been handled well by the authors of WordPress.

Anyway, unlike WordPress Classic where developers could create custom templates and themes,the Gutenberg editor allows for the creation of custom blocks but requires an excessive JavaScript intervention. Thelooming question for the classic WordPress developers here is, is there a way to write custom Gutenberg blocks in PHP? Enter, ACF (Advanced Custom Fields).The good old ACF plugin leaps over the inherent custom fields shipped in WordPress by default, by adding widget-like input interfaces in the respective WordPress edit screens.

Apart from providing user-friendly editor widgets, ACF offers a premium feature called ACF Blocks which enables PHP developers to write custom blocks without any JavaScript. As per the official documentation on the ACF website, “ ACF blocks is a PHP framework and does not require any JavaScript. This differentiates itself from the WordPress block API which relies heavily on modern JavaScript techniques, syntax, and build-tools.”[i] This is great news for PHP developers.

Now let’s look at how this can be executed:

Register a block type similar to registering a post-type in thefunctions.php file using the function acf_register_block_type() which accepts an array of parameters. Look at the code snippet of a custom testimonial block(example)below:

Create a field group as shown in the screenshot below and after that make sure to change the location rules by changing the “Block” rule to the newly registered block type.

Define how ACF will render the custom block by creating a WordPress PHP templateas shown in the code snippet below that uses the ACF API functions to define the render by calling the respective fields from the field group created in the previous step. This can be accomplished by creating a template file within the current theme that matches the render_template setting used when registering the block. In this example, the template file will be called ‘template-parts/blocks/testimonial/testimonial.php’.

After these 3 steps are successfully carried out, developers can directly start using the just createdcustom “testimonial” block from the Gutenberg editor and position it anywhere within their content as required.

Points to Remember (as mentioned by the official ACF documentation):

• Blocks can be static or dynamic. ACF Blocks are dynamic, meaning they are rendered server-side and allow for PHP logic.
• ACF Blocks are registered and customized within the functions.php file using PHP and do not require any knowledge of React or the WP blocks JavaScript API.
• ACF blocks differ from WP blocks in that the data is decoupled from the design. This allows for faster development of blocks by focusing only on the HTML output.
• Block data is saved within the “post_content” as an HTML comment. This makes them unique to metaboxes which save data to the “postmeta” table.