Гаразд, я трохи пограв із цим, і мені вдалося змінити вихід блоку Галерея з такими застереженнями:
- Попередній перегляд не відповідає результату. Я думаю, що це можливо, але, здається, трохи більше.
- Певні класи та розмітка потрібні у висновку для блоку, щоб можна було проаналізувати вміст і зберегти його редагованим. Ці класи мають передові стилі, з якими потрібно буде розібратися. На даний момент я не впевнений, чи є спосіб відфільтрувати, як це робить блок. Якщо це можливо, це може бути навіть не дуже хорошою ідеєю, якщо це означає, що блоки Галереї зламані, коли тема або плагін вимкнено. Зовсім новий блок, мабуть, буде способом вирішити ситуації, коли це буде потрібно.
- Я не дуже впевнений, як працюють розміри зображень на цьому етапі.
- Використовуваний метод гачків JavaScript може не мати значення в остаточному випуску. Гутенберг використовує
@wordpress/hooksпід час обговорення того, яку систему гачків використовувати в Core , триває .
- Оскільки вихід Блоків зберігається як 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. React забезпечує це createElement(). WordPress надає обгортку для цієї та інших функцій реагування у вигляді wp.element. Отже, для використання createElement()ми використовуємо wp.element.createElement().
У функції зворотного дзвінка blocks.getSaveElementми отримуємо:
element Оригінальний елемент, створений блоком.blockType Об'єкт, що представляє блок, що використовується.attributesВластивості екземпляра блоку. У нашому прикладі це включає зображення в галереї та налаштування, як кількість стовпців.
Отже, наша функція зворотного дзвінка повинна:
- Повернути початковий елемент для неблокових галерей.
- Візьміть атрибути, зокрема зображення, і створіть з них новий елемент React, що представляє галерею.
Ось повний приклад, який просто виводить а 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є циклічним переглядом кожного зображення та поверненням масиву дочірніх елементів як вмісту основного елемента. Усередині цих елементів є ще один дочірній елемент для самого зображення.