How to render additional checkbox at Gutenberg?

Question

I want to add an additional checkbox next to Crop Image but I can't understand what need to write in javascript for rendering it and handling then. I couldn't find documentation with explaining that. I've tried to write code like that but it didn't work:

function addListBlockClassName (settings, name) {
  if (name !== 'core/gallery') {
    return settings
  }

  // new checkbox
  settings.attributes.enableVoting = {
    default: false,
    type: 'boolean',
  }

  return settings
}

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'my-plugin/class-names/list-block',
  addListBlockClassName
)

Mehmood Ahmad Mehmood Ahmad · Accepted Answer · 2019-03-05T10:27:06

You can add the additional checkbox on sidebar by using InspectorControls and Checkbox Control

Have a look at gallery block and learn how the are implementing things on sidebar via using InspectorControls. This can be complex so for easier implementation you can look at other core blocks of Gutenberg.

And this link can help you about how to use CheckboxControl.

In your above code you are just adding a hook which is changing the default class name of block gallery and that is not what you are asking. Please note that as per my knowledge you can't edit default core blocks (apart from very few things) unless you copy whole core block and add additional functionality into it.

How to render additional checkbox at Gutenberg?

1 Answers