Unfinished support for updating attributes

blocks/components/LCPGridColorRender.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
+import { Popover, ColorPicker } from '@wordpress/components';
 
 // AG-Grid Cell Renderer Component
 const LCPGridColorRender = (props) => {
     const [color, setColor] = useState(props.value || ''); // Get the color value from the cell data
+    const [isPopoverVisible, setPopoverVisible] = useState(false); // To toggle the visibility of the Popover
 
     useEffect(() => {
         // Update color if the value from AG-Grid changes
@@ -11,18 +13,44 @@ const LCPGridColorRender = (props) => {
         }
     }, [props.value]); // Dependency on props.value so it updates when the cell value changes
 
+    // Handle the color change from the color picker
+    const handleColorChange = (newColor) => {
+        setColor(newColor);
+        // Optionally, update the cell value in AG-Grid here
+        if (props.setValue) {
+            props.setValue(newColor);
+        }
+    };
+
     return (
-        <div 
-            style={{
-                width: '30px', 
-                height: '30px', 
-                backgroundColor: color, 
-                border: '1px solid #000',
-                margin: '0 auto'
-            }}
-        />
+        <div>
+            {/* Color square */}
+            <div
+                onClick={() => setPopoverVisible(!isPopoverVisible)} // Toggle popover visibility on click
+                style={{
+                    width: '30px',
+                    height: '30px',
+                    backgroundColor: color,
+                    border: '1px solid #000',
+                    margin: '0 auto',
+                    cursor: 'pointer',
+                }}
+            />
+            
+            {/* Popover for color picker */}
+            {isPopoverVisible && (
+                <Popover
+                    position="bottom center"
+                    onClose={() => setPopoverVisible(false)} // Close popover when clicking outside
+                >
+                    <ColorPicker
+                        color={color}
+                        onChangeComplete={(value) => handleColorChange(value.hex)} // Update color on change
+                    />
+                </Popover>
+            )}
+        </div>
     );
 };
 
 export default LCPGridColorRender;
-