@wordpress/block-editor
Version:
103 lines (83 loc) • 3.06 kB
Markdown
# PanelColorSettings
`PanelColorSettings` is a React component that renders a UI for managing various color settings.
It is essentially a wrapper around the `PanelColorGradientSettings` component, but specifically disables the gradient features.
## Usage
```jsx
/**
* External dependencies
*/
import { useState } from 'react';
/**
* WordPress dependencies
*/
import { PanelColorSettings } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
// ...
const MyPanelColorSettings = () => {
const [ textColor, setTextColor ] = useState( { color: '#000' } );
const [ backgroundColor, setBackgroundColor ] = useState( {
color: '#fff',
} );
const [ overlayTextColor, setOverlayTextColor ] = useState( {
color: '#000',
} );
const [ overlayBackgroundColor, setOverlayBackgroundColor ] = useState( {
color: '#eee',
} );
return (
<PanelColorSettings
__experimentalIsRenderedInSidebar
title={ __( 'Color' ) }
colorSettings={ [
{
value: textColor.color,
onChange: setTextColor,
label: __( 'Text' ),
},
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __( 'Background' ),
},
{
value: overlayTextColor.color,
onChange: setOverlayTextColor,
label: __( 'Submenu & overlay text' ),
},
{
value: overlayBackgroundColor.color,
onChange: setOverlayBackgroundColor,
label: __( 'Submenu & overlay background' ),
},
] }
/>
);
};
/// ...
<MyPanelColorSettings />;
```
## Props
The component accepts the following props:
### colorSettings
A user-provided set of color settings.
- Type: `Array`
- Required: No
Colors settings are provided as an array of objects with the following schema:
| Property | Description | Type |
| -------- | --------------------------------- | -------- |
| value | The current color of the setting | string |
| onChange | Callback on change of the setting | Function |
| label | Label of the setting | string |
Additionally, the following `PanelColorGradientSettings` props are supported and directly passed down to the underlying `PanelColorGradientSettings` instance:
- `className` - added to the underlying `ToolsPanel` instance.
- `colors` - array of colors to be used.
- `gradients` - not recommended to be used since `PanelColorSettings` resets it.
- `disableCustomColors` - whether addition of custom colors is enabled
- `disableCustomGradients` - not recommended to be used since `PanelColorSettings` sets it.
- `children` - displayed below the underlying `PanelColorGradientSettings` instance.
- `settings` - not recommended to be used, since `PanelColorSettings` builds it from the `colorSettings` prop.
- `title` - title of the underlying `ToolsPanel`.
- `showTitle` - whether to show the title of the `ToolsPanel`.
- `__experimentalIsRenderedInSidebar`
- `enableAlpha` - whether to enable setting opacity when specifying a color.
Please refer to the `PanelColorGradientSettings` component for more information.