block editor - Component toggle not toggling

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 } ) } }

• block-editor

Share Improve this question asked Feb 14, 2019 at 14:28 Razvan CuceuRazvan Cuceu 24822 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I 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.