Wednesday, August 3, 2022
HomeWordPress DevelopmentBlocks - any approach to have editor honor width percentages on little...

Blocks – any approach to have editor honor width percentages on little one blocks?


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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments