GradientPickerControl представляет собой современный компонент WordPress на основе React, позволяющий пользователям настраивать градиенты с гибким выбором цветовой гаммы.
Компонент GradientPickerControl предлагает полноценную интеграцию с тем, что уже предлагает GradientPicker, добавляя возможность задавать заголовок с помощью свойства label. Это экспериментальный компонент, для использования которого применяйте __experimentalGradientPickerControl.
Использование GradientPickerControl
Для начала работы с этим компонентом, достаточно импортировать его из @wordpress/block-editor. Обратите внимание, что он находится на стадии экспериментальных, поэтому префикс __experimental обязателен.
import { __experimentalGradientPickerControl as GradientPickerControl } from '@wordpress/block-editor';Основные параметры
label: текст заголовка, который будет отображаться над градиентом.value: текущее значение градиента, которое должно быть представлено строкой.onChange: функция обратного вызова, срабатывающая при изменении градиента.gradients: массив доступных для выбора градиентов.
Практический пример
Рассмотрим, как можно использовать компонент GradientPickerControl в реальной практике:
import { __experimentalGradientPickerControl as GradientPickerControl } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
const MyGradientPicker = () => {
const [ selectedGradient, setSelectedGradient ] = useState( 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)' );
const gradientOptions = [
{
name: 'Warm Flame',
gradient: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)',
},
{
name: 'Night Fade',
gradient: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
},
{
name: 'Deep Sea',
gradient: 'linear-gradient(135deg, #2b5876 0%, #4e4376 100%)',
}
];
return (
<GradientPickerControl
label="Select a background gradient"
value={ selectedGradient }
gradients={ gradientOptions }
onChange={ setSelectedGradient }
/>
);
};
Примечание: Компонент пока что экспериментальный, и его функционал может изменяться в будущих версиях WordPress.
Заключение
Компонент GradientPickerControl является мощным инструментом для управления градиентами в WordPress, предлагая гибкость и простоту использования для разработчиков, желающих обогатить визуальное представление своих проектов.