<commit_before>---
title: "Gutenberg"
menu:
  main:
    parent: "guides"
---
## Using Gutenberg with Timber

Timber works with Gutenberg out of the box. If you use `{{ post.content }}`, Timber will render all the Gutenberg blocks.

## ACF Blocks
### What are the ACF Blocks
ACF Blocks are the alternative way to create content blocks without advanced JavaScript knowledge. If you want to learn more about them read the article on [advancedcustomfields.com](https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/).

### How to use ACF Blocks with Timber
Before you can start using ACF Blocks, you must install the Advanced Custom Fields 5.8.0-beta or later.

To create your content block, first you have to register it in `functions.php` or in a seperate plugin:
```php
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
	
	// check function exists
	if( function_exists('acf_register_block') ) {
		
		// register a new block
		acf_register_block(array(
			'name'				=> 'example_block',
			'title'				=> __('Example Block'),
			'description'		=> __('A custom example block.'),
			'render_callback'	=> 'my_acf_block_render_callback',
			'category'			=> 'formatting',
			'icon'				=> 'admin-comments',
			'keywords'		    => array( 'example' ),
		));
	}
}
```

next you you have to create a `render_callback`:
```php
function my_acf_block_render_callback( $block ) {
    // store block values
    $vars['block'] = $block;

    // store field values
    $vars['fields'] = get_fields(); 

    // render the block
    Timber::render( '/template-parts/block/example-block.twig', $vars );
}

```
you create an extra array called `$vars` with two values:
- **block** - with all data like block title, alignment etc
- **fields** - all custom fields - also all the fields created in **ACF**

finally you can create the template `template-parts/block/example-block.twig`:
```twig
{#
/**
 * Block Name: Example block
 *
 * This is the template that displays the example block.
 */
#}
<div id="example-{{ block.id }}" class="wrapper">
    <h1>{{ fields.title }}</h1>
    <p>{{ fields.description }}</p>
</div>
<style type="text/css">
	#testimonial-{{ block.id }} {
		background: {{ fields.background_color }};
		color: {{ fields.text_color }};
	}
</style>

```

### Using repeaters
```
{% for field in fields.repeater %}
    Title: {{ field.title }} <br/>
    Url: {{ field.url }}
{% endfor %}
```

### Using groups
```
Title: {{ fields.group.title }} <br/>
Url: {{ fields.group.url }}
```
<commit_msg>Update docs/guides/gutenberg.md<commit_after>---
title: "Gutenberg"
menu:
  main:
    parent: "guides"
---
## Using Gutenberg with Timber

Timber works with Gutenberg out of the box. If you use `{{ post.content }}`, Timber will render all the Gutenberg blocks.

## ACF Blocks

### What are the ACF Blocks
ACF Blocks are the alternative way to create content blocks without advanced JavaScript knowledge. If you want to learn more about them read the article on [advancedcustomfields.com](https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/).

### How to use ACF Blocks with Timber
Before you can start using ACF Blocks, you must install the Advanced Custom Fields 5.8.0-beta or later.

To create your content block, first you have to register it in `functions.php` or in a seperate plugin:
```php
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
	
	// check function exists
	if( function_exists('acf_register_block') ) {
		
		// register a new block
		acf_register_block(array(
			'name'				=> 'example_block',
			'title'				=> __('Example Block'),
			'description'		=> __('A custom example block.'),
			'render_callback'	=> 'my_acf_block_render_callback',
			'category'			=> 'formatting',
			'icon'				=> 'admin-comments',
			'keywords'		    => array( 'example' ),
		));
	}
}
```

next you you have to create a `render_callback`:
```php
function my_acf_block_render_callback( $block ) {
    // store block values
    $vars['block'] = $block;

    // store field values
    $vars['fields'] = get_fields(); 

    // render the block
    Timber::render( '/template-parts/block/example-block.twig', $vars );
}

```
you create an extra array called `$vars` with two values:
- **block** - with all data like block title, alignment etc
- **fields** - all custom fields - also all the fields created in **ACF**

finally you can create the template `template-parts/block/example-block.twig`:
```twig
{#
/**
 * Block Name: Example block
 *
 * This is the template that displays the example block.
 */
#}
<div id="example-{{ block.id }}" class="wrapper">
    <h1>{{ fields.title }}</h1>
    <p>{{ fields.description }}</p>
</div>
<style type="text/css">
	#testimonial-{{ block.id }} {
		background: {{ fields.background_color }};
		color: {{ fields.text_color }};
	}
</style>

```

### Using repeaters
```
{% for field in fields.repeater %}
    Title: {{ field.title }} <br/>
    Url: {{ field.url }}
{% endfor %}
```

### Using groups
```
Title: {{ fields.group.title }} <br/>
Url: {{ fields.group.url }}
```

{'fraction_non_alphanumeric': 0.15482982490655126, 'fraction_numerical': 0.0027542789691127286, 'mean_word_length': 3.7074074074074073, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 37, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1039734', 'n_tokens_mistral': 1759, 'n_tokens_neox': 1639, 'n_words': 517}