Расширить основной блок в Гутенберге
Для проекта я должен расширить ядро блока core/обложку-изображение. Для первой базовой попытки я придумал следующий код:
PHP:
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script('hephaestus-admin-script',
get_template_directory_uri() . '/dist/js/admin.js', ['wp-blocks', 'wp-element', 'wp-edit-post'], THEME_VERSION);
});
Admin.js :
function transformElement(element, blockType, attributes) {
if (blockType.name != 'core/cover-image') {
return element;
}
var newElement = wp.element.createElement(
'div',
{
className: 'wp-block-cover-image',
style: 'background-image: url(\'' + attributes.url + '\');',
},
[
wp.element.createElement(
'p',
{
className: 'wp-block-cover-image-text',
},
[
wp.element.createElement(
'span',
{
className: 'wp-block-cover-image-text-stage',
},
attributes.title
)
]
),
]
);
return newElement;
}
wp.hooks.addFilter(
'blocks.getSaveElement',
'hephaestus/modify-get-save-element',
transformElement
);
В основном это работает. Я могу добавить блок изображения обложки в редакторе, и вывод интерфейса тоже будет по желанию.
Но при повторном доступе к сайту в бэкэнде Гутенберг выдает мне следующую ошибку:
Проверка блока: Проверка блока не удалась для
core/cover-image
Ожидается:
<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage"></span></p></div>
Фактический:
<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage">This is a test</span></p></div>
Примечание: URL-адрес изображения намеренно зачеркнут
Почему я получаю эту ошибку проверки блока здесь? Я думаю, что это как-то связано с атрибутом заголовка. Но я не могу понять, в чем причина этого...
Помогите, кто-нибудь?
С уважением, Маркус
1 answers
Ненастоящее предупреждение об ответе
Это звучит как долгосрочная плохая идея. Вы изменяете основную функциональность с помощью чего-то, что не наследует никакой сгенерированной разметки исходного блока. Любая последующая обработка блока может привести к предположению о разметке на основе имени блока, но предположения могут быть неверными, и будет трудно определить, почему, поскольку блок имеет ожидаемое имя.
Точно так же, как с виджетами и шорткодами, если вы собираетесь в основном разветвите блок, вы должны просто создать новый. Изменение блока должно выполняться только тогда, когда все, что вы делаете, - это изменяете какой-то его небольшой аспект, а может быть, и не тогда.
(Я понимаю, что вы, возможно, просто играете, но все же новый блок гораздо более совместим с поцелуями, учитывая код, который вы показываете здесь)