Initial

react/components/iconselectcontrol.js

@@ -0,0 +1,81 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import IconSelectControl from './IconSelectControl'; // Import the new component
+import './editor.scss';
+
+export default function Edit(props) {
+    const { attributes, setAttributes } = props;
+    const { type, popUpId, buttonText, iconSvgId, iconSvgPath } = attributes; // iconSvgId holds the UUID and iconSvgPath holds the SVG path
+    const [popups, setPopups] = useState([]);
+    const [icons, setIcons] = useState([]); // To hold the icon data
+
+    // Fetch published popups (lcp-popup CPT)
+    useEffect(() => {
+        const fetchPopups = async () => {
+            const response = await fetch('/wp-json/wp/v2/lcp-popup');
+            const data = await response.json();
+            setPopups(data);
+        };
+        fetchPopups();
+    }, []);
+
+    // Fetch icon data from the JSON source (local or remote)
+    useEffect(() => {
+        const fetchIcons = async () => {
+            // Assuming the icon data is in a file called 'icons.json'
+            const response = await fetch('/path/to/icons.json');
+            const iconData = await response.json();
+            setIcons(iconData); // Set the fetched icon data
+        };
+        fetchIcons();
+    }, []); 
+
+    // Handle icon selection from dropdown
+    const handleIconChange = (selectedIconId) => {
+        const selectedIcon = icons.find(icon => icon.uuid === selectedIconId);
+
+        if (selectedIcon) {
+            setAttributes({
+                iconSvgId: selectedIconId,
+                iconSvgPath: selectedIcon.path
+            });
+        }
+    };
+
+    return (
+        <>
+            <InspectorControls>
+                <PanelBody title={__("Popup Settings")}>
+                    <SelectControl
+                        label={__("Popup")}
+                        value={popUpId}
+                        options={popups.map((popup) => ({
+                            label: popup.title.rendered,
+                            value: popup.id,
+                        }))}
+                        onChange={(value) => setAttributes({ popUpId: value })}
+                    />
+                    <TextControl
+                        label={__("Button Text")}
+                        value={buttonText}
+                        onChange={(value) => setAttributes({ buttonText: value })}
+                    />
+                    {/* Pass the icons array to the IconSelectControl component */}
+                    <IconSelectControl
+                        label={__("Icon")}
+                        value={iconSvgId}
+                        onChange={handleIconChange}
+                        icons={icons} // Passing the icons data here
+                    />
+                </PanelBody>
+            </InspectorControls>
+            <div {...useBlockProps()}>
+                <div className="button-container">
+                    <span>{buttonText}</span>
+                </div>
+            </div>
+        </>
+    );
+}