82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|