import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
import { PanelBody, ToggleControl, Notice, Button } from '@wordpress/components';
|
import { __ } from '@wordpress/i18n';
|
import { useState, useEffect } from '@wordpress/element';
|
import './editor.scss';
|
|
export default function Edit({ attributes, setAttributes }) {
|
const { sectionOrder, showSectionTitles, collapseByDefault } = attributes;
|
const [sections, setSections] = useState([]);
|
|
// Get sections from localized script
|
const allSections = window.jvbFaq?.sections || [];
|
|
// Initialize sections with proper ordering
|
useEffect(() => {
|
if (!allSections.length) return;
|
|
if (sectionOrder.length === 0) {
|
// First time - use default order
|
const orderedSections = allSections.map(section => ({
|
id: section.id,
|
name: section.name,
|
}));
|
setSections(orderedSections);
|
setAttributes({ sectionOrder: orderedSections.map(s => s.id) });
|
} else {
|
// Use saved order, add any new sections at the end
|
const orderedSections = [];
|
const existingIds = new Set(sectionOrder);
|
|
// Add sections in saved order
|
sectionOrder.forEach(id => {
|
const section = allSections.find(s => s.id === id);
|
if (section) {
|
orderedSections.push({ id: section.id, name: section.name });
|
}
|
});
|
|
// Add any new sections that weren't in the saved order
|
allSections.forEach(section => {
|
if (!existingIds.has(section.id)) {
|
orderedSections.push({ id: section.id, name: section.name });
|
}
|
});
|
|
setSections(orderedSections);
|
}
|
}, [allSections, sectionOrder]);
|
|
const moveSection = (index, direction) => {
|
const newSections = [...sections];
|
const newIndex = direction === 'up' ? index - 1 : index + 1;
|
|
if (newIndex < 0 || newIndex >= newSections.length) return;
|
|
// Swap sections
|
[newSections[index], newSections[newIndex]] = [newSections[newIndex], newSections[index]];
|
|
setSections(newSections);
|
setAttributes({ sectionOrder: newSections.map(s => s.id) });
|
};
|
|
const blockProps = useBlockProps({
|
className: 'faq-block-editor',
|
});
|
|
return (
|
<>
|
<InspectorControls>
|
<PanelBody title={__('FAQ Settings', 'jvb')} initialOpen={true}>
|
<ToggleControl
|
label={__('Show Section Titles', 'jvb')}
|
checked={showSectionTitles}
|
onChange={(value) => setAttributes({ showSectionTitles: value })}
|
help={__('Display section names as headings', 'jvb')}
|
/>
|
<ToggleControl
|
label={__('Collapse by Default', 'jvb')}
|
checked={collapseByDefault}
|
onChange={(value) => setAttributes({ collapseByDefault: value })}
|
help={__('Questions start collapsed and expand on click', 'jvb')}
|
/>
|
</PanelBody>
|
|
<PanelBody title={__('Section Order', 'jvb')} initialOpen={false}>
|
<p className="components-base-control__help">
|
{__('Use the arrow buttons to reorder sections', 'jvb')}
|
</p>
|
{sections.length > 0 ? (
|
<div className="faq-section-list">
|
{sections.map((section, index) => (
|
<div key={section.id} className="faq-section-item">
|
<div className="faq-section-controls">
|
<Button
|
icon="arrow-up-alt2"
|
label={__('Move up', 'jvb')}
|
disabled={index === 0}
|
onClick={() => moveSection(index, 'up')}
|
className="faq-section-button"
|
/>
|
<Button
|
icon="arrow-down-alt2"
|
label={__('Move down', 'jvb')}
|
disabled={index === sections.length - 1}
|
onClick={() => moveSection(index, 'down')}
|
className="faq-section-button"
|
/>
|
</div>
|
<span className="faq-section-name">{section.name}</span>
|
</div>
|
))}
|
</div>
|
) : (
|
<Notice status="info" isDismissible={false}>
|
{__('No sections found. Create sections in the FAQ taxonomy.', 'jvb')}
|
</Notice>
|
)}
|
</PanelBody>
|
</InspectorControls>
|
|
<div {...blockProps}>
|
<div className="faq-block-preview">
|
<h3>{__('FAQ Block', 'jvb')}</h3>
|
<p>
|
{__('This block will display FAQs organized by sections.', 'jvb')}
|
</p>
|
{sections.length > 0 ? (
|
<div className="faq-sections-preview">
|
<strong>{__('Section Order:', 'jvb')}</strong>
|
<ol>
|
{sections.map((section) => (
|
<li key={section.id}>{section.name}</li>
|
))}
|
</ol>
|
</div>
|
) : (
|
<Notice status="warning" isDismissible={false}>
|
{__('No sections available. Create sections in the FAQ taxonomy.', 'jvb')}
|
</Notice>
|
)}
|
</div>
|
</div>
|
</>
|
);
|
}
|
