В мире разработки на WordPress, компонент GradientPickerPanel предлагает разработчикам гибкость в настройке и выборе градиентов через удобный интерфейс панельного типа. Это идеальный инструмент для создания впечатляющих цветовых переходов, с интуитивно понятным контролем над градиентами, упрощая процесс их настройки.
GradientPickerPanel — это React-компонент, обернутый в PanelBody, позволяющий пользователям выбирать и настраивать градиенты в WordPress. Он экспериментален и импортируется как __experimentalGradientPickerPanel. Этот компонент улучшает стандартный GradientPicker, добавляя панель для дополнительного контекста и настройки.
Импорт и базовая установка
Чтобы начать использовать GradientPickerPanel, вам необходимо импортировать его из @wordpress/block-editor. Учтите, что данный компонент считается экспериментальным и его API может изменяться.
import { __experimentalGradientPickerPanel } from '@wordpress/block-editor';После импорта вы можете использовать GradientPickerPanel в вашем компоненте следующим образом:
function MyCustomComponent() {
return (
<__experimentalGradientPickerPanel
title="Выберите градиент"
initialValue="linear-gradient(90deg, red, yellow)"
onChange={ ( gradient ) => console.log( 'Градиент был изменён!', gradient ) }
disableCustomGradients={ false }
/>
);
}Параметры компонента
- title: Название панели. Может быть строкой или элементом React.
- initialValue: начальное значение градиента. Принимает строку с CSS-градиентом.
- onChange: Функция обратного вызова, вызывается при изменении градиента.
- disableCustomGradients: Булево значение, указывающее, можно ли пользователю добавлять собственные градиенты.
Практическое применение
Использование GradientPickerPanel позволяет создавать сложные и уникальные пользовательские интерфейсы с минимальным кодом. Это удобно как для дизайнеров, так и для разработчиков, поскольку компоненты можно легко интегрировать в пользовательские блоки WordPress.
Использование useState для хранения выбранного градиента:
import { useState } from 'react';
import { __experimentalGradientPickerPanel } from '@wordpress/block-editor';
function GradientSelector() {
const [ selectedGradient, setSelectedGradient ] = useState('linear-gradient(90deg, blue, green)');
return (
<__experimentalGradientPickerPanel
title="Настройте свой градиент"
initialValue={ selectedGradient }
onChange={ setSelectedGradient }
disableCustomGradients={ true }
/>
);
}В этом примере выбранный градиент сохраняется в состоянии компонента, и каждый раз, когда изменяется градиент, состояние обновляется.
Обратите внимание: компонент
GradientPickerPanelв стадии эксперимента. Используйте стабильную версию в производственном окружении.
Заключение
Компонент GradientPickerPanel является мощным инструментом для разработчиков WordPress, ищущих простой способ внедрения настраиваемых градиентов. Имея интуитивный интерфейс и гибкость в настройке, он идеально подходит для создания современных и привлекательных UI.
