Wordpress Gutenberg blocks: Input fields are not editable

admin管理员组

文章数量:1130349

Describe the bug

In WordPress 5.0.2 with Gutenberg in the core (not the plugin), when using input fields to capture text from the user and providing a value= from props.attributes, the input fields are not editable. The outputted html code looks fine (no disabled or readonly attributes exist). However, in the browser, I am not able to change/edit the value in the input field. (Update: it tries to inject an [object Object] into text field.) Other components, like ColorPalette and Button, are working just fine.

The only errors I can find are from Firefox (only a separate warning from Chrome)..

Firefox Error 1:

Error: Permission denied to access property "nodeType" /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Firefox Error 2:

TypeError: Argument 1 of Node.contains does not implement interface Node. /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Chrome Warning 1:

The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I'd really like to use basic input fields/components to accept data from users. Any help with my Gutenberg block code is greatly appreciated.

To Reproduce

Here is my code in question:

...

registerBlockType( 'wcn/button', {

...

attributes: {
    borderWidth: {
        type: 'number',
        default: 2
    }
},
edit: (props) => {
    const onChangeBorderWidth = newBorderWidth => {
        props.setAttributes( { borderWidth: newBorderWidth })
    }
    return (
        <div className={ props.className }>
            <input 
                name="borderWidth"
                type="text"
                value={ props.attributes.borderWidth }
                onChange={ onChangeBorderWidth }
            />
        </div>
    )
}

...

Expected behavior

I was expecting to edit the input field to take a number value (like it has for decades). However, the number value assigned is not changeable. Very strange.

Desktop Development Environment:

• OS: Windows 10
• Browser Chrome and Firefox
• Version 71.0.3578.98 and 63.0.3

Describe the bug

In WordPress 5.0.2 with Gutenberg in the core (not the plugin), when using input fields to capture text from the user and providing a value= from props.attributes, the input fields are not editable. The outputted html code looks fine (no disabled or readonly attributes exist). However, in the browser, I am not able to change/edit the value in the input field. (Update: it tries to inject an [object Object] into text field.) Other components, like ColorPalette and Button, are working just fine.

The only errors I can find are from Firefox (only a separate warning from Chrome)..

Firefox Error 1:

Error: Permission denied to access property "nodeType" /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Firefox Error 2:

TypeError: Argument 1 of Node.contains does not implement interface Node. /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Chrome Warning 1:

The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I'd really like to use basic input fields/components to accept data from users. Any help with my Gutenberg block code is greatly appreciated.

To Reproduce

Here is my code in question:

...

registerBlockType( 'wcn/button', {

...

attributes: {
    borderWidth: {
        type: 'number',
        default: 2
    }
},
edit: (props) => {
    const onChangeBorderWidth = newBorderWidth => {
        props.setAttributes( { borderWidth: newBorderWidth })
    }
    return (
        <div className={ props.className }>
            <input 
                name="borderWidth"
                type="text"
                value={ props.attributes.borderWidth }
                onChange={ onChangeBorderWidth }
            />
        </div>
    )
}

...

Expected behavior

I was expecting to edit the input field to take a number value (like it has for decades). However, the number value assigned is not changeable. Very strange.

Desktop Development Environment:

• OS: Windows 10
• Browser Chrome and Firefox
• Version 71.0.3578.98 and 63.0.3

• block-editor

Share Improve this question edited Dec 31, 2018 at 15:27 Marty McGee asked Dec 31, 2018 at 2:17 Marty McGeeMarty McGee 17111 silver badge88 bronze badges 5

• 1 The input has type "text" but the attribute is type "number". Does changing the input type to number make any difference? – Alvaro Commented Dec 31, 2018 at 3:17
• Thanks Alvaro, but no, changing it to a type=number only changes the input field's type..it still remains un-editable. – Marty McGee Commented Dec 31, 2018 at 14:28
• 1 Ok, I think Im seeing the issue. Inside onChangeBorderWidth function you are changing the color rather than the borderWidth attribute. Please let me know if this solves the problem. – Alvaro Commented Dec 31, 2018 at 14:44
• Thanks again Alvaro! However, this was a separate mistake in my code, haha. I have updated that variable assignment (and updated this question), but errors still persist and input fields remain uneditable. Having said that, Chrome finally throws an error (Firefox does not), which points me in a new direction (head scratching).. When I try to edit a field, Chrome now says: The specified value "[object Object]" is not a valid number. The value must match to the following regular expression.. It's like any time I edit the field, an [Object] is it's new value, not what I typed from keyboard. – Marty McGee Commented Dec 31, 2018 at 15:07
• I'm guessing that my attribute "selector" and/or "source" need to somehow point to the input field. I don't know how to do that :) – Marty McGee Commented Dec 31, 2018 at 15:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

It turns out that in order to get to the value of an input field, you must point to it in your callback function, like so...

const onChangeBorderWidth = newBorderWidth => {
    props.setAttributes( { borderWidth: newBorderWidth.target.value })
}

This grabs the event's input target value and assigns it to the correct attribute.

HINT: You don't have to do this with Gutenberg's TextControl component.. by default, it returns this event.target.value

Describe the bug

In WordPress 5.0.2 with Gutenberg in the core (not the plugin), when using input fields to capture text from the user and providing a value= from props.attributes, the input fields are not editable. The outputted html code looks fine (no disabled or readonly attributes exist). However, in the browser, I am not able to change/edit the value in the input field. (Update: it tries to inject an [object Object] into text field.) Other components, like ColorPalette and Button, are working just fine.

The only errors I can find are from Firefox (only a separate warning from Chrome)..

Firefox Error 1:

Error: Permission denied to access property "nodeType" /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Firefox Error 2:

TypeError: Argument 1 of Node.contains does not implement interface Node. /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Chrome Warning 1:

The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I'd really like to use basic input fields/components to accept data from users. Any help with my Gutenberg block code is greatly appreciated.

To Reproduce

Here is my code in question:

...

registerBlockType( 'wcn/button', {

...

attributes: {
    borderWidth: {
        type: 'number',
        default: 2
    }
},
edit: (props) => {
    const onChangeBorderWidth = newBorderWidth => {
        props.setAttributes( { borderWidth: newBorderWidth })
    }
    return (
        <div className={ props.className }>
            <input 
                name="borderWidth"
                type="text"
                value={ props.attributes.borderWidth }
                onChange={ onChangeBorderWidth }
            />
        </div>
    )
}

...

Expected behavior

I was expecting to edit the input field to take a number value (like it has for decades). However, the number value assigned is not changeable. Very strange.

Desktop Development Environment:

• OS: Windows 10
• Browser Chrome and Firefox
• Version 71.0.3578.98 and 63.0.3

Describe the bug

In WordPress 5.0.2 with Gutenberg in the core (not the plugin), when using input fields to capture text from the user and providing a value= from props.attributes, the input fields are not editable. The outputted html code looks fine (no disabled or readonly attributes exist). However, in the browser, I am not able to change/edit the value in the input field. (Update: it tries to inject an [object Object] into text field.) Other components, like ColorPalette and Button, are working just fine.

The only errors I can find are from Firefox (only a separate warning from Chrome)..

Firefox Error 1:

Error: Permission denied to access property "nodeType" /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Firefox Error 2:

TypeError: Argument 1 of Node.contains does not implement interface Node. /wp-includes/js/tinymce/wp-tinymce.php?ver=4800-20180716 line 2

Chrome Warning 1:

The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

I'd really like to use basic input fields/components to accept data from users. Any help with my Gutenberg block code is greatly appreciated.

To Reproduce

Here is my code in question:

...

registerBlockType( 'wcn/button', {

...

attributes: {
    borderWidth: {
        type: 'number',
        default: 2
    }
},
edit: (props) => {
    const onChangeBorderWidth = newBorderWidth => {
        props.setAttributes( { borderWidth: newBorderWidth })
    }
    return (
        <div className={ props.className }>
            <input 
                name="borderWidth"
                type="text"
                value={ props.attributes.borderWidth }
                onChange={ onChangeBorderWidth }
            />
        </div>
    )
}

...

Expected behavior

I was expecting to edit the input field to take a number value (like it has for decades). However, the number value assigned is not changeable. Very strange.

Desktop Development Environment:

• OS: Windows 10
• Browser Chrome and Firefox
• Version 71.0.3578.98 and 63.0.3

• block-editor

Share Improve this question edited Dec 31, 2018 at 15:27 Marty McGee asked Dec 31, 2018 at 2:17 Marty McGeeMarty McGee 17111 silver badge88 bronze badges 5

• 1 The input has type "text" but the attribute is type "number". Does changing the input type to number make any difference? – Alvaro Commented Dec 31, 2018 at 3:17
• Thanks Alvaro, but no, changing it to a type=number only changes the input field's type..it still remains un-editable. – Marty McGee Commented Dec 31, 2018 at 14:28
• 1 Ok, I think Im seeing the issue. Inside onChangeBorderWidth function you are changing the color rather than the borderWidth attribute. Please let me know if this solves the problem. – Alvaro Commented Dec 31, 2018 at 14:44
• Thanks again Alvaro! However, this was a separate mistake in my code, haha. I have updated that variable assignment (and updated this question), but errors still persist and input fields remain uneditable. Having said that, Chrome finally throws an error (Firefox does not), which points me in a new direction (head scratching).. When I try to edit a field, Chrome now says: The specified value "[object Object]" is not a valid number. The value must match to the following regular expression.. It's like any time I edit the field, an [Object] is it's new value, not what I typed from keyboard. – Marty McGee Commented Dec 31, 2018 at 15:07
• I'm guessing that my attribute "selector" and/or "source" need to somehow point to the input field. I don't know how to do that :) – Marty McGee Commented Dec 31, 2018 at 15:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

It turns out that in order to get to the value of an input field, you must point to it in your callback function, like so...

const onChangeBorderWidth = newBorderWidth => {
    props.setAttributes( { borderWidth: newBorderWidth.target.value })
}

This grabs the event's input target value and assigns it to the correct attribute.

HINT: You don't have to do this with Gutenberg's TextControl component.. by default, it returns this event.target.value

本文标签： Wordpress Gutenberg blocks Input fields are not editable