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
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.