Хук enqueue_block_editor_assets используется для подключения стилей и скриптов, которые предназначены исключительно для редактора блоков (Гутенберг). Он позволяет добавлять кастомные стили и JavaScript для страницы редактирования записей, не затрагивая фронтенд сайта.
do_action( ‘enqueue_block_editor_assets’ )
enqueue_block_editor_assets срабатывает после того, как основные активы блоков были добавлены в редактор. Это позволяет разработчикам подключать скрипты и стили, влияющие только на интерфейс редактирования. Например, это может быть полезно для добавления кастомных инструментов, элементов в боковую панель блока или других настроек, которые применяются только в админке.
Важно: Если стили нужно подключить и на фронтенде, и в редакторе, используйте хук
enqueue_block_assets.
Применение
Чтобы использовать этот хук, добавьте следующий код в файл вашей темы или плагина:
add_action( 'enqueue_block_editor_assets', 'custom_enqueue_block_editor_assets' );
/**
* Функция для хука `enqueue_block_editor_assets`.
*
* @return void
*/
function custom_enqueue_block_editor_assets() {
// Код для добавления стилей и скриптов
}
Пример 1: Подключение JavaScript и CSS для редактора блоков
В этом примере JavaScript и CSS добавляются исключительно для страницы редактирования записей в Гутенберге.
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_script( 'custom-editor-js', get_template_directory_uri() . '/js/custom-editor.js', array( 'wp-blocks', 'wp-element' ), '1.0', true );
wp_enqueue_style( 'custom-editor-css', get_template_directory_uri() . '/css/custom-editor.css', array(), '1.0' );
} );
Пример 2: Подключение JavaScript для создания кастомного блока
Этот пример демонстрирует, как подключить JavaScript для создания кастомного блока в редакторе. Файл JavaScript (block-editor.js) содержит логику и настройки для кастомного блока.
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_script(
'custom-block-editor-js',
plugins_url( 'block-editor.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-i18n' ),
filemtime( plugin_dir_path( __FILE__ ) . 'block-editor.js' )
);
} );
Пример 3: Подключение стилей с условием для редактора полного сайта (FSE)
В WordPress редактор полного сайта (Full Site Editor) подключает только стили, содержащие классы, начинающиеся на .wp-block-. Это позволяет гибко добавлять оформление для редактора полного сайта.
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_style( 'fse-block-style', plugin_dir_url( __FILE__ ) . 'fse-style.css' );
// Пример: Добавление стилей с классом .wp-block-custom для поддержки FSE
wp_add_inline_style( 'fse-block-style', '.wp-block-custom { background-color: #f0f0f0; }' );
} );
Пример 4: Условное подключение стилей и скриптов для блоков
Здесь стили и скрипты подключаются только если на странице редактирования используется конкретный блок, например, custom/testimonial.
add_action( 'enqueue_block_editor_assets', function() {
global $post;
if ( has_block( 'custom/testimonial', $post ) ) {
wp_enqueue_style( 'testimonial-editor-style', get_template_directory_uri() . '/blocks/testimonial/editor-style.css' );
wp_enqueue_script( 'testimonial-editor-js', get_template_directory_uri() . '/blocks/testimonial/editor-script.js', array( 'wp-blocks' ), '1.0', true );
}
} );
Когда использовать enqueue_block_editor_assets
- Для добавления стилей и скриптов, которые нужны только в редакторе блоков: Хук подходит для кастомных инструментов, элементов интерфейса или стилизации блоков, используемой исключительно в редакторе.
- Для подключения JavaScript, создающего или настраивающего блоки: Используйте этот хук для скриптов, ответственных за логику и отображение блоков.
- Для добавления стилей в редактор полного сайта (FSE): Убедитесь, что стили включают классы с префиксом
.wp-block-, чтобы они были корректно подключены в FSE.
Заключение
Хук enqueue_block_editor_assets помогает управлять стилями и скриптами для редактора блоков, не затрагивая пользовательскую часть сайта. Этот хук полезен для настройки редактора блоков, создания новых блоков и улучшения интерфейса для редакторов контента, что делает процесс редактирования в WordPress более интуитивным и удобным.