Timber ACF Gutenberg Blocks

Generate ACF Gutenberg blocks just by adding templates to your Timber theme. This package is based heavily on this article by nicoprat and the plugin by MWDelaney.

Installation

Run the following in your Timber-based theme directory:

composer require "palmiak/timber-acf-wp-blocks"

Contributors

This plugin is build with help of contributors: roylodder

Creating blocks

Add twig templates to views/blocks which get and use ACF data. Each template requires a comment block with some data in it:

{#
  Title:
  Description:
  Category:
  Icon:
  Keywords:
  Mode:
  Align:
  PostTypes:
  SupportsAlign:
  SupportsMode:
  SupportsMultiple:
  SupportsAnchor:
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
#}

Example block template

{#
  Title: Testimonial
  Description: Customer testimonial
  Category: formatting
  Icon: admin-comments
  Keywords: testimonial quote
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: false
#}

<blockquote data-{{ block.id }}>
    <p>{{ fields.testimonial }}</p>
    <cite>
      <span>{{ fields.author }}</span>
    </cite>
</blockquote>

<style type="text/css">
  [data-{{ block.id }}] {
    background: {{ fields.background_color }};
    color: {{ fields.text_color }};
  }
</style>

Creating ACF fields

Once a block is created you'll be able to assign ACF fields to it using the standard Custom Fields interface in WordPress.

Read more about this

• Easiest way for Gutenberg Blocks with Timber and ACF Blocks
• Prostszy sposób na Gutenberga przy użyciu ACF Blocks