Динамическая галерея ACF с lightbox в WordPress: блок на block.json

Advanced Custom Fields (ACF) хорошо дружит с редактором блоков: поле «Галерея», свой блок и вывод на сайте без шорткодов. Ниже рабочая схема динамической галереи: блок ACF на block.json, поле rgallery, сетка на CSS и открытие картинок в lightbox через плагин Responsive Lightbox & Gallery. Понадобится ACF PRO: по описанию плагина и поле Gallery, и ACF Blocks входят именно в платную версию.

Регистрация блока: block.json вместо acf_register_block_type()

В первой версии этой схемы блок регистрировался функцией acf_register_block_type() на хуке acf/init. Она до сих пор работает, но в документации ACF помечена устаревшей: с ACF 6.0 блоки рекомендуется описывать файлом block.json и регистрировать штатной функцией WordPress register_block_type().

Структура в дочерней теме такая: папка blocks/acf-gallery, в ней block.json, шаблон render.php и style.css. Сам block.json:

{
    "name": "acf/acf-gallery",
    "title": "Галерея ACF",
    "description": "Галерея из поля ACF Gallery с открытием в lightbox.",
    "category": "media",
    "icon": "images-alt2",
    "keywords": ["acf", "gallery", "галерея"],
    "style": ["file:./style.css"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "render.php"
    },
    "supports": {
        "anchor": true
    }
}

Ключ acf отличает блок ACF от обычного: renderTemplate указывает шаблон вывода, mode задаёт, что видно в редакторе. Остальные ключи стандартные для WordPress. Так же устроен пример в руководстве ACF по первому блоку.

Регистрация в functions.php дочерней темы занимает одну строку:

add_action( 'init', function () {
    register_block_type( get_stylesheet_directory() . '/blocks/acf-gallery' );
} );

Шаблон вывода render.php

ACF передаёт в шаблон переменные $block и $is_preview. Шаблон читает поле rgallery и выводит превью со ссылкой на полный размер. Атрибут data-rel="lightbox-gallery" нужен плагину lightbox, чтобы собрать картинки одной галереи вместе:

<?php
$images = get_field( 'rgallery' );

if ( empty( $images ) ) {
    if ( $is_preview ) {
        echo '<p>Добавьте изображения в поле галереи.</p>';
    }
    return;
}

$anchor = ! empty( $block['anchor'] ) ? ' id="' . esc_attr( $block['anchor'] ) . '"' : '';
?>
<div class="acf-gallery-block"<?php echo $anchor; ?>>
    <?php foreach ( $images as $image ) : ?>
        <a href="<?php echo esc_url( $image['url'] ); ?>" data-rel="lightbox-gallery">
            <img src="<?php echo esc_url( $image['sizes']['medium'] ); ?>"
                 alt="<?php echo esc_attr( $image['alt'] ); ?>" loading="lazy">
        </a>
    <?php endforeach; ?>
</div>

Внутри блока get_field( 'rgallery' ) без второго аргумента берёт значение из полей самого блока. Если галерея хранится в полях записи, например у объекта недвижимости, передайте ID записи: get_field( 'rgallery', get_the_ID() ).

Поле Gallery в ACF

• В ACF создайте группу полей и добавьте поле типа «Галерея».
• Название поля rgallery, оно должно совпадать с тем, что читает шаблон.
• Формат возврата «Массив изображений». По документации поля Gallery есть ещё URL и ID, но шаблону нужны url, sizes и alt, а их даёт только массив.
• В правилах размещения выберите «Блок» равно «Галерея ACF», тогда поле появится в настройках блока. Если галерея должна жить в записи, выберите нужный тип записи.

Блок в редакторе

Откройте запись или страницу, добавьте блок «Галерея ACF», загрузите картинки в поле галереи и опубликуйте. На сайте появится сетка превью, клик открывает картинку целиком.

Стили сетки

Файл style.css лежит рядом с block.json. Благодаря строке style в block.json WordPress подключает его только на страницах, где есть этот блок:

.acf-gallery-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.acf-gallery-block a {
    display: block;
    line-height: 0;
}

.acf-gallery-block img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.acf-gallery-block img:hover {
    transform: scale(1.05);
}

Lightbox через Responsive Lightbox & Gallery

Для открытия картинок поверх страницы подойдёт Responsive Lightbox & Gallery от dFactory. Плагин живой: больше 100 000 установок, обновление в октябре 2026 года. Установите его и в настройках включите lightbox для изображений и галерей. Ссылки из шаблона ведут на полный размер и помечены data-rel="lightbox-gallery", так что клики по превью одной галереи листаются стрелками. Если ваш плагин lightbox ищет другой атрибут или класс, поменяйте его в render.php.

Что ещё учесть

• Для крупной сетки возьмите размер large или свой размер вместо medium.
• Группы полей удобно хранить в ACF JSON, тогда поле rgallery и правила размещения переезжают вместе с темой между копиями сайта.
• Старые блоки на acf_register_block_type() ломать не обязательно, но новые лучше сразу делать на block.json.

В итоге схема простая: блок ACF на block.json, поле Gallery rgallery с форматом массива, шаблон с превью и ссылкой на полный размер, CSS grid и lightbox по data-rel. Галерею можно вставить в любую запись прямо из редактора, без шорткодов и правки шаблонов темы.

Источники и ссылки