From 18c0272ecba7ed60dba95fcd707ae1089b64bbb2 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Wed, 1 Jan 2025 16:18:39 +0530
Subject: [PATCH] Block Editor: Add README for the BlockColorStyleSelector
 component

---
 .../components/color-style-selector/README.md | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 packages/block-editor/src/components/color-style-selector/README.md

diff --git a/packages/block-editor/src/components/color-style-selector/README.md b/packages/block-editor/src/components/color-style-selector/README.md
new file mode 100644
index 0000000000000..a9a7bcb5573a5
--- /dev/null
+++ b/packages/block-editor/src/components/color-style-selector/README.md
@@ -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
\ No newline at end of file