Using Timber / Twig in Carbon Fields blocks

[jasalt]

I have been shying away from getting too much into the block editor and found Timber theme framework awesome in recent projects, enjoying more similar development experience as Django, Rails etc. where re-using template parts is possible with very little overhead.

However, I needed to wrap things from my template into Gutenberg blocks for an content editor to use in the CMS side. With little testing it seems that it's simply a matter of requiring Timber (composer require timber/timber) and calling Timber::render('crb-timber-block.twig', $context); in the CF set_render_callback function.

Simple example based on Carbon Fields block tutorial with layout defined in separate .twig template file:

crb-timber-block.php

<?php
/**
 * Plugin Name: Timber Carbon Fields Block
 * Description: Experimental
 * Version: 1.0
 */

use Carbon_Fields\Block;
use Carbon_Fields\Field;
use Timber\Timber;

add_action( 'carbon_fields_register_fields', 'crb_attach_theme_options' );
function crb_attach_theme_options() {
	Block::make( __( 'GlideJS Block' ) )
	->add_fields( array(
		Field::make( 'text', 'heading', __( 'Block Heading' ) ),
		Field::make( 'image', 'image', __( 'Block Image' ) ),
		Field::make( 'rich_text', 'content', __( 'Block Content' ) ),
	) )
		->set_render_callback( function ( $fields, $attributes, $inner_blocks ) {
			$context = Timber::context();
			$context['fields'] = $fields;
			$context['attributes'] = $attributes;

			echo Timber::render('crb-timber-block.twig', $context);
	} );
}

add_action( 'after_setup_theme', 'crb_load' );
function crb_load() {
    require_once( 'vendor/autoload.php' );
    \Carbon_Fields\Carbon_Fields::boot();
}

crb-timber-block.twig

{# HTML outputted by the plugin with context variables passed in $context object 
  at Timber::render('crb-timber-block.twig', $context); #}

<div class="block">

  <!-- <pre> {{  dump(fields) }} </pre> -->

  <div class="block__heading">
  	<h1>{{ fields.heading }}</h1>
  </div>

  <!-- Field data includes image ID which is little bit cumbersome to convert
       into source url with raw PHP. Might be useful to prepare it as string or
       Timber\Image object beforehand. -->

  <div class="block__image">
    <img src="{{ function("wp_get_attachment_image_src", fields.image, 'full' ) | first }}">
  </div>

  <div class="block__content">
    <p>{{ fields.content }}</p>
  </div>

</div>