Можно ли изменить или заменить функцию onChange для поля ввода в панели InspectorControls?

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

Содержание

Вопрос или проблема
Ответ или решение
Решение
Указания и заметки

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

Я пишу плагин и пытаюсь изменить, какой атрибут обновляется при изменении значения поля ввода в панели редактора. Я фильтрую функцию через editor.BlockEdit, используя wp.compose.createHigherOrderComponent. Я могу сделать что-то вроде этого, чтобы добавить в панель ‘размеры’ (отступы и отступы):

return (
  <Fragment>
    <BlockEdit {...props} />
    {isSelected && props.name === "core/paragraph" && (
      <InspectorControls group="dimensions">
        <TextControl 
            label="Пользовательский ввод"
            value={value}          
            onChange={value => setAttribute('myAttribute', value)}
           />
        </InspectorControls>
     )}
  </Fragment>
);

В теории это обновит мой пользовательский атрибут ‘myAttribute’, когда TextControl изменяется. В панели размеров есть существующие TextControl поля, которые обновляют атрибуты style.spacing. Могу ли я фильтровать/встраиваться/изменять каким-либо образом функциональность существующих TextControl onChange, чтобы, скажем, обновлять style.myAttribute вместо стандартного атрибута?

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

Да, действительно, существует возможность изменить или заменить функцию onChange у элемента ввода (input), расположенного в панели InspectorControls, используя концепции высшего порядка компонентов и хуки в экосистеме WordPress. Ваша задача заключается в том, чтобы не только добавить новый элемент управления, но и модифицировать существующие элементы, такие как TextControl, которые обновляют определённые атрибуты.

Решение

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

Вот шаги, которые помогут вам в выполнении этой задачи:

Создание высшего порядка компонента (HOC): Используя wp.compose.createHigherOrderComponent, вы сможете перехватить пропсы и изменить логику onChange непосредственно для TextControl.

const withCustomOnChange = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        const { setAttributes, attributes } = props;

        // Перехватываем onChange для TextControl
        const CustomTextControl = (props) => {
            const { onChange, ...otherProps } = props;
            return (
                <TextControl
                    {...otherProps}
                    onChange={(value) => {
                        // Измените значение атрибута здесь
                        setAttributes({ style: { ...attributes.style, myAttribute: value } });
                        if (onChange) {
                            onChange(value); // Важно вызвать оригинальный onChange
                        }
                    }}
                />
            );
        };

        return (
            <Fragment>
                <BlockEdit {...props} />
                {props.isSelected && props.name === "core/paragraph" && (
                    <InspectorControls group="dimensions">
                        <CustomTextControl
                            label="Custom input"
                            value={attributes.style?.myAttribute || ''}
                        />
                    </InspectorControls>
                )}
            </Fragment>
        );
    };
}, 'withCustomOnChange');

// Используйте HOC в вашем плагине
addFilter('editor.BlockEdit', 'my-plugin/custom-on-change', withCustomOnChange);

Адаптация к существующим TextControl: Как вы заметили, в панели dimensions уже есть элементы управления, которые работают с атрибутами стиля. Чтобы модифицировать их поведение, необходимо подменить их тем же способом, что и описано выше.

Указания и заметки

Проверяйте зависимости: Убедитесь, что ваш код учитывает совместимость с другими надстройками и плагинами. Возможны конфликты, если другие плагины будут пытаться модифицировать те же компоненты.
Тестирование: Проверьте функциональность на различных версиях WordPress и различных браузерах, чтобы убедиться в стабильности вашего решения.
Документация и комментарии: Включите подробные комментарии и пояснения к вашему коду, особенно если вы работаете в команде или планируете делиться им с сообществом.

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