Gutenberg在自定义格式中添加额外的属性

Question

我正在使用以下指南创建自定义格式(向“格式”工具栏添加自定义选项)：https://developer.wordpress.org/block-editor/how-to-guides/format-api/

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
 
const MyCustomButton = ( { isActive, onChange, value } ) => {
    return (
        <RichTextToolbarButton
            icon="editor-code"
            title="Sample output"
            onClick={ () => {
                onChange(
                    toggleFormat( value, {
                        type: 'my-custom-format/sample-output',
                    } )
                );
            } }
            isActive={ isActive }
        />
    );
};
 
registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
    edit: MyCustomButton,
} );

这会创建，例如：Hello <samp>world</samp>

如何向新格式添加额外的属性？例如，如果我想添加一个数据属性。我试过：

registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
    'data-custom': 'Some value',
    edit: MyCustomButton,
} );

但是data-custom没有显示在HTML中。

Answer 1

通过在attributes中通过registerFormatType设置传递属性，我能够添加该属性：

attributes: {
   'custom-attr': 'custom-attr'
},

然后在edit()中：

toggleFormat( value, {
    attributes: {
      'custom-attr': 'Hello world'
    },
} )

我不知道它到底是如何一起工作的，因为我在当前的文档中找不到详细的解释。

另一个很棒的特性是能够以自定义格式添加额外的HTML标记，但我找不到任何示例。例如：

<div custom-attr="Hello world"><div class="an-extra-div"></div>Lorem ipsum dolor...</div>