Как сделать хуки доступными для @wordpress/hooks?

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

add_action(
    'admin_enqueue_scripts',
    'enqueue_backend_scripts',
);
public function enqueue_backend_scripts( $page ) {

    if ($page !== 'upload.php') {
        return;
    }

    $script_assets = require get_build_path( 'my-script.asset.php' );
    wp_enqueue_script(
        'prefix-my-script',
        get_build( 'my-script.js' ),
        $script_assets['dependencies'],
        '0.1.0',
        true
    );
}

import { addFilter } from '@wordpress/hooks';

console.log( 'foo' );

addFilter( 'all', 'my-namespace', ( e ) => console.log( 'bar', e ) );

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

Как подключить хуки к @wordpress/hooks в WordPress

Вопрос о подключении хуков, таких как wp_handle_upload_prefilter, с использованием JavaScript и библиотеки @wordpress/hooks требует особого внимания к деталям, поскольку WordPress реализует хуки как для серверной, так и для клиентской части. Давайте детально рассмотрим ваш код и выделим необходимые шаги для успешной интеграции.

1. Проверка подключения скриптов

Ваш код для подключения скрипта в админке выглядит корректно, но важным моментом является убедиться, что скрипт загружается именно на странице загрузки файлов (upload.php). Также необходимо удостовериться, что ваш скрипт загружает необходимые зависимости:

add_action(
    'admin_enqueue_scripts',
    'enqueue_backend_scripts',
);

function enqueue_backend_scripts( $page ) {
    if ( $page !== 'upload.php' ) {
        return;
    }

    $script_assets = require get_build_path( 'my-script.asset.php' );
    wp_enqueue_script(
        'prefix-my-script',
        get_build( 'my-script.js' ),
        $script_assets['dependencies'],
        '0.1.0',
        true
    );
}

Обратите внимание, что my-script.asset.php должен содержать правильные зависимости для скрипта, например, @wordpress/hooks, если вы планируете их использовать.

2. Использование @wordpress/hooks

Ваш JavaScript-код включает импорт функции добавления фильтров и регистрирует фильтр:

import { addFilter } from '@wordpress/hooks';

console.log('foo');

addFilter('all', 'my-namespace', (e) => console.log('bar', e));

Важные моменты:

1. Контекст и Загрузка Скрипта:

   • Убедитесь, что ваш скрипт действительно загружается на странице. Вы можете проверить консоль браузера на наличие сообщений и ошибок. Если foo виден в консоли, это означает, что скрипт загружен.

2. Использование хуков:

   • Хук all действительно используется для отслеживания всех фильтров, но в JavaScript @wordpress/hooks работает только в контексте React/Block Editor или в определениях, где эти хуки действительно применяются. Это означает, что хук wp_handle_upload_prefilter выполняется на стороне сервера, и вам необходимо обращаться к фильтрам именно в контексте пользовательских интерфейсов, поддерживающих такие хуки.

3. Зависимости:

   • Проверьте наличие всех необходимых зависимостей. Если вы используете @wordpress/hooks, убедитесь, что этот пакет загружается.

4. Работа с серверной логикой:

   • Если вы хотите управлять загрузкой файлов (например, изменять или проверять файлы перед их загрузкой), необходимо обращаться к серверным хукам, таким как wp_handle_upload_prefilter, через функции PHP.

Заключение

Для успешного использования хуков в WordPress с @wordpress/hooks, вам необходимо убедиться в их правильном контексте использования и загрузки. Ваш скрипт должен быть корректно подключен, а структуры и зависимости должны соответствовать требованиям. Если вы хотите, чтобы ваш фильтр addFilter срабатывал, вам необходимо использовать его в том контексте, где этот хук действительно активен.

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