Использование компонента вне редактора. select('core') равно null

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Причина
Решение
1. Регистрация скриптов
2. Явное указание зависимостей
3. Подключение медиа
Пример корректного подключения
Заключение

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

Я использую компоненты WordPress в панели администратора моего плагина и пытаюсь сделать кнопку загрузки изображения. Кнопка работает нормально и позволяет мне выбрать изображение, но когда я выбираю изображение, в консоли появляется ошибка:

Произошла ошибка при выполнении ‘mapSelect’: Невозможно прочитать свойства null (чтение ‘getMedia’). Ошибка может быть связана с этой предыдущей ошибкой: TypeError: Невозможно прочитать свойства null (чтение ‘getMedia’)

Мой компонент:

import { useSelect } from '@wordpress/data';
import { MediaUpload } from '@wordpress/media-utils';
import { Button, ResponsiveWrapper } from '@wordpress/components';

export default ({ onSelect, id }: { onSelect: (id: number) => void; id?: number }) => {
  const media = useSelect(
    (select) => {
      return id ? select('core').getMedia(id) : undefined;
    },
    [id]
  );

  const onSelectMedia = (selectedMedia) => {
    onSelect(selectedMedia.id);
  };

  return (
      <MediaUpload
        onSelect={onSelectMedia}
        allowedTypes={['image']}
        value={id}
        render={({ open }) => (
          <Button onClick={open} variant="secondary">
            {!id && 'Выбрать изображение'}
            {media && (
              <ResponsiveWrapper naturalWidth={media.media_details.width} naturalHeight={media.media_details.height}>
                <img src={media.source_url} alt={media.alt} />
              </ResponsiveWrapper>
            )}
          </Button>
        )}
      />
  );
};

console.log(select('core')) в useSelect возвращает null.

Что я могу сделать, чтобы получение информации об изображении работало? Похожий код в редакторе Gutenberg работает…

Надеюсь, вы нашли ответ, но для всех остальных, кто интересуется: вам нужно сказать WordPress, какие скрипты подключать. Когда вы компилируете свой React-код, по крайней мере, если вы используете родное решение WordPress, в папке сборки автоматически создается файл с именем [filename].assets.php. Когда вы регистрируете скрипт для страницы опций в файле вашего плагина, вы можете добавить это в зависимости, например так:

$assets = require PLUGIN_PATH . 'build/[filename].asset.php';

wp_enqueue_script(
  'options-page-script',
  PLUGIN_URL . '/build/[filename].js',
  $assets['dependencies'],
  '1.00',
  true
);

В качестве альтернативы вы можете отслеживать ручки скриптов и добавить их вручную, например так:

wp_enqueue_script(
  'options-page-script',
  PLUGIN_URL . '/build/[filename].js',
  ['wp-components', 'wp-element'], // <-- Измените это на то, что вам нужно
  '1.00',
  true
);

Для работы загрузчика медиа вам также может понадобиться выполнить wp_enqueue_media(), но я не уверен.

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

Для решения проблемы с компонентом <MediaUpload /> в админ-панели вашего плагина WordPress, необходимо понять несколько ключевых моментов, которые касаются работы с данными и библиотеками, а также их правильной регистрации и подключения.

Проблема

В вашем компоненте вы получаете ошибку:

An error occurred while running 'mapSelect': Cannot read properties of null (reading 'getMedia')

Эта ошибка возникает из-за того, что метод select('core') возвращает null. Это происходит, когда необходимые скрипты или зависимости не были правильно подключены к вашему плагину.

Причина

Компоненты WordPress, такие как MediaUpload, требуют наличия определённых зависимостей, которые нужно зарегистрировать в вашем плагине. В частности, необходимо явно указать, какие скрипты или библиотеки необходимы для работы вашего компонента.

Решение

1. Регистрация скриптов

При использовании React-кода в WordPress обычно автоматически создается файл [filename].assets.php, который содержит информацию о зависимостях вашего скрипта. Эти зависимости нужно указывать при регистрации скрипта в WordPress. Пример правильной регистрации:

$assets = require PLUGIN_PATH . 'build/[filename].asset.php';

wp_enqueue_script(
  'options-page-script',
  PLUGIN_URL . '/build/[filename].js',
  $assets['dependencies'],
  '1.00',
  true
);

Это гарантирует, что все необходимые зависимости автоматически загружаются, и ваш компонент может корректно получать данные из API WordPress.

2. Явное указание зависимостей

Если по какой-то причине вы не используете автоматическую генерацию файла зависимостей, вы можете указать их вручную. Например:

wp_enqueue_script(
  'options-page-script',
  PLUGIN_URL . '/build/[filename].js',
  ['wp-components', 'wp-element'], // Убедитесь, что добавили все нужные зависимости
  '1.00',
  true
);

3. Подключение медиа

Если ваш компонент работает с медиафайлами, убедитесь, что вы вызвали функцию для загрузки медиабиблиотеки:

wp_enqueue_media();

Это подключит необходимый функционал для работы с медиа в админке.

Пример корректного подключения

Вот обобщенный пример, как может выглядеть правильное подключение скриптов в вашем плагине:

function my_plugin_enqueue_scripts() {
    wp_enqueue_media(); // Подключаем медиа-библиотеку

    $assets = require PLUGIN_PATH . 'build/[filename].asset.php';

    wp_enqueue_script(
        'options-page-script',
        PLUGIN_URL . '/build/[filename].js',
        $assets['dependencies'],
        $assets['version'],
        true
    );
}
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_scripts');

Заключение

Следуя приведённым рекомендациям, вы сможете устранить ошибку в работе с компонентом <MediaUpload /> и обеспечить правильную интеграцию его в ваш плагин. Убедитесь, что все необходимые библиотеки загружены, и ваш код корректно обрабатывает запросы к API WordPress. Этот подход не только оптимизирует работу вашего компонента, но и улучшит пользовательский интерфейс вашего плагина, предоставляя более плавный и предсказуемый опыт использования.

Использование компонента вне редактора. select(‘core’) равно null