Gutenberg registerFormatType with Multiple Classes


I’m adding a button to Gutenbergs RichTextToolbar with a plugin I created, but I cannot figure out how to add mulitple classes to the tag/span I create.

( function( wp ) {
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                onClick: function() {
                    props.onChange( wp.richText.toggleFormat(
                        { type: 'my-custom-format/sample-output' }
                    ) );
                isActive: props.isActive,
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'span',
            className: 'classname another-classname',  //this line needs the help - works as just 'classname' no spaces but can only wrap with one class then
            edit: MyCustomButton,
} )( window.wp );

Console error says:

A class name must begin with a letter, followed by any number of
hyphens, letters, or numbers.

So the space is creating the error, but how do I add 2 classes to this function? I’ve also tried the following which doesn’t work.

className: {'has-primary-color has-text-color'},
Lyle Bennett 4 months 0 Answers 22 views 0

Leave an answer