DEV Community

Cover image for Easiest way for Gutenberg Blocks with Timber and ACF Blocks
Maciej Palmowski
Maciej Palmowski

Posted on

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:
Alt Text

Let’s use it

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

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.

Discussion (0)