Хук enqueue_block_assets используется для подключения общих стилей и скриптов как для редактора блоков, так и для фронтенда. Он активируется после загрузки активов блоков и позволяет использовать функции wp_enqueue_script и wp_enqueue_style для добавления кастомного функционала или оформления в блоки.
do_action( ‘enqueue_block_assets’ )Хук enqueue_block_assets можно применять для подключения CSS и JavaScript файлов, которые будут доступны как в интерфейсе редактора, так и на пользовательской стороне сайта. Это полезно, если необходимо, чтобы блоки отображались одинаково в обеих средах.
Замечание: В WordPress 6.3 была добавлена поддержка для iframe в редакторе. Теперь стили и скрипты, добавленные через
enqueue_block_assets, подключаются в iframe редактора. Для ограничения подключения только в админке рекомендуется использовать условиеis_admin().
Применение
Для использования хука добавьте следующий код в файл вашей темы или плагина:
add_action( 'enqueue_block_assets', 'wp_custom_enqueue_block_assets' );
/**
* Функция для хука `enqueue_block_assets`.
*
* @return void
*/
function wp_custom_enqueue_block_assets() {
// Код для добавления стилей и скриптов
}
Пример 1: Подключение CSS и JavaScript для блока на фронтенде и в редакторе
В этом примере стили и скрипты для пользовательского блока загружаются как на сайте, так и в редакторе.
add_action( 'enqueue_block_assets', function() {
wp_enqueue_style( 'custom-block-style', get_template_directory_uri() . '/css/custom-block-style.css' );
wp_enqueue_script( 'custom-block-script', get_template_directory_uri() . '/js/custom-block-script.js', array(), '1.0', true );
} );
Пример 2: Подключение стилей только для редактора
Если стили необходимы только для редактора, можно использовать условие is_admin(). Это ограничит загрузку стилей на странице редактирования записей.
add_action( 'enqueue_block_assets', function() {
if ( is_admin() ) {
wp_enqueue_style( 'editor-only-style', plugin_dir_url( __FILE__ ) . 'editor-style.css' );
}
} );
Пример 3: Подключение стилей для определённого блока
Чтобы подключить стили для определённого блока, например, кастомного блока «testimonial», можно указать уникальный стиль и скрипт для этого блока.
add_action( 'enqueue_block_assets', function() {
if ( has_block( 'custom/testimonial' ) ) {
wp_enqueue_style( 'testimonial-block-style', get_stylesheet_directory_uri() . '/blocks/testimonial/testimonial.css' );
wp_enqueue_script( 'testimonial-block-script', get_stylesheet_directory_uri() . '/blocks/testimonial/testimonial.js', array(), '1.0', true );
}
} );
Пример 4: Загрузка стилей в зависимости от условий
Этот пример демонстрирует, как подключить стили для конкретного типа записи (post) только на пользовательской стороне.
add_action( 'enqueue_block_assets', function() {
if ( ! is_admin() && is_singular( 'post' ) ) {
wp_enqueue_style( 'single-post-block-style', get_template_directory_uri() . '/css/single-post-block.css' );
}
} );
Когда использовать enqueue_block_assets
- Для подключения глобальных стилей блоков: Если необходимо, чтобы блоки выглядели одинаково в редакторе и на сайте.
- Для добавления скриптов и стилей, которые нужны в обеих средах: Например, для блоков, которые имеют специфичное оформление.
- Для оптимизации загрузки стилей: Стили можно подключать с условием, чтобы они загружались только на страницах, где действительно используются.
Заключение
Хук enqueue_block_assets предоставляет удобный способ управления стилями и скриптами блоков в WordPress. С его помощью можно легко улучшить интерфейс и добавить интерактивность для блоков как на сайте, так и в редакторе, что делает создание и редактирование контента более гибким и персонализированным.