Easiest way for Gutenberg Blocks with Timber and ACF Blocks

Some time ago I wrote the official Timber Documentation on ACF Blocks. Now I’ll show you how to do it in a much easier manner.

Preparations

Before we start we need to do three things:

• Install Advanced Custom Fields PRO
• Install Timber ACF WP Blocks library
• Create a views/blocks folder in your theme

The best way to install the mentioned library is of course via Composer.

In case you don’t like the views/blocks folder you can change it by using timber/acf-gutenberg-blocks-templates filter.

Time to create a block

In our views/blocks folder we create a twig file (in this example — owl-link.twig) and on top of it, we add some additional comments. This Comment block is very important because thanks to it the block is registered and the values go to acf_register_block_type.

{#
  Title: Owl link
  Description: Link block
  Category: formatting
  Icon: admin-comments
  Keywords: link links
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: true
#}

<section class="gutenberg-wordpressowka-block">
    <div class="gutenberg-url-block">
        {{ fields.opis }}
        <a href="{{ fields.link.url }}" target="_blank">{{ fields.link.title }}</a>
    </div>
</section>

Of course, we can use all the parameters specified in the official ACF Documentation.

The only thing that missing is setting one thing in ACF itself:

Let’s use it

After registering and connecting our block there is one thing left — let’s write something:

Let’s sum up everything

As you see this is a very short article. Using Timber ACF WP Blocks lets you focus on blocks itself instead of creating boring code :)

If you would like to use this solution for Blade and Sage 9 use this plugin.