Converting data-name editor plugin to Gutenberg plugin

Question

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?

Answer 1

Looking at the Gutenberg code in the GitHub repo, we can look at how the inline image format is implemented:

https://github.com/WordPress/gutenberg/blob/99f31cdb4ed035264e0332b72dd3a2287d93ff50/packages/format-library/src/image/index.js#L17-L30

export const image = {
    name,
    title: __( 'Image' ),
    keywords: [ __( 'photo' ), __( 'media' ) ],
    object: true,
    tagName: 'img',
    className: null,
    attributes: {
        className: 'class',
        style: 'style',
        url: 'src',
        alt: 'alt',
    },

Note the attributes list, the edit component makes the necessary ammendments. When your code handles a change, you can make the update by applying the format again, which should look something like this:

applyFormat( props.value, { type: 'core/image', attributes: { "data-name": new_value, ...etc } } )

There are other things to do, but for this problem those are the important parts

---

I also have some side notes

Accessibility, Disability Laws, and Click Handlers

As a sidenote, your original code only handles clicks, making it impossible to modify using the keyboard or assistive technologies. As a result your implementation could be illegal in numerous countries and states under various accessibility, disability, employment, and equal opportunity laws. There may be legal consequences

Making Sure Your data attribute doesn't get stripped out by WP Security

I would also note, that the default WP whitelisting may strip out your data tags. This isn't a part of Gutenberg, but PHP, specifically wp_kses_post. You will need to filter this whitelist to account for your data attributes.

HTML5 Semantic tags

Also, depending on the purpose of these data-name="..." attributes, you may be better off using a more semantic attribute from a standard spec, such as an Aria attribute, or a HTML5 tag. I can't make any recommendations without knowing what the data attribute is for, but if you can use more semantic markup it may pay dividends in accessibility, SEO, and other unexpected areas.