1

I'm trying to add two ResizableBox components to my Gutenberg block(top / bottom) There is also two RangeControl options that control the ResizableBox component. My idea is that the user can drag the ResizableBox component or use the RangeControl sliders. The sliders also show the exact pixel amount of the ResizableBox.

There are two problems that do not work:

1. The functionality works all attributes & state values get updated correctly but if I use the RangeControls the ResizableBox does not resize. + When I refresh the page ResizableBox resets but RangeControl saves the correct state.

2. Somehow the size={{ spacerTop }} attribute on ResizableBox does not work it takes it's initial height from minHeight={20}. But I have specified in my attributes a default height of 100.

I can't figure out how to make this work. I have shortened my code to be relative to my question. My block has more code in it.

In the core spacer block, they use const [ inputHeightValue, setInputHeightValue ] = useState( height );But i dont know hot to implement it.

Linkt to core/spacer block https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/spacer/edit.js

class BlockEdit extends Component {
    state = {
        spacerTopValue: this.props.attributes.spacerTop,
        spacerBottomValue: this.props.attributes.spacerBottom,
    }
    render() {
        const { attributes, setAttributes, isSelected, toggleSelection, instanceId } = this.props
        const { spacerTop, spacerBottom } = attributes
        const id = `block-spacer-height-input-${instanceId}`
        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody title="Layout">
                        <RangeControl
                            label="Top"
                            id={id}
                            initialPosition={this.state.spacerTopValue}
                            min={20}
                            max={600}
                            step={20}
                            allowReset={false}
                            onChange={(value) => {
                                let spacerHeight = parseInt(value, 10);
                                this.setState({ spacerTopValue: spacerHeight })
                                setAttributes({ spacerTop: spacerHeight });
                            }}
                            value={this.state.spacerTopValue}
                        />
                        <RangeControl
                            label="Bottom"
                            id={id}
                            initialPosition={this.state.spacerBottomValue}
                            min={20}
                            max={600}
                            step={20}
                            allowReset={false}
                            onChange={(value) => {
                                let spacerHeight = parseInt(value, 10);
                                this.setState({ spacerBottomValue: spacerHeight })
                                setAttributes({ spacerBottom: spacerHeight });
                            }}
                            value={this.state.spacerBottomValue}
                        />
                    </PanelBody>
                </InspectorControls>
                <ResizableBox
                    className={classnames('block-library-spacer__resize-container space--top', { 'is-selected': isSelected, })}
                    size={{ spacerTop, }}
                    minHeight={20}
                    maxHeight={600}
                    enable={{
                        top: true,
                        right: false,
                        bottom: false,
                        left: false,
                        topRight: false,
                        bottomRight: false,
                        bottomLeft: false,
                        topLeft: false,
                    }}
                    onResizeStop={(event, direction, elt, delta) => {
                        toggleSelection(true);
                        setAttributes({ spacerTop: parseInt(spacerTop + delta.height, 10) });
                        this.setState({ spacerTopValue: parseInt(spacerTop + delta.height, 10) });
                    }}
                    onResizeStart={() => { toggleSelection(false); }}
                />
                <ResizableBox
                    className={classnames('block-library-spacer__resize-container space--bottom', { 'is-selected': isSelected, })}
                    size={{ spacerBottom, }}
                    minHeight={20}
                    maxHeight={600}
                    enable={{
                        top: false,
                        right: false,
                        bottom: true,
                        left: false,
                        topRight: false,
                        bottomRight: false,
                        bottomLeft: false,
                        topLeft: false,
                    }}
                    onResizeStop={(event, direction, elt, delta) => {
                        toggleSelection(true);
                        setAttributes({ spacerBottom: parseInt(spacerBottom + delta.height, 10) });
                        this.setState({ spacerBottomValue: parseInt(spacerBottom + delta.height, 10) });
                    }}
                    onResizeStart={() => { toggleSelection(false); }}
                />
            </Fragment>
        );
    }
}

My attributes

const attributes = {
    spacerTop: {
        type: "number",
        default: 20
    },
    spacerBottom: {
        type: "number",
        default: 20
    }
}

1 Answer 1

0

Attributes should be

const attributes = {
    spacerTop: {
        type: "integer",
        default: 20
    },
    spacerBottom: {
        type: "integer",
        default: 20
    }
}
1
  • So the problem is the type should be integer not number?
    – Rup
    Apr 4, 2022 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.