Создание блоков для Gutenberg с помощью ACF — Сайт под ключ

Внедрение ACF в редактор Gutenberg

Внедрение ACF в редактор Gutenberg

Привет! В этом материале речь пойдет о том, как создать блоки для редактора Gutenberg с помощью плагина группы полей Advanced Custom Fields.

Мы рассмотрим весь процесс «от» и «до». На примере выполнения реальной задачи. Мы настоятельно рекомендуем собирать страницы ваших сайтов именно таким способом, особенно если вы не хотите лишний раз нагружать свой хостинг.

Как мы выводили поля ACF раньше

Прежде мы использовали ACF и выводили поля во фронтенде редактора страниц. Выглядело это примерно так:

Именно так мы прежде выводили абсолютно весь контент страницы. А стандартный редактор блоков Gutenberg использовали или для вывода текста-простыни в самом конце, или не использовали вовсе.

Как мы выводим поля ACF сейчас

Сегодня же мы стараемся собирать сайты таким образом, чтобы все содержимое страниц редактировалось исключительно с помощью стандартного редактора блоков. Такой способ нагружает систему гораздо меньше, что не может не радовать.

На странице редактирования это может выглядеть примерно так:

Мы создали поле-повторитель, в котором еще 2 поля. Первое для названия вкладки каталога. А второе для содержимого этого самого каталога. Стандартные табы bootstrap, ничего особенного. На самом сайте это выглядит так:

Наш давний клиент пожелал, чтобы мы создали ему новый сайт. На посадочных страницах услуг должна быть таблица-каталог. Но проблема этих таблиц в том, что они достаточно большие, а наименования продукции можно было бы структурировать.

Саму верстку таблиц с позициями каталога мы решили выводить через Шорткоды. А за функционал вкладок и вывод блока отвечает наш плагин и ACF.

Как вывести поля ACF через Gutenberg

Во-первых, вам понадобится PRO-версия плагина Advanced Custom Fields. Скачать бесплатно ACF PRO можно на нашем сайте.

Во-вторых, вам необходимо зарегистрировать кастомные блоки для редактора. Делается это с помощью PHP. Лично мне для этого удобнее всего создать отдельный плагин и работать с PHP уже в нем.

В-третьих, необходимо поработать уже в самом ACF. Мы создадим группу полей и в правилах укажем, что эти поля не для страниц, а для блоков.

Как зарегистрировать блоки ACF

Для начала вам необходимо создать плагин. Переходим в папку plugins на FTP своего сайта. И создаем там папку с любым названием. В новой папке создаете php-файл с тем же названием. Например, я создал папку с названием “acf-gut-blocks-zeeoff” и в ней файл “acf-gut-blocks-zeeoff.php”.

Далее в папке “acf-gut-blocks-zeeoff” создаем папку “assets”. В ней мы в будущем будем хранить наши блоки. 

Также можно создать папки “css” и “js”, чтобы можно было грузить стили и скрипты для корректного отображения ваших блок на странице редактора. Но это совсем необязательно.

Внутри папки “assets” я создал папку “blocks”. И уже в папке “blocks” мы размещаем наши блоки.

Внутри папки “blocks” создаем папку с названием нашего первого блока. У меня он называется “price-table-block”. И внутри новой папки создаем файл “price-table-block.php”.

Структура папок нашего плагина создана. Теперь можно приступить к регистрации блоков.

Возвращаемся к файлу “acf-gut-blocks-zeeoff.php”. Вставляем туда следующий скрипт:

<?php

/**
 * Plugin Name: ACF+GUT Blocks by Alexey Blagorodov
 * Description: Блоки ACF+GUT
 * Author URI:  https://sajt-pod-klyuch.ru/
 * Author:      Алексей Благородов
 * Version:     1.0
 *
 * Requires at least: 2.5
 * Requires PHP: 5.4
 *
 * License:     GPL2
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * Network:     Укажите "true" для возможности активировать плагин для сети Multisite.
 * Update URI: https://example.com/link_to_update
 */

// Регистрация Блока
function sajt_pod_klyuch_register_blocks() {
	// Проверяем, что функция доступна.
	if( ! function_exists( 'acf_register_block_type' ) ) {
		return;
	}

	// Регистрация блока 1 - Цены
	acf_register_block_type(array(
		'name'              => 'Price_Table',
		'title'             => __('Price Table'),
		'description'       => __('A price table block'),
		'render_template'   => plugin_dir_path( __FILE__ ) . 'assets/blocks/price-table-block/price-table-block.php',
		'category'          => 'formatting'
	));
	

}
add_action( 'acf/init', 'sajt_pod_klyuch_register_blocks' );

Создание группы полей для блока ACF

Отлично. Мы зарегистрировали новый блок. Теперь нам необходимо создать для него группу полей. Должно получиться следующее:

И не забываем про настройку условий отображения. Выбираем из выпадающего списка «Блок» и название блока, который вы создали.

Верстка блока ACF и его вывод

Мы зарегистрировали новый блок и создали для него группу полей. Осталось еще немного. Нужно сверстать сам блок и вывести поля.

Мы создавали папку «price-table-block» и файл «price-table-block.php». Открываем этот файл и вставляем следующее:

<?php
 
/**
 * Read More Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */
 
// Create id attribute allowing for custom "anchor" value.
$id = 'Price-table-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}
 
// Create class attribute allowing for custom "className" and "align" values.
$className = 'Price-table';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}



?>

<div class="price-table-block" id="<?php echo $id; ?>">
	
	<?php if( have_rows('tabliczy_czen') ): $idgalery = 0; ?>
	<ul class="nav nav-tabs" id="myTab" role="tablist">
		<?php while( have_rows('tabliczy_czen') ) : the_row(); $idgalery++; ?>
		<li class="nav-item" role="presentation">
			<a class="nav-link price-table-label-<?php echo $idgalery; if ($idgalery == 1): echo ' active'; endif; ?>" id="home-tab" data-toggle="tab" href="#price-table-<?php echo $idgalery; ?>-<?php echo $id; ?>" role="tab" aria-controls="home" aria-selected="true">
				<?php the_sub_field('imya_vkladki'); ?>
			</a>
		</li>
		<?php endwhile; ?>
	</ul>
	<?php endif; ?>
	
	<?php if( have_rows('tabliczy_czen') ): $idgalery = 0; ?>
	<div class="tab-content" id="myTabContent">
		<?php while( have_rows('tabliczy_czen') ) : the_row(); $idgalery++; ?>
		<div class="tab-pane fade price-table-content-<?php echo $idgalery; if ($idgalery == 1): echo ' active show'; endif; ?>" id="price-table-<?php echo $idgalery; ?>-<?php echo $id; ?>" role="tabpanel" aria-labelledby="contact-tab">
			<?php the_sub_field('kontent_vkladki'); ?>
		</div>
		<?php endwhile; ?>
	</div>
	<?php endif; ?>
</div>

Что примечательно, на страницу можно добавить несколько таких блоков, а благодаря их уникальным ID вкладки первого блока не будут переключать содержимое второго блока.

Как добавить еще блоков?

Просто повторяйте описанные в статье действия от начала и до конца. Если вы хотите добавить еще 1 блок, переходим к файлу «acf-gut-blocks-zeeoff.php» и дублируем эту конструкцию:

// Регистрация блока - Цены
	acf_register_block_type(array(
		'name'              => 'Price_Table',
		'title'             => __('Price Table'),
		'description'       => __('A price table block'),
		'render_template'   => plugin_dir_path( __FILE__ ) . 'assets/blocks/price-table-block/price-table-block.php',
		'category'          => 'formatting'
	));

Понятное дело, нужно переименовать блок, создать для него новую папку в «blocks», а также группу полей в самом ACF.

Если вам помогла эта статья или появились вопросы, то оставляйте комментарии. На каждый с удовольствием отвечу!

Поддержать нашу команду:
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Привет! Интересно читать нас? Уделите пару минут своего времени, узнайте больше о нашей команде!

Получить подарок!