I have added the custom Gutenberg block for my shortcode, but in checkbox control check uncheck does not work, please check code done as below:

el( components.CheckboxControl, {
    label: i18n.__( 'Display it?', 'txt-domain' ),
    checked: props.attributes.myAttr,
    onChange: function( val ) {
        if( val ) {
            props.setAttributes({ myAttr: '1' })
        } else {
            props.setAttributes({ myAttr: '0' })
} ),

if I remove the checked: props.attributes.myAttr, then it works fine but here, checkbox does not stay checked or uncheck. by the way it saves the value.


The property checked expects boolean value. (CheckboxControl)
How did you define myAttr in attributes? If you set myAttr to '1' or '0' it is both true.
Try empty instead of '0' props.setAttributes({ myAttr: '' }) or false.

| improve this answer | |
  • Yes, I have to define string there, just change bool, but here I also need to change in onChange function, like: onChange: function( val ) { props.setAttributes({ myAttr: val }) } – Jaydip Nimavat Feb 18 '19 at 6:03

Try using the withState wrapper like in the example from the docs : https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/checkbox-control/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.