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(
                        props.value,
                        { type: 'my-custom-format/sample-output' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    wp.richText.registerFormatType(
        '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'},

2 Answers
2

As we can see from the registerFormatType function source code, only letters, numbers, “_” and “-” are allowed in the class name.

if ( ! /^[_a-zA-Z]+[a-zA-Z0-9-]*$/.test( settings.className ) ) {
    window.console.error(
        'A class name must begin with a letter, followed by any number of 
         hyphens, letters, or numbers.'
    );
    return;
}

So you cannot separate two class names with a space.

Leave a Comment