I am engaged on some customized blocks for a theme, and I’ve the next edit code to create a column that goes inside a flex container:
perform EditComponent({ attributes, setAttributes }) {
const blockProps = useBlockProps({});
const innerBlockProps = useInnerBlocksProps(blockProps);
return (
<>
<InspectorControls>
<PanelBody title="Width" initialOpen={false}>
<PanelRow>
<UnitControl
worth={attributes.width}
label="Column Width"
onChange={(val) => setAttributes({ width: val })}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div
{...innerBlockProps}
model={{
width: attributes.width,
}}
></div>
</>
);
}
This works nice if I set the column width in an absolute worth like rem or px. Nonetheless, if I attempt to set width in share, it breaks (solely within the editor) as a result of the editor is including a wrapper width class .block-editor-block-list__block between the column and its mother or father. Is there something I can do to both take away this wrapper or move the width worth as much as it so I can get an accurate format within the editor? Thanks.