PanelColorGradientSettings — это важный инструмент для разработчиков блоков в WordPress, который комбинирует элементы управления цветами и градиентами, оборачивая их в панель PanelBody. Это упрощает создание гибких и интерактивных интерфейсов для настройки цветов и градиентов ваших блоков.
Этот компонент обеспечивает удобный интерфейс для выбора и применения цветов и градиентов в редакторе блоков WordPress. PanelColorGradientSettings предоставляет возможности, которые отлично подойдут для кастомизации контента.
Регистрация и настройка блока
Начнем с регистрации нового блока, который будет использовать PanelColorGradientSettings для настройки цветовой схемы:
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
__experimentalPanelColorGradientSettings as PanelColorGradientSettings
} from '@wordpress/block-editor';
import './editor.scss';
const BLOCKNAME = "color-gradient-settings-component";
const BLOCKPATH = `wp-gb/${BLOCKNAME}`;
registerBlockType(BLOCKPATH, {
apiVersion: 2,
title: __(BLOCKNAME.replace("-", " ").toUpperCase(), 'wp-gb'),
description: __('A block with color and gradient settings', 'wp-gb'),
category: 'design',
icon: 'art',
attributes: {
colorValue: {
type: "string",
default: '#ff9800'
},
gradientValue: {
type: "string",
default: 'linear-gradient(90deg, #ff9800 0%, #ffc107 100%)'
},
},
edit: ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<PanelColorGradientSettings
title={__("Color and Gradient Settings", 'wp-gb')}
settings={[{
colorValue: attributes.colorValue,
gradientValue: attributes.gradientValue,
colors: [
{ name: 'orange', color: '#ff9800' },
{ name: 'amber', color: '#ffc107' },
{ name: 'yellow', color: '#ffeb3b' },
],
gradients: [
{
name: 'Warm sunset',
gradient: 'linear-gradient(90deg, #ff9800 0%, #ffc107 100%)',
slug: 'warm-sunset',
},
{
name: 'Bright yellow',
gradient: 'linear-gradient(90deg, #ffeb3b 0%, #ffffff 100%)',
slug: 'bright-yellow',
}
],
label: __("Select color or gradient", 'wp-gb'),
onColorChange: (newValue) => setAttributes({ colorValue: newValue }),
onGradientChange: (newValue) => setAttributes({ gradientValue: newValue }),
}]}
>
<p>{__('Customize your block with colors and gradients!', 'wp-gb')}</p>
</PanelColorGradientSettings>
</div>
);
},
save: () => {
return null;
},
});В приведенном примере у нас есть блок с двумя атрибутами: colorValue и gradientValue. Это основные параметры для управления элементами PanelColorGradientSettings, которые применяемы к панелям выбора цветов и градиентов.
Также мы создали два примера градиентов — «Warm sunset» и «Bright yellow», которые делают интерфейс более живым.
Важно:
__experimentalPanelColorGradientSettingsявляется экспериментальной особенностью. Его реализация и доступность могут изменяться в будущих версиях WordPress.
Заключение
Компонент PanelColorGradientSettings — это мощный инструмент для создания интерактивных и визуально богатых блоков. Он упрощает управление цветами и градиентами, облегчая процесс настройки пользователям. Это помогает сделать ваш блок привлекательным и более функциональным.
