Динамическая галерея ACF с Lightbox в WordPress: блок Gutenberg для разработчиков

Advanced Custom Fields (ACF) удобно стыкуется с Gutenberg: поле Gallery, свой блок, разметка на фронте. Ниже – рабочая схема: регистрация ACF Block, поле rgallery, сетка CSS и Lightbox через плагин Responsive Lightbox & Gallery.

Нужен ACF Pro (тип поля Gallery и acf_register_block_type / ACF Blocks). Код – в functions.php дочерней темы или в небольшом mu-plugin.

1. Регистрация блока ACF

На хуке acf/init регистрируем блок. В редакторе он появится как «Галерея ACF»:

function register_acf_gallery_block() {
    if ( ! function_exists( 'acf_register_block_type' ) ) {
        return;
    }

    acf_register_block_type( array(
        'name'            => 'acf-gallery',
        'title'           => __( 'Галерея ACF' ),
        'description'     => __( 'Блок галереи на полях ACF Gallery.' ),
        'render_callback' => 'render_acf_gallery_block',
        'category'        => 'common',
        'icon'            => 'images-alt2',
        'keywords'        => array( 'acf', 'gallery', 'галерея' ),
        'mode'            => 'edit',
        'supports'        => array(
            'align' => false,
        ),
    ) );
}
add_action( 'acf/init', 'register_acf_gallery_block' );

Имя блока в Location ACF будет acf/acf-gallery (префикс acf/ + name). В интерфейсе выбора часто видно как acf-gallery / Галерея ACF.

2. Render callback

Функция вывода читает поле rgallery (return format у Gallery лучше Array) и печатает превью со ссылкой на полный файл. Атрибут data-rel="lightbox-gallery" нужен плагину Lightbox, чтобы сгруппировать клики:

function render_acf_gallery_block( $block, $content = '', $is_preview = false, $post_id = 0 ) {
    $images = get_field( 'rgallery' );

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

    echo '<div class="acf-gallery-block">';

    foreach ( $images as $image ) {
        $full = isset( $image['url'] ) ? $image['url'] : '';
        $thumb = isset( $image['sizes']['thumbnail'] ) ? $image['sizes']['thumbnail'] : $full;
        $alt  = isset( $image['alt'] ) ? $image['alt'] : '';

        if ( ! $full ) {
            continue;
        }

        printf(
            '<a href="%1$s" data-rel="lightbox-gallery"><img src="%2$s" alt="%3$s" loading="lazy" /></a>',
            esc_url( $full ),
            esc_url( $thumb ),
            esc_attr( $alt )
        );
    }

    echo '</div>';
}

3. Поле Gallery в ACF

1. ACF → Field Groups → Add New (или Custom Fields, в зависимости от версии/локализации).
2. Поле типа Gallery, Field Name: rgallery (должно совпадать с get_field( 'rgallery' )).
3. Return Format: Image Array (чтобы были url, sizes, alt).
4. Location: Block is equal to Галерея ACF / acf/acf-gallery.

После сохранения группа полей появляется только внутри этого блока в сайдбаре редактора.

4. Использование в Gutenberg

1. Откройте запись или страницу.
2. Добавьте блок Галерея ACF.
3. В полях блока загрузите изображения в Gallery.
4. Опубликуйте и проверьте фронт: сетка превью, клик открывает полный размер (с Lightbox, если плагин активен).

5. Стили сетки

В style.css child-темы или через Customizer → Дополнительные CSS:

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

.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);
}

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

6. Lightbox

1. Установите Responsive Lightbox & Gallery (или аналог, который смотрит на data-rel / селекторы ссылок на изображения).
2. В настройках плагина включите lightbox для галерей/изображений.
3. Убедитесь, что в разметке ссылки ведут на полный URL и есть data-rel="lightbox-gallery" (как в render выше). Если у вашего плагина другой атрибут (например, data-lightbox или класс), подставьте его вместо data-rel.

После этого клик по превью открывает оверлей, стрелки листают кадры одной галереи.

Замечания по продакшену

• Для блока можно задать enqueue_style / enqueue_script в аргументах acf_register_block_type, чтобы CSS грузился только при наличии блока.
• Вместо thumbnail возьмите medium или кастомный size, если сетка крупнее.
• ACF JSON (sync field groups) удобен, чтобы Location и rgallery ехали вместе с темой по окружениям.
• На блоках с preview в редакторе проверяйте $is_preview, чтобы в админке не было пустого прямоугольника без подсказки.

Итог

Схема простая: ACF Block → Gallery rgallery → render с превью и ссылкой на full → CSS grid → Lightbox по data-rel. Так галереи можно вставлять в любые записи из Gutenberg, не копируя shortcode и не правя шаблон single под каждый кейс.

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