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.
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.
2 Answers
Reset to default 1The 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.
Try using the withState wrapper like in the example from the docs : https://wordpress/gutenberg/handbook/designers-developers/developers/components/checkbox-control/