Attribute form NumberControl doesn’t update

katarzynapa
(@katarzynapa)

5 years, 3 months ago

I am creating my own block. And I’ve got a problem. My scenario:

1. I update attribute through NumberControl (it doesn’t lose focus yet).
2. I click “Update” page button. And an attribute from NumberControl is not updated.

How can I fix it?

Kasia

Viewing 1 replies (of 1 total)

Thread Starter

katarzynapa

(@katarzynapa)

5 years, 2 months ago

My video scenario:

My code:


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;
}

Viewing 1 replies (of 1 total)

The topic ‘Attribute form NumberControl doesn’t update’ is closed to new replies.

Tags