plugin development - Add custom html classes to gutenberg wrapper

I wanna add custom classes to gutenberg wrapper.

But I wanna be flexible and use the classes from inspectorinput.

How can I do? Block filters don't work a that cause you can just use a special class.

I wanna add custom classes to gutenberg wrapper.

But I wanna be flexible and use the classes from inspectorinput.

How can I do? Block filters don't work a that cause you can just use a special class.

• plugin-development
• block-editor

Share Improve this question asked Feb 26, 2019 at 16:18 melaniemueller.designmelaniemueller.design 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

• Block Filters are used to customize the class that wordpress already adds using following format wp-block-[plugin_name]-[block-name]. You can access that using this.props.className.
• You can also add the additional classes using Advanced Panel which is present on right sidebar.
• In the end you can use React.js component state to define custom classes (pseudo code is given below).

(Create separate file for this and pass into edit method inside registerBlockType for better structuring else you can write this whole code)

class Testing extends Component {
  constructor() {
    this.state = {
      customClasses: null
    }
  }

  render() {
    <InspectorControls>
      <TextControl
        label="Custom CSS Classes"
        value={ this.state.customClasses }
        onChange={ ( content ) => setState( { customClasses: content } ) }
      />
    </InspectorControls>
  }
}