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 = wp.components.CheckboxControl       
  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 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.

  • Very helpful! I get Uncaught ReferenceError: textSize is not defined even though I declared textSize in the attributes like this textSize: { type: 'string' } Am I missing something? – Razvan Cuceu Feb 15 at 8:43
  • You can add default: '' to the declaration (i did so), but to get it in the edit: function you should add var textSize = props.attributes.textSize (after function (props) {...). – moped Feb 15 at 8:50

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.