/**
|
* WordPress dependencies
|
*/
|
import { __ } from '@wordpress/i18n';
|
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
import { SelectControl, ToggleControl, PanelBody } from '@wordpress/components';
|
|
/**
|
* Styles
|
*/
|
import './editor.scss';
|
|
/**
|
* Edit function for Directory List Block
|
*/
|
export default function Edit({ attributes, setAttributes }) {
|
const blockProps = useBlockProps();
|
|
// Access the localized list types from the global window object
|
const listTypeOptions = window.jvbListTypes ? window.jvbListTypes.map(type => {
|
return {
|
label: type.title,
|
value: type.slug
|
};
|
}) : [];
|
|
// Find the selected list type details
|
const selectedType = window.jvbListTypes ?
|
window.jvbListTypes.find(type => type.slug === attributes.listType) || {}
|
: {};
|
|
return (
|
<div {...blockProps}>
|
<InspectorControls>
|
<PanelBody title={__('List Settings', 'jvb')}>
|
<SelectControl
|
label={__('List Type', 'jvb')}
|
value={attributes.listType}
|
options={listTypeOptions}
|
onChange={(value) => setAttributes({ listType: value })}
|
/>
|
<ToggleControl
|
label={__('Refresh Cache', 'jvb')}
|
help={__('Enable to regenerate the list data on page load', 'jvb')}
|
checked={attributes.refreshCache}
|
onChange={(value) => setAttributes({ refreshCache: value })}
|
/>
|
</PanelBody>
|
</InspectorControls>
|
|
<div className="jvb-list-preview">
|
<h3>{__('Directory List', 'jvb')}</h3>
|
<div className="jvb-list-preview-info">
|
<p><strong>{__('Selected List Type:', 'jvb')}</strong> {selectedType.title}</p>
|
<p><strong>{__('Type:', 'jvb')}</strong> {selectedType.type}</p>
|
{selectedType.links && (
|
<p><strong>{__('Links:', 'jvb')}</strong> {selectedType.links.join(', ')}</p>
|
)}
|
<p><strong>{__('Cache Status:', 'jvb')}</strong>
|
{attributes.refreshCache ?
|
__('Will refresh on load', 'jvb') :
|
__('Using cached data', 'jvb')}
|
</p>
|
</div>
|
<p className="jvb-list-preview-note">
|
{__('This alphabetical list will be rendered on the frontend.', 'jvb')}
|
</p>
|
</div>
|
</div>
|
);
|
}
|
