Как создать ACF блок для Gutenberg в WordPress: пошаговый гид

Что такое ACF блоки и почему они важны для Gutenberg

Advanced Custom Fields (ACF) открывает возможность добавлять произвольные поля к любому типу контента. С появлением Gutenberg в WordPress разработчики получили мощный визуальный редактор, а ACF‑блоки позволяют соединить гибкость полей с блоковой архитектурой. Такой подход упрощает поддержку, уменьшает количество кастомного JavaScript и делает контент‑модели более читаемыми. В этой статье мы пройдем весь путь: от регистрации блока в PHP до вывода динамических данных и preview в редакторе.

Регистрация пользовательского блока через PHP

Регистрация происходит в хук acf/init. WordPress проверит наличие функции acf_register_block_type и создаст блок, который появится в панели Gutenberg.

Пример кода регистрации

function my_acf_init_block_types() { // проверка функции регистрации блока if( function_exists('acf_register_block_type') ) { acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Отзыв клиента'), 'description' => 'Блок с отзывом, использующий ACF поля.', 'render_template' => plugin_dir_path(__FILE__). 'blocks/testimonial.php', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array('отзыв', 'testimonial'), )); } } add_action('acf/init', 'my_acf_init_block_types'); 

После добавления кода блок «Отзыв клиента» появится в разделе «Форматирование». Если хотите увидеть, как защищать сайт от DDoS, читайте защита WordPress от DDoS: GRE‑туннель Cloudflare в 7 шагах.

Добавление полей ACF к блоку

Полями управляет сама ACF, но их можно объявить программно, чтобы не зависеть от UI. Это удобно для распределения кода по репозиториям.

Настройка полей в PHP

if( function_exists('acf_add_local_field_group') ) { acf_add_local_field_group(array( 'key' => 'group_testimonial', 'title' => 'Отзыв клиента', 'fields' => array( array( 'key' => 'field_author', 'label' => 'Автор', 'name' => 'author', 'type' => 'text', ), array( 'key' => 'field_text', 'label' => 'Текст отзыва', 'name' => 'text', 'type' => 'textarea', ), array( 'key' => 'field_rating', 'label' => 'Рейтинг', 'name' => 'rating', 'type' => 'range', 'min' => 1, 'max' => 5, 'step' => 1, ), ), 'location' => array( array( array( 'param' => 'block', 'operator' => '==', 'value' => 'acf/testimonial', ), ), ), )); } 

Поля «Автор», «Текст отзыва» и «Рейтинг» автоматически появятся в боковой панели Gutenberg, когда пользователь вставит наш блок.

Шаблон рендеринга и вывод динамических данных

Для рендеринга указывается путь к PHP‑файлу в параметре render_template. Внутри шаблона используем функции get_field() и esc_html() для безопасного вывода.

Файл шаблона testimonial.php

<?php $author = get_field('author'); $text = get_field('text'); $rating = get_field('rating');?>

Такой шаблон легко стилизовать через CSS и подключать к любой теме. Если вам нужен быстрый профайлинг, советуем изучить Blackfire WordPress профилирование.

Предпросмотр блока в редакторе

Для удобства редактора задайте example‑данные в массиве регистрации или используйте функцию acf_register_block_type с параметром example. Это позволит видеть заполненный блок еще до ввода контента.

acf_register_block_type(array( //... остальные параметры 'example' => array( 'attributes' => array( 'mode' => 'preview', 'data' => array( 'author' => 'Иван Иванов', 'text' => 'Отличный сервис и быстрая поддержка.', 'rating' => 5, ), ), ), )); 

Preview делает процесс создания контента быстрее, особенно в командах, где дизайнеры и разработчики работают совместно.

Тестирование и отладка

После внедрения блока проверяйте:

• Отображение в разных темах.
• Работу в режиме «Автосохранение» Gutenberg.
• Корректность HTML‑разметки (валидатор W3C).

Если блок падает с ошибкой 500, обратитесь к статье Кастомная ошибка 500 WordPress — там описаны типичные причины и решения.

Не забывайте про безопасность: проверяйте пользовательский ввод, используйте esc_html(), wp_kses_post() и включайте nonce, если блок обрабатывает AJAX‑запросы.

Заключение

Создание ACF блока для Gutenberg — это комбинация нескольких простых шагов: регистрация блока, объявление полей, написание шаблона и настройка preview. Следуя нашей инструкции, вы получите гибкий, переиспользуемый компонент, который легко масштабировать и поддерживать. Для полного контроля над производительностью сайта не забудьте периодически профилировать его с помощью Blackfire и защищать платежные формы, изучив защиту платежей WordPress.