104 lines
2.1 KiB
JavaScript
104 lines
2.1 KiB
JavaScript
|
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>
|
||
|
|
);
|
||
|
|
}
|