Skip to content
Create Gutenberg blocks from Twig templates and ACF fields.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig CS fixing Jun 4, 2019
.gitignore fixes Jun 1, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jun 9, 2019
LICENSE Create LICENSE Jun 9, 2019
composer.json CS fixing Jun 4, 2019
composer.lock CS fixing Jun 4, 2019
phpcs.xml CS fixing Jun 4, 2019
readme.md Added new features Jun 9, 2019
timber-acf-wp-blocks.php Added new features Jun 9, 2019

readme.md

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"

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

You can’t perform that action at this time.