Blocks: set a default value for a TextControl

Try setting the default value in your attributes instead of on the TextControl.

registerBlockType( 'cgb/a11ytable', {
    title: 'Accessible Table',
    icon: 'screenoptions',
    category: 'common',
    attributes: {
        numCols: {
            type: 'number',
            default: 2 // Added default value 
        }
    },
    edit: (props) => {
        const { attributes: { numCols }, className, setAttributes } = props;
        return [
            el(
                TextControl, {
                    label: 'Number of Columns',
                    type: 'number',
////////////////////////////////////////////////////
                    value: props.attributes.numCols, // this is the problem line
////////////////////////////////////////////////////
                    onChange: function(value) {
                        props.setAttributes({ numCols: value })
                    }
                }
            ),
        ];
    },
    save: ( props ) => {
        var attributes = props.attributes;
        return el('table', { className: props.classes },
            attributes.numCols
        );
    },
} );

Leave a Comment