Gutenberg — уже довольно долго используется в WordPress в качестве основного текстового редактора. Я, наверное, как и большинство разработчиков не особо горел желанием его использовать. Тем более, что в качестве альтернативы можно было загрузить плагин Classic Editor и дальше пользоваться старым редактором. Но, по мере использования Gutenberg, я увидел большое количество его преимуществ и таким образом плавно остановился на нем. Об одном из таких преимуществ мы сегодня и поговорим.
Acf блок в Gutenberg
Одно из интересных преимуществ Gutenberg — это возможность создавать свои собственные блоки. Однако, проблема заключается в том, что это не тривиальный процесс. Он требует определенный уровень опыта для разработчика. Acf плагин в свою очередь упрощает данную процедуру. Функционал доступен с версии ACF version 5.8.0 и состоит он из трех шагов:
1) Регистрация блока
Для этого мы в файле functions.php используем функцию acf_register_block($args). В качестве аргументов используем массив с набором настроек. Подробный список параметров можно посмотреть здесь. В параметре render_callback указываем название функции, которая будет отображать блок на странице. Далее оборачиваем данный код в callback функцию и используем ее в хуке ‘acf/init’. В моем случае итоговый код будет выглядеть вот так:
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) Создаем Field Group
Заходим в админпанель и создаем новую группу полей:
В созданной группе можно использовать любые виды полей. В моем случае это Repeater, где мы можем добавлять пункты с описанием и иконкой.
Чтобы данная группа полей была отображена в опциях Gutenberg, необходимо в блоке Settigs во вкладке Location Rules в первом select выбрать опцию Block, а в третьем select — зарегистрированный в functions.php название зарегистрированного блока:
3) Отображение блока
Когда мы ранее регистрировали блок, в параметре render_callback, мы указали такое название функции: acf_blocks_render_callback. Настало время ею воспользоваться. Текущая функция имеет имеет переменную $block. С её помощью мы зададим название шаблона и укажем место его расположения.
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") );
}
}
А это будет содержимое файла content-list-with-icons.php:
<?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>
Наш блок готов. Осталось воспользоваться им в текстовом редакторе.
Использование блока
На редактируемой странице открываем sidebar в левом верхнем углу. В этом списке мы уже можем увидеть созданный нами блок.
Перетаскиваем его в контентную область, кликаем на него и нажимаем на иконку редактирования, после чего нам будут доступны acf поля для редактирования:
