46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||
import { ToggleControl } from '@wordpress/components';
|
||
import './editor.scss';
|
||
|
||
export default function Edit({ attributes, setAttributes }) {
|
||
const { hasSidecontent } = attributes;
|
||
|
||
// Block props
|
||
const blockProps = useBlockProps();
|
||
|
||
// Custom template logic based on hasSidecontent
|
||
const template = [
|
||
hasSidecontent && ['lcp/sidecontent'], // Only include lcp/sidecontent if the toggle is true
|
||
['lcp/main-area'], // Always include lcp/main-area
|
||
].filter(Boolean); // Filter out falsey values (e.g., undefined when hasSidecontent is false)
|
||
|
||
// Render appender logic to handle block insertion
|
||
const renderAppender = () => {
|
||
return <InnerBlocks.ButtonBlockAppender />;
|
||
};
|
||
|
||
return (
|
||
<div {...blockProps}>
|
||
{/* Inspector Controls: Add a toggle for the `hasSidecontent` attribute */}
|
||
<InspectorControls>
|
||
<ToggleControl
|
||
label={__('Include Side Content', 'lcp-viewport')}
|
||
checked={hasSidecontent}
|
||
onChange={(value) => setAttributes({ hasSidecontent: value })}
|
||
/>
|
||
</InspectorControls>
|
||
|
||
<p>
|
||
{__('Lcp Viewport – hello from the editor!', 'lcp-viewport')}
|
||
</p>
|
||
|
||
{/* Render the InnerBlocks with conditional template */}
|
||
<InnerBlocks
|
||
template={template} // Use the template logic here
|
||
renderAppender={renderAppender} // Custom appender logic
|
||
/>
|
||
</div>
|
||
);
|
||
}
|