engcode / timber-acf-wp-blocks

Create Gutenberg blocks from Twig templates and ACF fields.

Timber ACF WP 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.

Complete documentation

Read the complete documentation

Contributors

This plugin is build with help of contributors:

• roylodder
• BrentWMiller
• Marcin Krzemiński
• Kuba Mikita
• LandWire
• Viktor Szépe

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: Testimonial
  Description: Customer testimonial
  Category: formatting
  Icon: admin-comments
  Keywords: testimonial quote "customer testimonial"
  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>

Timber 2.0

Timber ACF WP Blocks is fully compatible with both Timber 1.x and Timber 2.x versions.