=jakevan complete

Jake Vanderwerf

2026-05-31 d7e7d248cbe41cd7a9ef9c2fb022b6c4831f99a3

 src/faq/edit.js

New file
@@ -0,0 +1,145 @@
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>
      </>
   );
}