Вопрос или проблема
Я загрузил скрипт jQuery с помощью enqueue_block_editor_assets для Gutenberg и wp_print_scripts для фронтенда, который загружается нормально.
add_action( 'wp_print_scripts', 'sk_load_script' );
add_action( 'enqueue_block_editor_assets', 'sk_load_script' );
add_action( 'enqueue_block_editor_assets', 'sk_gutenberg_script' );
Функция sk_load_script загружает как frontend.js для фронтенда, так и для Gutenberg, тогда как функция sk_gutenberg_script загружает block.js
Однако, когда я делаю в frontend.js:
jQuery(document).ready(function ($) {
var place = jQuery('.sk-place');
console.log(place);
}
Это не выводит ничего в консоль в области Gutenberg. Но выводит на фронтенде.
В функции редактирования block.js у меня есть пользовательское событие.
constructor() {
const event = new Event( 'skLoad' );
document.dispatchEvent( event );
}
С этим, когда я делаю в frontend.js,
document.addEventListener( 'skLoad', function( e ) {
var place = jQuery('.sk-place');
console.log(place);
}, false );
Это также работает нормально, но только во время добавления блока.
Как мне запустить это, когда уже установленный блок находится на месте при загрузке области Gutenberg или при загрузке блока (не только при редактировании)?
На самом деле, мне также нужно, чтобы это срабатывало при изменении других входных данных в настройках блока Gutenberg, я имею в виду в edit() в block.js, например, при изменении этого: https://ibb.co/SXkbhc6
Спасибо!
Чтобы достичь своих целей в редакторе Gutenberg (как при первоначальной загрузке блока, так и при обновлении его настроек), вам нужно убедиться, что ваш скрипт (frontend.js) слушает события, связанные с рендерингом блока и изменениями атрибутов блока. Вот как вы можете скорректировать свой подход:
Обеспечьте совместимость скрипта с жизненным циклом редактора Gutenberg
Gutenberg динамически отображает блоки в редакторе, поэтому ваш JavaScript должен подключаться к этим событиям рендеринга. Используйте обновления состояния React для изменений атрибутов
Блоки Gutenberg обновляются динамически через React. Если вы хотите обрабатывать изменения, вам следует привязаться к жизненному циклу React или атрибутам блока.
Используйте wp.data.subscribe для обнаружения изменений в состоянии редактора Gutenberg для уже установленных блоков.
Вызывайте пользовательские события в вашей функции редактирования, когда изменяются определенные атрибуты.
Слушайте эти события в frontend.js, чтобы запустить вашу желаемую логику. Комбинируя wp.data.subscribe с пользовательскими событиями, вы можете эффективно обрабатывать как первоначальный рендеринг, так и изменения в редакторе Gutenberg.
Ответ или решение
Для того чтобы триггерить JavaScript на загрузке страницы редактора Gutenberg, а также обрабатывать изменения в настройках блока, вам необходимо учитывать особенности работы Gutenberg и его интеграции с JavaScript. В данном ответе мы рассмотрим, как это сделать, опираясь на ваши описания.
1. Понимание жизненного цикла блоков Gutenberg
Gutenberg использует React для динамической отрисовки блоков, поэтому JavaScript должен отслеживать события рендеринга и изменения состояния. При загрузке редактора необходимо учесть, что блоки могут быть отрисованы на основе уже сохраненных данных, и вам необходимо внедрить соответствующий код, который будет вызываться как на старте, так и при модификации блоков.
2. Подключение необходимых скриптов
Ваши функции для подключения скриптов (sk_load_script и sk_gutenberg_script) должны, как вы уже делаете, быть подключены как для фронтенда, так и для редактора. Убедитесь, что в этих функции вы правильно указываете зависимости и версии скриптов, чтобы минимизировать конфликты и ошибки.
function sk_load_script() {
wp_enqueue_script('frontend-script', get_template_directory_uri() . '/assets/js/frontend.js', array('jquery'), '1.0', true);
}
function sk_gutenberg_script() {
wp_enqueue_script('block-script', get_template_directory_uri() . '/assets/js/block.js', array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'), '1.0', true);
}
add_action('wp_print_scripts', 'sk_load_script');
add_action('enqueue_block_editor_assets', 'sk_gutenberg_script');3. Использование реактивного состояния для обработки изменений
В вашем block.js вам необходимо добавлять обработчики событий, которые будут реагировать как на рендеринг блока, так и на изменения атрибутов. Вы можете использовать wp.data.subscribe для отслеживания изменений.
const { select } = wp.data;
constructor() {
// Отправка события при инициализации (блок загружен)
const event = new Event('skLoad');
document.dispatchEvent(event);
// Подписка на изменения состояния редактора Gutenberg
wp.data.subscribe(() => {
const attributes = select('core/block-editor').getBlockAttributes(this.props.clientId);
// Проверка изменений в нужных атрибутах и отправка события
if (attributes.myAttribute !== this.state.myAttribute) {
this.setState({ myAttribute: attributes.myAttribute });
const changeEvent = new Event('skAttributeChange');
document.dispatchEvent(changeEvent);
}
});
}4. Обработка событий в frontend.js
В frontend.js вы можете добавлять слушатели событий, которые реагируют как на первоначальную загрузку блока, так и на изменения, происходящие в редакторе:
document.addEventListener('skLoad', function () {
var place = jQuery('.sk-place');
console.log('Блок загружен:', place);
}, false);
document.addEventListener('skAttributeChange', function () {
// Здесь можете выполнять действия при изменении атрибутов
var place = jQuery('.sk-place');
console.log('Атрибут изменён:', place);
}, false);5. Заключение
Таким образом, комбинирование реактивного подхода Gutenberg с кастомными событиями и подписками позволяет не только триггерить скрипты на начальной загрузке блоков, но и отслеживать изменения в их атрибутах. Это создаст более взаимодействующий и отзывчивый пользовательский интерфейс в редакторе Gutenberg, что улучшает общий пользовательский опыт.
Убедитесь, что вы тестируете интеграции на различных вариантах загрузки блоков, чтобы избежать потенциальных проблем.