Как включить React useState в пользовательский плагин блока Gutenberg?

На чтение 3 мин Опубликовано 22.09.2024

Содержание

Вопрос или проблема
Ответ или решение
1. Импортируйте необходимые модули
2. Определите блок
3. Пояснение к коду
4. Завершение

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

Как включить React useState в пользовательский плагин блока Gutenberg?

Код блока выглядит следующим образом:

  wp.blocks.registerBlockType('myblocks/gallery', {
  title: 'Галерея',
  icon: 'my-gallery',
  category: 'common',
  attributes: {
  },

  edit: props => {
    const [selectedFiles, setSelectedFiles] = useState([]);
    const [errorMessage, setErrorMessage] = useState('');

    const handleFiles = (files) => {
      
      for (let i = 0; i < files.length; i++) {
        if (validateFile(files[i])) {

        } else {
      

      //код продолжается...

Естественно, это вызывает ошибку useState is not defined, но я не знаю, как его импортировать. Когда я пытаюсь использовать const {useState} = require( '@wordpress/element' );, я получаю referenceError: require is not defined; и не знаю, куда вставить import { useState } from '@wordpress/element';

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

Хорошо, мне просто повезло найти ответ. Добавил

const {
    element: {
        useState,
    },
} = wp;

вверху файла, это, похоже, работает, хотя я все еще не понимаю, что происходит.

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

Чтобы включить useState из React в вашем пользовательском блоке Gutenberg, вам нужно правильно импортировать его из библиотеки WordPress. В блоках Gutenberg используется объект wp, который предоставляет доступ ко всем необходимым функциям и элементам. Вот пошаговое решение вашей проблемы.

1. Импортируйте необходимые модули

В самом начале вашего файла, где вы определяете блок, вам нужно извлечь useState из wp.element. Это делается следующим образом:

const {
    element: { useState },
} = wp;

2. Определите блок

Ниже приведен пример того, как ваш блок может выглядеть с использованием useState. Вы можете вставить этот код в соответствующее место в вашем плагине:

wp.blocks.registerBlockType('myblocks/gallery', {
    title: 'Gallery',
    icon: 'my-gallery',
    category: 'common',
    attributes: {},

    edit: (props) => {
        const [selectedFiles, setSelectedFiles] = useState([]);
        const [errorMessage, setErrorMessage] = useState('');

        const handleFiles = (files) => {
            for (let i = 0; i < files.length; i++) {
                if (validateFile(files[i])) {
                    // Логика обработки допустимых файлов
                } else {
                    setErrorMessage('Некорректный файл'); // Пример добавления сообщения об ошибке
                }
            }

            // Другие действия с файлами
            setSelectedFiles(files);
        };

        return (
            <div>
                {/* Ваш JSX-код для блока */}
                <input type="file" onChange={(e) => handleFiles(e.target.files)} multiple />
                {errorMessage && <p>{errorMessage}</p>}
                <div>
                    {/* Здесь вы можете отображать выбранные файлы */}
                    {selectedFiles.map((file, index) => (
                        <p key={index}>{file.name}</p>
                    ))}
                </div>
            </div>
        );
    },

    save: () => {
        return null; // Или любой другой код для сохранения блока
    },
});

3. Пояснение к коду

Импорт модуля: const { element: { useState } } = wp; – это способ получить доступ к useState, который предоставляет функциональный компонент React.
Функция edit: Здесь вы можете использовать состояние с помощью useState для отслеживания выбранных файлов и сообщения об ошибке.
Функция handleFiles: В этой функции вы можете настроить логику обработки загруженных файлов, например, проверять их на допустимость и обновлять состояние.
Возврат JSX: Возвращаемый JSX включает инпут для загрузки файлов и отображение ошибок.

4. Завершение

Теперь ваш блок должен работать без ошибок. Важно понимать, что Gutenberg использует React под капотом, и вы можете использовать основные концепции React, такие как хуки, внутри ваших блоков. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!