将数据名称编辑器插件转换为古登堡插件

我有一个旧的自定义插件，我已经使用了3年，现在需要更新以实现古腾堡兼容性。旧插件允许您在编辑器中选择文本并按下按钮，然后将文本包装在自定义标记中。

示例：

Text Name 转换为<a data-name="Text Name">Text Name</a>

我一直在跟踪this 尝试转换它的教程。

这就是我目前拥有的：

( 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 );

我最初试图忽略registerFormatType 而只是尝试在onClick 功能正常但无效。所以我稍微回溯了一下，尝试创建一个自定义格式类型。

因此，关于FormatType，我想了解的是：

tagName: 我想我正确地假设这是一个锚标签。

ClassName: 当前为null，但这需要是数据名而不是类。它还需要将当前突出显示的文本作为数据名称。古腾堡支持这一点吗？一根手指朝着正确的方向就好了！

简而言之，是否可以使用data-name 而不是className 一个与古腾堡兼容的插件？

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

相关推荐