forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Editor: Add README for the BlockColorStyleSelector component
- Loading branch information
1 parent
ed1dc8b
commit 18c0272
Showing
1 changed file
with
52 additions
and
0 deletions.
There are no files selected for viewing
52 changes: 52 additions & 0 deletions
52
packages/block-editor/src/components/color-style-selector/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |