Автор: Stasyuk Eugene 75 Метки: , , 27.12.2023

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 поля для редактирования:

Другие статьи

Как импортировать большую базу данных MySQL в OpenServer

Как импортировать большую базу данных MySQL в OpenServer

Как импортировать большую базу данных MySQL в OpenServer

Пожалуй все привыкли импортировать базу данных с помощью phpMyAdmin. Но данная платформа имеет ограничение по весу файла, который можно загрузить. Поэтому если дамп базы превышает данную квоту, через phpMyAdmin сделать это не получиться. Сегодня я покажу альтернативный способ загрузки базы данных — через консоль. В OpenServer можно воспользоваться встроенной консолью (но это не обязательно, можно […]

Диапазон дат в WP_Query — вывод постов по meta_query wordpress

Диапазон дат в WP_Query — вывод постов по meta_query

Диапазон дат в WP_Query — вывод постов по meta_query

Класс WP_Query — это один из инструментов WordPress который помогает вывести посты по необходимым параметрам: категории, сортировка, диапазон дат и т.д. Список параметров довольно приличный. Подробнее с ними в документации можно ознакомиться здесь: https://developer.wordpress.org/reference/classes/wp_query/ . Некоторые параметры довольно обширные и иногда куда проще разобраться в них, когда есть готовые примеры. И у меня как раз […]