Author: Stasyuk Eugene 54 Tags: , , 27.12.2023

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:

Other articles

Page content navigation

Page content navigation

Page content navigation

What’s this? On some sites, you can periodically find something like this: This thing works like this: Each content item is an article heading h2, h3, h4… By clicking on any of these items, we move with the help of an anchor link to the area of the page we need. Also, when we scroll […]

Position sticky doesn’t work position: sticky

Position sticky doesn’t work

Position sticky doesn’t work

Position sticky doesn’t work – to my surprise this is a fairly common request that I myself have encountered in my time. Sticky is a pretty simple and versatile solution for placing sticky blocks on a page. At the very least, it doesn’t require you to do a decent amount of javascript code, which did […]