I'm trying to create a checkbox in inspector controls that will change font size, but it doesn't get checked when clicked
var CheckboxControl = wpponents.CheckboxControl
el(FormToggle,{
help: 'If checked the text will show with large font',
checked: false,
label: 'Show large font',
onChange: function(state){
props.setAttributes({ textSize: state })
}
})
On the wordpress documentation the code seems different than mine and it can't apply to what I have. I see that there it's a piece of code that change it's state but I can't integrate it in my code:
onChange={ ( isChecked ) => { setState( { isChecked } ) } }
I'm trying to create a checkbox in inspector controls that will change font size, but it doesn't get checked when clicked
var CheckboxControl = wpponents.CheckboxControl
el(FormToggle,{
help: 'If checked the text will show with large font',
checked: false,
label: 'Show large font',
onChange: function(state){
props.setAttributes({ textSize: state })
}
})
On the wordpress documentation the code seems different than mine and it can't apply to what I have. I see that there it's a piece of code that change it's state but I can't integrate it in my code:
onChange={ ( isChecked ) => { setState( { isChecked } ) } }
1 Answer
Reset to default 0I used this toggler to add a class to an element if checked. Maybe your goal is the same with a class for a larger font. I used it like this:
checked: !!textSize,
onChange: function(){
textSize ? props.setAttributes({ textSize: '' }) : props.setAttributes({ textSize: ' big' })
}
So textSize controls the checked status and holds the classname, if checked. You can use the textSize string in other elements className: attributes.