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 поля для редагування:
