Пользовательский блок в пользовательской теме

Вопрос или проблема

Я создаю пользовательский блок, как в курсе “Введение в разработку блоков: Создайте свой первый пользовательский блок” на learn.wordpress.org. Я сделал каркас для своего пользовательского блока (Модуль 1) и запустил его в теме “25”. Этот блок “Многостолбцовый” работает “из коробки” и отлично функционирует.

Также я сделал пользовательскую тему:

index.php
style.css
theme.json
Templates (папка)

Я сделал тот же блок “Многостолбцовый” в своей пользовательской теме, и он работает, но в моей пользовательской теме этот блок не работает в части save.js – на фронтенде. Работает только в edit.js – Gutenberg. Я могу редактировать в WP, но не могу видеть на фронтенде.

Я хотел бы знать.

Спасибо

Ответ или решение

Создание пользовательского блока в пользовательской теме WordPress может представить ряд уникальных вызовов, особенно когда разработка ведется на основе указаний из курса "Introduction to Block Development: Build your first custom block" на платформе learn.wordpress.org. Рассмотрим подробнее ситуацию, когда ваш блок "Multi-column" отображается корректно в режиме редактирования в редакторе Gutenberg, но не работает на стороне фронтенда, что означает, что возникают проблемы с функциональностью сохраненной версии блока в файле save.js.

Теория:

В классическом подходе к разработке блоков WordPress, мы создаем два основных компонента: edit.js и save.js. Первый отвечает за функциональность, видимую в редакторе Gutenberg, а второй за то, как блок будет отображаться на фронтенде после публикации. Если ваш блок работает корректно в редакторе, но не на фронтенде, проблема обычно кроется в части реализации save.js.

Вероятные причины могут включать:

Ошибки в написании кода: Ошибки в логике или синтаксисе в файле save.js могут привести к неправильному отображению блока.
Некорректные ресурсы: Если внешние ресурсы, которые вы подключаете в вашем блоке (например, CSS или JavaScript), не подключены должным образом на фронтенде, это может вызвать проблему.
Различия в контексте выполнения: Функциональность, которая работает в редакторе, может не работать на фронтенде из-за различий в контексте выполнения скриптов или конфликтов с другими элементами темы.
Процесс сборки: Неправильная настройка сборки или развертывания скриптов может привести к разнице в версиях кода для редактора и фронтенда.

Пример:

Допустим, ваш save.js выглядит следующим образом:

const { createElement: el } = wp.element;

export default function save() {
    return el('div', { className: 'multi-column' },
        el('div', { className: 'column' }, 'Content Column 1'),
        el('div', { className: 'column' }, 'Content Column 2')
    );
}

Этот код создает двухколоночную структуру. Однако если на фронтенде отображение не соответствует ожиданиям, возможные проблемы могут быть связаны с отсутствующими стилями CSS или с неправильной компиляцией скриптов, которые должны зарегистрировать блок для фронтенда.

Применение:

Проверьте консоль разрабочика на наличие ошибок как в редакторе, так и на фронтенде. Это поможет определить, не происходит ли какая-либо ошибка JavaScript, мешающая выполнению кода вашего блока.
Перепроверьте подключение стилей и скриптов. Убедитесь, что необходимые CSS стили и JS скрипты зарегистрированы и подключены правильно. В файле functions.php вашего шаблона нередко можно найти участок, где подключаются все ресурсы. Пример правильной регистрации ресурсов:

function my_custom_block_assets() {
    wp_enqueue_style(
        'multi-column-style',
        get_template_directory_uri() . '/build/block.css'
    );

    wp_enqueue_script(
        'multi-column-script',
        get_template_directory_uri() . '/build/block.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );
}
add_action( 'enqueue_block_assets', 'my_custom_block_assets' );

Проверьте build процесс. Убедитесь, что все файлы корректно собраны и находятся в нужных местах. Использование таких инструментов как Webpack может помочь в автоматизировании процесса сборки и дегустации.
Обратите внимание на зависимости. Если ваш блок содержит функциональность, которая зависит от других скриптов или стилей, удостоверьтесь, что они загружаются в правильном порядке.
Сравните компоненты edit.js и save.js, чтобы гарантировать, что функциональность блока в редакторе и на фронтенде соответствует вашему дизайну.
Проверьте конфигурацию theme.json. Убедитесь, что настройки, касающиеся вашего блока в theme.json, соответствуют требованиям и учитывают все необходимые стилей и опции.

Применение всех этих советов может помочь устранить проблему отображения блока на фронтенде. Важно помнить, что устранение неисправностей требует времени и внимания к деталям, особенно в процессе создания пользовательских тем и блоков в WordPress.