ColorEdit — это экспериментальный React-компонент WordPress, расширяющий возможности стандартной палитры цветов. Он добавляет новые опции и улучшает настройку цветовой палитры. Этот инструмент предназначен для разработчиков, стремящихся наладить более гибкое управление цветами в своих темах и плагинах.
Основы использования ColorEdit
Компонент ColorEdit предоставляет дополнительные возможности работы с цветовой палитрой, по сравнению с базовой ColorPalette. Самым важным является то, что он позволяет использовать непреобразуемые цветовые слеги благодаря свойству immutableColorSlugs.
Примечание:
ColorEdit— это экспериментальный компонент, поэтому для его импорта пользуйтесь__experimentalColorEdit.
Пример использования ColorEdit
Рассмотрим простой пример использования ColorEdit в блоке редактора.
import { __experimentalColorEdit as ColorEdit } from '@wordpress/block-editor';
function MyCustomColorPicker() {
const colors = [
{ name: 'Красный', color: '#f00', slug: 'red' },
{ name: 'Зеленый', color: '#0f0', slug: 'green' },
{ name: 'Синий', color: '#00f', slug: 'blue' },
];
return (
<ColorEdit
colors={colors}
label="Выберите цвет"
disableCustomColors={false}
onChange={(color) => console.log('Выбранный цвет:', color)}
immutableColorSlugs={['red']}
/>
);
}
export default MyCustomColorPicker;Параметры компонента
Все параметры ColorEdit играют важную роль в его функциональности. Вот их основные детали:
colors— массив, содержащий объекты цветов с их названием, HEX-значением и slug.label— строка, задающая текст для метки цветовой палитры.disableCustomColors— логическое значение, которое приtrueограничивает пользовательский выбор только предложенными цветами.onChange— функция обратного вызова, которая срабатывает при изменении выбранного цвета. Она получает в качестве параметра выбраное значение цвета.immutableColorSlugs— массив строк, содержащий slug’и, цвета которых нельзя изменить.
Заключение
Компонент ColorEdit обеспечивает развитую цветовую палитру, способную удовлетворить потребности сложных задач в WordPress. Его экспериментальная природа требует осторожного обращения, однако возможности, которые он предоставляет, стоят внимания.
