Gutenberg – has been used in WordPress as the main text editor for quite some time now. I, probably like most developers, wasn’t too keen on using it. Especially since you could download the Classic Editor plugin as an alternative and continue to use the old editor. But, as I used Gutenberg, I saw a lot of its advantages and thus smoothly settled on it. We will talk about one of those advantages today.
Acf block in Gutenberg
One of the interesting advantages of Gutenberg is the ability to create your own blocks. However, the problem is that this is not a trivial process. It requires a certain level of experience for the developer. Acf plugin in turn simplifies this procedure. The functionality is available from ACF version 5.8.0 and consists of three steps:
1) Block registration
Для этого мы в файле functions.php используем функцию acf_register_block($args). В качестве аргументов используем массив с набором настроек. Подробный список параметров можно посмотреть здесь. В параметре render_callback указываем название функции, которая будет отображать блок на странице. Далее оборачиваем данный код в callback функцию и используем ее в хуке ‘acf/init’. В моем случае итоговый код будет выглядеть вот так:
To do this, we use the function acf_register_block($args) in the functions.php file. As arguments we use an array with a set of settings. You can see the detailed list of parameters here. In the render_callback parameter we specify the name of the function that will display the block on the page. Then we wrap this code into a callback function and use it in the ‘acf/init’ hook. In my case, the final code will look like this:
add_action('acf/init', 'acf_gutenberg_blocks_init');
function acf_gutenberg_blocks_init() {
// check function exists
if( function_exists('acf_register_block') ) {
acf_register_block(array(
'name' => 'list-with-icons',
'title' => 'List with icons',
'render_callback' => 'acf_blocks_render_callback',
'category' => 'formatting',
'icon' => 'editor-ul',
));
}
}2) Create Field Group
Go to the admin panel and create a new field group:
In the created group we can use any kind of fields. In my case it is Repeater, where we can add items with description and icon.
In order for this group of fields to be displayed in the Gutenberg options, you need to select the Block option in the Settigs block in the Location Rules tab in the first select, and the name of the registered block registered in functions.php in the third select:
3) Block display
When we registered the block earlier, in the render_callback parameter, we specified this function name: acf_blocks_render_callback. Now it is time to use it. The current function has a variable $block. With its help we will set the name of the template and specify its location.
function acf_blocks_render_callback $block ) {
$slug = str_replace('acf/', '', $block['name']);
if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
}
}
And this will be the contents of the content-list-with-icons.php file:
<?php
/**
* Block Name: List with icons
*/
$list = get_field('editor__list_with_icons');
if(empty($list)) return; ?>
<ul class="list-with-icon">
<?php
foreach ($list as $item): ?>
<li>
<?php
if(!empty($item['icon'])) echo '<span>' . wp_get_attachment_image($item['icon']) . '</span>';
if(!empty($item['text'])) echo '<span>' . $item['text'] . '</span>';
?>
</li>
<?php
endforeach; ?>
</ul>
Our block is ready. All that remains is to use it in a text editor.
Using the block
On the edited page, open the sidebar in the upper left corner. In this list we can already see the block we created.
Drag it to the content area, click on it and click on the edit icon, then we will have acf fields available for editing:
