48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
|
import { useBlockProps, InnerBlocks, useInnerBlocksProps, InspectorControls } from '@wordpress/block-editor';
|
|
import { PanelBody, __experimentalUnitControl as UnitControl } from '@wordpress/components';
|
|
import './editor.scss';
|
|
|
|
export default function Edit(props) {
|
|
const { attributes, setAttributes } = props;
|
|
const { maxWidth = '100%' } = attributes; // Default value for maxWidth if not set
|
|
|
|
// Function to handle the change of maxWidth
|
|
const handleMaxWidthChange = (value) => {
|
|
setAttributes({ maxWidth: value });
|
|
};
|
|
|
|
const blockProps = useBlockProps(); // Standard block props for the child block
|
|
const innerBlocksProps = useInnerBlocksProps(blockProps); // Using blockProps for inner block props
|
|
|
|
// Correctly define style as an object
|
|
const style = {
|
|
maxWidth: maxWidth,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Inspector Controls for maxWidth */}
|
|
<InspectorControls>
|
|
<PanelBody title={__('Max Width Settings', 'lcp')} initialOpen={true}>
|
|
<div className="max-width-settings">
|
|
{/* UnitControl to adjust maxWidth value */}
|
|
<UnitControl
|
|
onChange={handleMaxWidthChange} // Function to handle change
|
|
value={maxWidth} // Current value of maxWidth
|
|
defaultUnit="px" // Optional: default unit for UnitControl
|
|
/>
|
|
</div>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
|
|
{/* Main block content */}
|
|
<div {...innerBlocksProps} style={style}>
|
|
|
|
|
|
<InnerBlocks {...innerBlocksProps} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|