import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import ControlsRender from '../components/controls-render'; import IframePreview from '../components/iframe-preview'; import SetupWizard from '../components/setup-wizard'; const { plugin_url: pluginUrl, controls_categories: registeredControlsCategories, } = window.VPGutenbergVariables; function renderControls(props) { const { attributes } = props; let { content_source: contentSource } = attributes; // Saved layouts by default displaying Portfolio source. if (contentSource === 'portfolio') { contentSource = ''; } return ( <> <ControlsRender category="content-source" {...props} /> {/* Display all settings once selected Content Source */} {contentSource ? ( <> {Object.keys(registeredControlsCategories).map((name) => { if (name === 'content-source') { return null; } return ( <ControlsRender key={name} category={name} {...props} /> ); })} </> ) : null} </> ); } /** * Block Edit Class. * * @param props */ export default function BlockEdit(props) { const { attributes, setAttributes } = props; const { block_id: blockId, content_source: contentSource, setup_wizard: setupWizard, preview_image_example: previewExample, layout, } = attributes; // Display setup wizard on mount. useEffect(() => { if (!setupWizard && (!blockId || !contentSource)) { setAttributes({ setup_wizard: 'true', }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Display block preview. if (previewExample === 'true') { return ( <div className="vpf-example-preview"> <img src={`${pluginUrl}/assets/admin/images/example-${layout}.png`} alt={`Preview of ${layout} layout`} /> </div> ); } const blockProps = useBlockProps(); return ( <div {...blockProps}> {setupWizard === 'true' ? ( <SetupWizard {...props} /> ) : ( <> <InspectorControls> {renderControls(props)} </InspectorControls> <IframePreview {...props} /> </> )} </div> ); }