## Blocks – any way to have editor honor width percentages on child blocks?

Question

I’m working on some custom blocks for a theme, and I have the following edit code to create a column that goes inside a flex container:

function EditComponent({ attributes, setAttributes }) {
const blockProps = useBlockProps({});
const innerBlockProps = useInnerBlocksProps(blockProps);
return (
<>
<InspectorControls>
<PanelBody title="Width" initialOpen={false}>
<PanelRow>
<UnitControl
value={attributes.width}
label="Column Width"
onChange={(val) => setAttributes({ width: val })}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div
{...innerBlockProps}
style={{
width: attributes.width,
}}
></div>
</>
);
}


This works fine if I set the column width in an absolute value like rem or px. However, if I try to set width in percentage, it breaks (only in the editor) because the editor is adding a wrapper width class .block-editor-block-list__block between the column and its parent. Is there anything I can do to either remove this wrapper or pass the width value up to it so I can get a correct layout in the editor? Thanks.

0
4 months 2022-08-02T15:05:38-05:00 0 Answers 0 views 0