Skip to content

Commit

Permalink
Block Editor: Add README for the BlockColorStyleSelector component
Browse files Browse the repository at this point in the history
  • Loading branch information
himanshupathak95 committed Jan 1, 2025
1 parent ed1dc8b commit 18c0272
Showing 1 changed file with 52 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# ColorStyleSelector

The ColorStyleSelector component provides a dropdown interface for selecting text and background colors in the block editor. It renders as a toolbar button that, when clicked, reveals a color selection interface for modifying block styles.

## Usage

```jsx
import { BlockColorsStyleSelector } from '@wordpress/block-editor';
import { ColorPalette } from '@wordpress/components';

const MyColorSelectorComponent = () => (
<BlockColorsStyleSelector
TextColor={TextColorComponent}
BackgroundColor={BackgroundColorComponent}
>
<ColorPalette
colors={colors}
onChange={(color) => setAttributes({ textColor: color })}
/>
</BlockColorsStyleSelector>
);
```

## Props

### TextColor

Text color component that wraps icon.

- Type: `Element`
- Required: Yes

### BackgroundColor

Background color component that wraps icon.

- Type: `Element`
- Required: Yes

### children

The content to be displayed within the dropdown panel when the color selector button is clicked.

- Type: `Element`
- Required: No

### className

Class name for component.

- Type: `string`
- Required: No

0 comments on commit 18c0272

Please sign in to comment.