I have an old custom plugin that I've been using for 3 years that now needs to be updated for Gutenberg compatibility. The old plugin allows you to select text in the editor and press a button, it will then wrap the text in a custom tag.
Example:
Text Name
converts to <a data-name="Text Name">Text Name</a>
I've been following this tutorial to try convert it.
This is what I currently have:
( function( wp ) {
var MyCustomButton = function( props ) {
return wp.element.createElement(
wp.blockEditor.RichTextToolbarButton, {
icon: 'editor-code',
title: 'Data Convert',
onClick: function() {
var content = props.attributes.content;
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: 'Data Convert',
tagName: 'a',
className: null,
edit: MyCustomButton,
}
);
} )( window.wp );
I initially tried ignoring the registerFormatType
while simply trying to convert the text within the onClick
function but to no avail. So I backtracked a little to try create a custom format type instead.
So what I am trying to understand in reference to the FormatType:
tagName: I think I am correctly assuming this is an anchor tag.
ClassName: Currently null but this needs to be a data-name instead of a class. It also needs to take the currently highlighted text as the data-name. Does Gutenberg support this? A finger in the right direction would be great!
So in short, is it possible to use data-name
instead of className
for a Gutenberg compatible plugin?