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
kdsprogrammer 2 weeks 2022-08-02T15:05:38-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse