0

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.

Improve this question

2 Answers 2

Reset to default
1

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
1
  • 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, 2019 at 6:03
1

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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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