I am creating my own block. And I've got a problem. My scenario:
I update attribute through NumberControl (it doesn't lose focus yet). I click "Update" page button. And an attribute from NumberControl is not updated. Does anybody have any idea how to fix it?
const InspectorControls = blockEditor.InspectorControls;
const PanelBody = components.PanelBody;
const PanelRow = components.PanelRow;
const NumberControl = components.__experimentalNumberControl;
const setStyle = ( props ) => {
let style = {};
if (props.attributes.size != 20) {
style.width = props.attributes.size;
style.height = props.attributes.size;
}
return style;
};
blocks.registerBlockType( 'testblock/test', {
apiVersion: 2,
title: 'Test block',
icon: 'format-image',
category: 'design',
example: {
attributes: {
size: 20
},
},
attributes: {
size: {
type: 'number',
default: 20
}
},
edit: ( props ) => {
return (
<>
{
<InspectorControls>
<PanelBody title="Element Settings" initialOpen={ true }>
<PanelRow>
<NumberControl
isShiftStepEnabled={ true }
onChange={ newSize => props.setAttributes( { size: newSize } ) }
label={ 'Element size:' }
labelPosition={ 'side' }
shiftStep={ 1 }
value={ props.attributes.size }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
}
<div
style={ setStyle( props ) }
className={ 'test-block' }
>
</div>
</>
);
},
save: ( props ) => {
return (
<div
style={ setStyle( props ) }
className={ 'test-block' }
>
</div>
);
},
});
.test-block {
background: red;
width: 20px;
height: 20px;
}