Создание блока Gutenberg c помощью ACF в WordPress

Новый блочный редактор Gutenberg в WordPress обеспечивает удобное создание и редактирование контента, и он еще более эффективен в комплексе с пользовательскими блоками.

Основные блоки Gutenberg построены с использованием React и JavaScript. Также можно создать свои собственные блоки Gutenberg с помощью JavaScript . Если вы планируете публиковать свой блок публично как плагин, рекомендуем создавать его с помощью JavaScript, чтобы он не зависел от других библиотек.

При создании единичного сайта с большим количеством уникальных блоков наиболее эффективно будет использовать специальный плагин для создания блоков, например Advanced Custom Fields. Вы можете создавать свои блоки намного быстрее, используя инструмент, который вы, скорее всего, уже и так используете. Это особенно полезно, если вы являетесь разработчиком PHP с небольшим опытом работы с JavaScript. ACF позволяет создавать все, используя PHP.

Что такое Advanced Custom Fields

Advanced Custom Fields — это плагин для создания дополнительных полей для редактирования контента в WordPress. С его помощью можно создавать свои метабоксы, настройки сайта, поля профиля для пользователей и другие элементы метаданных.

ACF является первым популярным плагином с метабоксами, который поддерживает создание кастомных блоков Gutenberg в WordPress. Другие плагины также умеют создавать блоки: например CMB2 и Carbon Fields.

Создание блока Gutenberg с ACF

Три основных этапа создания блока Gutenberg с плагином ACF:

1. Зарегистрировать блок с помощью PHP
2. Создать блочный редактор через интерфейс ACF
3. Описать способ отображения блока с помощью PHP

Создадим пошагово простой блок «Член команды». В этом примере сохраним разметку блока и стили внутри темы, для упрощения, но вы также можете поместить код в отдельный плагин.

Регистрация блока Gutenberg с помощью PHP

Для регистрации пользовательского блока мы будем использовать функцию acf_register_block(). Сделаем краткое описание приведенных ниже параметров, дополнительную информацию см. в документации ACF .

<?php
/**
 * Register Blocks
 * @see https://www.billerickson.net/building-gutenberg-block-acf/#register-block
 *
 */
function be_register_blocks() {
	if( ! function_exists('acf_register_block') )
		return;
	acf_register_block( array(
		'name'			=> 'team-member',
		'title'			=> __( 'Team Member', 'clientname' ),
		'render_template'	=> 'partials/block-team-member.php',
		'category'		=> 'formatting',
		'icon'			=> 'admin-users',
		'mode'			=> 'preview',
		'keywords'		=> array( 'profile', 'user', 'author' )
	));
}
add_action('acf/init', 'be_register_blocks' );

Name

Уникальное имя для блока. ACF автоматически создает неймспейсы, поэтому имя team-member становится acf/team-memberв базе данных.

Title

Это название будет отображаться в редакторе блоков Gutenberg.

Render Template

Файл шаблона, используемый для рендеринга блока. Тот же файл шаблона будет использоваться во фронтенде и в предварительном просмотре в паенли администратора. Это может быть либо относительный URL-адрес из текущей темы, как показано выше, либо полный путь к любому файлу.

В качестве альтернативы можно использовать параметр render_callback  для указания имени функции, которая выводит HTML- код блока.

Category

Определяет, в какой секции окна «Добавить блок» появится наш блок. Параметры, предоставляемые ядром WP:
common, formatting, layout, widgets, и embed.

Icon

Укажите иконку из dashicons icon или свою иконку.

Mode

Позволяет контролировать, как блок будет представлен редактором Gutenberg. Если установлено значение
“Preview” , он будет отображаться так же, как на фронтенде, и вы можете редактировать контент из боковой панели.

Если установлено значение “Edit”, он отобразится как метабокс в области содержимого . Пользователь может переключить режим, нажав кнопку в правом верхнем углу, если вы специально не отключите ее с помощью'supports' => array( 'mode' => false ).

Ключевые слова

До трех дополнительных элементов когда для более эффективного поиска блока. Имя блока индексируется всегда, поэтому его не нужно повторять как ключевое слово.

Создание блочного редактора с помощью интерфейса ACF

После регистрации блока вы можете перейти в Custom Fields в админпанели и создать редактор блоков. Он работает так же, как стандартный метабокс, встроенный в ACF.

Под правилами размещения выберите «Блок» is equal to «Член команды».

Создание разметки блока

Последний шаг — написать разметку для блока. Создадим шаблон /partials/block-team-member.php , соответствующий параметру  render_template, указанному при регистрации блока. Шаблон выглядит так:

<?php
/**
 * Team Member block
 *
 * @package      ClientName
 * @author       Bill Erickson
 * @since        1.0.0
 * @license      GPL-2.0+
**/
$name = get_field( 'name' );
$title = get_field( 'title' );
$photo = get_field( 'photo' );
$description = get_field( 'description' );
echo '<div class="team-member">';
	echo '<div class="team-member--header">';
		if( !empty( $photo ) )
			echo wp_get_attachment_image( $photo['ID'], 'thumbnail', null, array( 'class' => 'team-member--avatar' ) );
		if( !empty( $name ) )
			echo '<h4>' . esc_html( $name ) . '</h4>';
		if( !empty( $title ) )
			echo '<h6 class="alt">' . esc_html( $title ) . '</h6>';
	echo '</div>';
	echo '<div class="team-member--content">' . apply_filters( 'ea_the_content', $description ) . '</div>';
echo '</div>';

Для доступа к полям, заданным в настройках блока используйте функцию get_field(). Затем уже можно создавать разметку для блока, основываясь на конкретном дизайне.

Создание блока «Содержание страницы»

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

Начнем с форка плагина WP Anchor Header . Внесем в него такие изменения:

• Ограничим создание заголовков только для тега h2
• Выполняется только на записях, содержащих блок «Содержание страницы».
• Прежде чем автоматически добавлять идентификатор к каждому заголовку, проверим существует ли он уже. Клиенты могут вручную указать привязку заголовка в редакторе Gutenberg, и мы должны это предвидеть.
• Функция ea_table_of_contents() принимает параметр $count. Используем его для перечисления нескольких первых заголовков в статье на главной странице. Например:

Этот блок не должен содержать редактируемых полей, поэтому добавим поле «Сообщение» с описанием работы блока:

Полный код для для блока «Содержание страницы» можно найти здесь.

Оригинал статьи