ResizableBox component is not selectable in block editor

Question

Trying to replicate the core/spacer block as a class component but having no success. From my tinkering it seems like spreading useBlockProps() on a wrapper for a ResizeableBox also makes that wrapper/block clickable. Since useBlockProps() is not available with class components I’m wondering how I can get the same experience?

GIF where I compare the core block with the one I’ve created:
enter image description here

This is my test code for edit.js

import { ResizableBox } from 'wordpress user/components';

class Edit extends Component {
  constructor( props ) {
    super( props );
  }

  render() {
    const {
      attributes, 
      setAttributes, 
      isSelected,
    } = this.props;

    const blockStyles = {
      height: attributes.height + 'px'
    };

    return (
      <>
        <ResizableBox
          size={{ height: attributes.height }}
          showHandle={ isSelected }
          onResizeStop={ (event, direction, resize_element, delta) =>
            setAttributes({
              height: parseInt(attributes.height + delta.height)
          }) }
          enable={{
            top: false,
            left: false,
            right: false,
            topLeft: false,
            topRight: false,
            bottom: true,
            bottomLeft: false,
            bottomRight: false
          }}
        >
          <div style={ blockStyles }>
            ..Content of block..
          </div>
        </ResizableBox>
      </>
    );
  }
}

0
INT 1 month 2021-06-30T14:45:39-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse