Main

src/ColorSelector/ColorSelector.jsx

+import {ColorPicker} from "@wordpress/components";
+import {useState} from "react";
+
+export default function ColorSelector({label, onChange, value, enableAlpha = true, returnFormat = 'rgb'}) {
+
+	const [isPopupActive, setIsPopupActive] = useState(false);
+
+	const handleColorChange = function (newColor) {
+		let color = newColor;
+		if (returnFormat === 'hex') {
+			color = newColor.hex;
+		} else if (returnFormat === 'hsv') {
+			color = newColor.hsv;
+		} else if (returnFormat === 'hsl') {
+			color = newColor.hsl;
+		} else if (returnFormat === 'rgb') {
+			if (enableAlpha === true) {
+				color = `rgba(${newColor.rgb.r}, ${newColor.rgb.g}, ${newColor.rgb.b}, ${newColor.rgb.a})`;
+			} else {
+				color = `rgb(${newColor.rgb.r}, ${newColor.rgb.g}, ${newColor.rgb.b})`;
+			}
+		}
+
+
+		onChange(color);
+	}
+
+	return (
+		<div className='fi-field-wrapper'>
+			<div className='fi-field-label-wrapper'>
+				<span className='fi-field-label'>{label}</span>
+			</div>
+			<div className='fi-field-buttons-wrapper fi-colorpicker-wrapper fi-input-with-columns' style={{
+				width: '216px', //Width of the ColorPicker element
+				border: '1px solid #8c8f94',
+				borderRadius: '0px',
+			}}>
+				<div className='fi-color-preview' style={{
+					background: value,
+					height: '32px',
+					width: '100%'
+				}}
+					 onClick={() => {
+						 setIsPopupActive((isPopupActive) => !isPopupActive)
+					 }}
+				></div>
+			</div>
+			{isPopupActive &&
+				<div className='fi-field-buttons-wrapper fi-colorpicker-wrapper'>
+					<ColorPicker
+						enableAlpha={enableAlpha}
+						color={value}
+						onChangeComplete={handleColorChange}
+					/>
+				</div>}
+		</div>
+	);
+}