最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

theme development - Attribute form NumberControl doesn't update when I update page before it lose its focus

programmeradmin1浏览0评论

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;
}
发布评论

评论列表(0)

  1. 暂无评论