customization - Blocks: set a default value for a TextControl

admin管理员组

文章数量:1334906

I'm creating a block similar to the WP Core Table block, which first presents the user with a form to set the number of rows and columns. I'd like to set a default value in the TextControl for the number of columns.

Here's a highly simplified version of the block:

const { registerBlockType } = wp.blocks; 
var el = wp.element.createElement;
const { TextControl } = wpponents;

registerBlockType( 'cgb/a11ytable', {
    title: 'Accessible Table',
    icon: 'screenoptions',
    category: 'common',
    attributes: {
        numCols: {
            type: 'number'
        }
    },
    edit: (props) => {
        const { attributes: { numCols }, className, setAttributes } = props;
        return [
            el(
                TextControl, {
                    label: 'Number of Columns',
                    type: 'number',
////////////////////////////////////////////////////
                    value: 2, // 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
        );
    },
} );

The problem is, when the value of the TextControl is set to anything, as above (even when it is changed from just plain 2 to "2"), once the block is added in the editor, it's not possible to change the value. The up and down arrows which appear because it's type:number don't allow the number to change, and typing inside the input is disabled (you get a cursor, but can't select, add, or delete the 2).

The Gutenberg Handbook doesn't seem to go over syntax to set a default value. I don't think it needs a state, as this input just sends data to another function that creates the table itself and saves the value to an attribute for later calculations, it's not something the user can continue to manipulate.

I'm creating a block similar to the WP Core Table block, which first presents the user with a form to set the number of rows and columns. I'd like to set a default value in the TextControl for the number of columns.

Here's a highly simplified version of the block:

const { registerBlockType } = wp.blocks; 
var el = wp.element.createElement;
const { TextControl } = wpponents;

registerBlockType( 'cgb/a11ytable', {
    title: 'Accessible Table',
    icon: 'screenoptions',
    category: 'common',
    attributes: {
        numCols: {
            type: 'number'
        }
    },
    edit: (props) => {
        const { attributes: { numCols }, className, setAttributes } = props;
        return [
            el(
                TextControl, {
                    label: 'Number of Columns',
                    type: 'number',
////////////////////////////////////////////////////
                    value: 2, // 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
        );
    },
} );

The problem is, when the value of the TextControl is set to anything, as above (even when it is changed from just plain 2 to "2"), once the block is added in the editor, it's not possible to change the value. The up and down arrows which appear because it's type:number don't allow the number to change, and typing inside the input is disabled (you get a cursor, but can't select, add, or delete the 2).

The Gutenberg Handbook doesn't seem to go over syntax to set a default value. I don't think it needs a state, as this input just sends data to another function that creates the table itself and saves the value to an attribute for later calculations, it's not something the user can continue to manipulate.

• block-editor
• customization

Share Improve this question asked Apr 23, 2019 at 14:02 WebElaineWebElaine 9,71411 gold badge1717 silver badges2828 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： customizationBlocks set a default value for a TextControl