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


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 (
        <PanelBody title="Width" initialOpen={false}>
              label="Column Width"
              onChange={(val) => setAttributes({ width: val })}
          width: attributes.width,

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.

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

Leave an answer