Как расширить блок галереи в Гутенберге?

Я играю с Гутенбергом перед его включением в ядро, и я хотел бы знать, как расширить существующий блок галереи, чтобы изменить его отображение. Например, вместо сетки миниатюр я хотел бы показать слайд-шоу изображений. Является ли это возможным? Если так, то как? Любая помощь будет оценена.

Хорошо, я немного поиграл с этим и сумел изменить вывод блока Gallery со следующими оговорками:

• Предварительный просмотр не соответствует выводу. Я думаю, что это возможно, но, похоже, немного сложнее.
• Определенные классы и разметка требуются в выводе, чтобы блок мог анализировать содержимое и сохранять его редактируемым. Эти классы имеют стили интерфейса, с которыми необходимо разобраться. Я не уверен в этом пункте, если есть способ фильтровать, как блок делает это. Если бы это было возможно, это могло бы даже не быть хорошей идеей, если бы это означало, что блоки Галереи разрушаются при отключении темы или плагина. Совершенно новый блок, вероятно, будет подходить для ситуаций, когда это потребуется.
• Я не совсем уверен, как работают размеры изображения на этом этапе.
• Используемый метод JavaScript-хуков может не иметь отношения к финальной версии. Гутенберг использует во @wordpress/hooksвремя дискуссии о том, что перехватывает системы для использования в Ядра продолжается .
• Поскольку выходные данные блоков сохраняются в виде HTML, а не шорткода или мета, невозможно изменить выходные данные существующих галерей без их редактирования.

Первое, что нам нужно сделать, это зарегистрировать скрипт. Это сделано с wp_enqueue_scripts(), но на enqueue_block_editor_assetsкрючке.

Скрипт должен иметь wp-blocksскрипт как зависимость. Он почти наверняка уже загружен в редактор, но, сделав его зависимым, можно предположить, что он загружен до нашего скрипта.

function wpse_298225_enqueue_block_assets() {
    wp_enqueue_script(
        'wpse-298225-gallery-block',
        get_theme_file_uri( 'block.js' ),
        ['wp-blocks']
    );
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );

HTML-код для вывода блока обрабатывается save()методом блока. Вы можете увидеть блоки галереи в этом файле .

На этом этапе (март 2018 г.) Гутенберг поддерживает фильтр по методу сохранения блоков blocks.getSaveElement. Мы можем добавить хук к этому в JavaScript следующим образом:

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'wpse-298225',
    wpse298225GallerySaveElement
)

Первый аргумент - это имя хука, второй аргумент - я думаю - пространство имен, а последний аргумент - функция обратного вызова.

Так как мы заменяем save()метод блока, нам нужно вернуть новый элемент. Однако это не обычный элемент HTML, который мы должны вернуть. Нам нужно вернуть элемент React .

Когда вы смотрите на метод оригинального блока, save()вы видите JSX. React, который Гутенберг использует изнутри, поддерживает его для рендеринга элементов. Смотрите эту статью для получения дополнительной информации об этом.

Обычно для JSX требуется этап сборки, но поскольку я не представляю этап сборки для этого примера, нам нужен способ создания элемента без JSX. Реакт обеспечивает это с createElement(). WordPress предоставляет оболочку для этой и других функциональных возможностей реакции в форме wp.element. Так что использовать createElement()мы используем wp.element.createElement().

В функции обратного вызова blocks.getSaveElementмы получаем:

• element Исходный элемент, созданный блоком.
• blockType Объект, представляющий используемый блок.
• attributesСвойства экземпляра блока. В нашем примере это включает изображения в галерее и настройки, такие как количество столбцов.

Итак, наша функция обратного вызова должна:

• Вернуть оригинальный элемент для неблочных галерей.
• Возьмите атрибуты, особенно изображения, и создайте из них новый элемент React, представляющий галерею.

Вот полный пример, который просто выводит a ulс классом, my-galleryи lis для каждого изображения с классом my-gallery-itemи imgв каждом с srcустановленным URL-адресом изображения.

function wpse298225GallerySaveElement( element, blockType, attributes ) {
    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    var newElement = wp.element.createElement(
        'ul',
        {
            'className': 'wp-block-gallery my-gallery',
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

Некоторые вещи, чтобы принять к сведению:

• Исходный блок галереи находит изображения путем поиска ul.wp-block-gallery .blocks-gallery-item, поэтому эта разметка и эти классы необходимы для возможности редактирования блока. Эта разметка также используется для стиля по умолчанию.
• attributes.images.mapциклически повторяет каждое изображение и возвращает массив дочерних элементов в качестве содержимого основного элемента. Внутри этих элементов есть еще один дочерний элемент для самого изображения.

Здесь, чтобы предоставить обновленный ответ. Я нашел этот пост чрезвычайно полезным для ответа на вопрос о том, как расширить блок галереи.

Короче говоря, желательно просто создать новый блок, а не расширять существующий. Из поста в моей ссылке выше:

если вы измените HTML блока [путем расширения], он не будет распознан как исходный блок. Вместо того, чтобы пытаться манипулировать основным блоком, кажется, что отмена регистрации основного блока и регистрация нового замещающего блока на его месте - более безопасный подход - таким образом вы гарантируете, что пользователи сайта будут использовать вашу конкретную настраиваемую галерею, которая будет проверяться, потому что он определяет свою собственную структуру HTML.

Ссылка выше также ссылается на плагин Create-Guten_Block, который является инструментом командной строки, который сгенерирует все, что вам нужно, чтобы начать работу с созданием блоков. Инструмент очень прост в использовании и прост в настройке.

Благодаря этим ресурсам я смог выяснить, как за короткое время разработать собственный блок галереи.