Автор: Stasyuk Eugene 47 Мітки: , , 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 поля для редагування:

Інші статті

Якірні посилання та фіксований header

Якірні посилання та фіксований header

Якірні посилання та фіксований header

Останнім часом я вже давно не зустрічав сайтів, які мають статичний header. Практично всі фіксують його вгорі вікна. Щонайменше дуже зручно, коли навігація сайтом завжди знаходиться під рукою. Але є один момент, який може спричинити дискомфорт за такого підходу – це якірні посилання. Зазвичай під час кліка на таке посилання, секція із зазначеним Id опиняється […]

Як перекласти тему WordPress іншою мовою перевод

Як перекласти тему WordPress іншою мовою

Як перекласти тему WordPress іншою мовою

Працюючи над створенням теми на WordPress, ми досить часто стикаємося з такими написами як “завантажити ще, автор, мітки” і т.д. Наприклад, як у моєму блозі: Добре, коли сайт однією мовою. Тоді з ними робити нічого і не потрібно. Але що робити, коли сайт мультимовний. Якщо замовнику в переспективі немає потреби у майбутньому змінювати їх назви, […]