Компонент withFilters в WordPress: руководство с примерами

Главная - WordPress Codex - Компонент withFilters в WordPress: руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент withFilters — это часть Native Gutenberg Extensibility и представляет собой высокоуровневый компонент (Higher-Order Component, HOC) в React, позволяющий добавлять внешне управляемую возможность фильтрации для компонента. Этот инструмент особенно полезен для разработчиков плагинов WordPress, так как он позволяет расширять и изменять функциональность компонента без необходимости редактировать его исходный код.

Основы использования withFilters

Компонент withFilters требует один аргумент — имя хука (hookName). Это строка, которая связывает компонент с конкретным фильтром. С помощью метода addFilter из WordPress можно добавлять или изменять содержимое компонента, связанного с этим именем хука. withFilters возвращает функцию, которая используется для создания компонента с фильтрацией.

Пример 1: Добавление компонента с помощью withFilters

В этом примере создадим базовый компонент MyComponent, затем добавим к нему новый компонент ComponentToAppend, используя addFilter и withFilters.

Шаг 1: Определение базового компонента

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

const MyComponent = ({ title }) => <h1>{title}</h1>;

Шаг 2: Создание компонента для добавления

const ComponentToAppend = () => <div>Добавленный компонент</div>;

Шаг 3: Определение функции, добавляющей компонент через фильтр

Функция withComponentAppended будет использоваться для добавления компонента ComponentToAppend к MyComponent.

function withComponentAppended(FilteredComponent) {
    return (props) => (
        <>
            <FilteredComponent {...props} />
            <ComponentToAppend />
        </>
    );
}

Шаг 4: Настройка фильтра

Теперь добавим фильтр, используя addFilter. Это позволит объединить withComponentAppended с именем хука 'MyHookName'.

addFilter(
    'MyHookName',
    'my-plugin/with-component-appended',
    withComponentAppended
);

Шаг 5: Создание компонента с фильтром

Теперь мы можем обернуть MyComponent в withFilters и передать имя хука, чтобы связать его с настройками фильтрации.

const MyComponentWithFilters = withFilters('MyHookName')(MyComponent);

Пример 2: Изменение пропсов компонента с помощью withFilters

Помимо добавления элементов, withFilters позволяет также изменять пропсы компонента. В этом примере мы создадим компонент MyComponent, который выводит title и hint. Затем с помощью фильтра изменим значение hint.

Шаг 1: Определение базового компонента

const MyComponent = ({ hint, title }) => (
    <>
        <h1>{title}</h1>
        <p>{hint}</p>
    </>
);

Шаг 2: Создание функции для изменения пропса hint

Функция withHintOverridden перезапишет значение пропса hint, передавая новое значение.

function withHintOverridden(FilteredComponent) {
    return (props) => (
        <FilteredComponent {...props} hint="Перезаписанная подсказка" />
    );
}

Шаг 3: Настройка фильтра для изменения пропса

Теперь добавим фильтр, который будет изменять hint для компонента MyComponent.

addFilter(
    'MyHookName',
    'my-plugin/with-hint-overridden',
    withHintOverridden
);

Шаг 4: Создание компонента с фильтром

Теперь оборачиваем MyComponent в withFilters с использованием имени хука 'MyHookName'.

const MyComponentWithFilters = withFilters('MyHookName')(MyComponent);

Теперь компонент MyComponentWithFilters отобразит текст заголовка и перезаписанный текст для hint.

Дополнительные советы по использованию withFilters

  1. Управление несколькими фильтрами: Один и тот же компонент может быть расширен несколькими фильтрами. Это достигается добавлением нескольких вызовов addFilter с одним и тем же hookName. Последовательность фильтров управляется приоритетом в addFilter.
  2. Использование для разных целей: withFilters можно использовать для создания виджетов, модификации интерфейсов, добавления дополнительных данных в компонент, создания функциональных перехватчиков для конкретных пользователей и т. д.
  3. Управление доступом и проверка типов: Если компонент используется с фильтрами в разных плагинах, рекомендуется проверять передаваемые данные для предотвращения конфликтов между фильтрами.

Полный пример с несколькими фильтрами

В следующем примере мы объединим два фильтра: один добавляет новый компонент, а другой изменяет текстовую подсказку (hint).

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

// Базовый компонент
const MyComponent = ({ title, hint }) => (
    <>
        <h1>{title}</h1>
        <p>{hint}</p>
    </>
);

// Компонент для добавления
const AdditionalContent = () => <div>Дополнительный контент</div>;

// Функция для добавления компонента
function withAdditionalContent(FilteredComponent) {
    return (props) => (
        <>
            <FilteredComponent {...props} />
            <AdditionalContent />
        </>
    );
}

// Функция для изменения текста подсказки
function withModifiedHint(FilteredComponent) {
    return (props) => (
        <FilteredComponent {...props} hint="Измененная подсказка" />
    );
}

// Настройка фильтров
addFilter('ExampleHook', 'example-plugin/with-additional-content', withAdditionalContent);
addFilter('ExampleHook', 'example-plugin/with-modified-hint', withModifiedHint);

// Компонент с фильтрами
const MyComponentWithFilters = withFilters('ExampleHook')(MyComponent);

Заключение

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

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg