Хорошо, я немного поиграл с этим и сумел изменить вывод блока 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циклически повторяет каждое изображение и возвращает массив дочерних элементов в качестве содержимого основного элемента. Внутри этих элементов есть еще один дочерний элемент для самого изображения.