Add color settings example block

Signed-off-by: Souptik Datta <[email protected]>

example/src/blocks/color-settings-example/block.json

@@ -0,0 +1,18 @@
+{
+	"name": "example/color-settings-example",
+	"title": "Color Settings Component Example",
+    "description": "Example Block to show the Color settings component",
+    "icon": "smiley",
+    "category": "common",
+    "example": {},
+    "supports": {
+        "html": false
+    },
+    "attributes": {
+        "color": {
+            "type": "string"
+        }
+    },
+    "variations": [],
+	"editorScript": "file:./index.js"
+}

example/src/blocks/color-settings-example/edit.js

@@ -0,0 +1,40 @@
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+
+import { ColorSetting } from '@10up/block-components';
+
+export const BlockEdit = (props) => {
+	const {
+		attributes: { color },
+		setAttributes
+	} = props;
+
+	const colors = [
+		{ name: 'red', color: '#f00' },
+        { name: 'white', color: '#fff' },
+        { name: 'blue', color: '#00f' },
+	];
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Post Picker', 'example' ) }>
+				<ColorSetting
+					label={ __( 'Color Setting - Label', 'example' ) }
+					help={ __( 'Color Setting - Help Text', 'example' ) }
+					colors={ colors }
+					value={ color }
+					onChange={ ( val ) => setAttributes( { color: val } ) }
+				/>
+				</PanelBody>
+			</InspectorControls>
+			<ColorSetting
+				label={ __( 'Color Setting - Label', 'example' ) }
+				help={ __( 'Color Setting - Help Text', 'example' ) }
+				colors={ colors }
+				value={ color }
+				onChange={ ( val ) => setAttributes( { color: val } ) }
+			/>
+		</>
+	)
+}

example/src/blocks/color-settings-example/index.js

@@ -0,0 +1,8 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+import { BlockEdit } from './edit';
+
+registerBlockType( metadata, {
+    edit: BlockEdit,
+    save: () => null
+} );