我正在尝试将具有多个独立属性的格式添加到自定义<a> 标签属性为href= 和data-caption= 和data-set= 而我使用自定义客户端JavaScript来处理数据属性。

这是我的劣质、正在进行的代码：

    var el = wp.element.createElement;
    var components = wp.components;

    var withSelect  = wp.data.withSelect;
    var ifCondition = wp.compose.ifCondition;
    var compose     = wp.compose.compose;

    var caption;
    var setName;

    wp.richText.registerFormatType(
        \'test/set-link\',
        {
            attributes: {
                url: \'href\',
                caption: \'data-caption\',
                setName: \'data-set\',
            },
            title: \'Sets Link\',
            tagName: \'a\',
            className: \'sets-link\',
            edit: (props) => {
                var attributes = props.attributes; // console declares this as undefined.
                return [
                    el(wp.blockEditor.RichTextToolbarButton, {
                        icon: \'block-default\',
                        title: __(\'Sets Link\'),
                        isActive: true,
                        onClick: () => {
                            props.onChange(
                                wp.richText.toggleFormat( props.value, {
                                    type: \'test/sets-link\'
                                })
                            )           
                        }
                    }),
                    props.isActive && ( el( components.Popover, 
                        {
                            position: \'bottom center\',
                            headerTitle: \'Sets Attributes\',
                        }, 
                        [
                            el( components.TextControl, {
                                placeholder: \'Set Name\',
                                value: attributes.setName,
                                onChange:  (newSetName) => {
                                    props.setAttributes( { setName: newSetName } 
 ) // TypeError: can\'t access property "setName", attributes is undefined
                                },
                            }),
                            el( components.TextControl, {
                                placeholder: \'Set Caption\',
                                value: attributes.caption,
                                onChange: (newCaption) => {
                                    props.setAttributes( { caption: newCaption } ) // TypeError: can\'t access property "setName", attributes is undefined
                                }
                            }),
                            el( components.Button, {
                                className: \'button button-large\',
                                onClick: () => {
                                    //TODO: here
                                }

                            },
                                \'Set\'
                            )
                        ]
                    )),
                    compose(
                        withSelect( ( select ) => {
                            return {
                                selectBlock: select( \'core/block-editor\' ).getSelectedBlock()
                            }
                        } ),
                        ifCondition( ( props ) => {
                            return(
                                props.selectBlock
                            )
                        } )
                    )
                ]
            },
        }
    )

嗯，令人惊讶的是，它在很大程度上发挥了作用。弹出窗口似乎接受输入，但无法将其存储在内存中。其次，它如何将存储的属性导出为输出属性。

我知道使用registerBlockType方法会更容易，定义也更明确，但我不使用它的原因是自定义链接，<a> 标记，可能会与Guttenberg编辑器的剩余RichText混合在一起。

我真的很感谢你在这个有趣的难题上的帮助。

wp.richText.registerFormatType(
    \'test/set-link\',
    {
        attributes: {
            name: \'data-set\',
        },
        title: \'Sets Link\',
        tagName: \'a\',
        className: \'sets-link\',
        edit: (props) => {
            return [
                el(wp.blockEditor.RichTextToolbarButton, {
                    icon: \'block-default\',
                    title: \'Sets Link\',
                    isActive: props.isActive,
                    onClick: () => {
                        props.onChange(
                            wp.richText.toggleFormat( props.value, {
                                type: \'test/set-link\'
                            })
                        )
                    }
                }),
                props.isActive && ( el( components.Popover,
                    {
                        position: \'bottom center\',
                        headerTitle: \'Sets Attributes\',
                    },
                    [
                        el( components.TextControl, {
                            placeholder: \'Set Name\',
                            value: props.activeAttributes.name ? props.activeAttributes.name : \'\',
                            onChange:  (newName) => {
                                newval = wp.richText.applyFormat(
                                    props.value,
                                    {
                                        type: \'test/set-link\',
                                        attributes: {
                                            name: newName
                                        }
                                    }
                                );
                                props.onChange( newval );
                            },
                        }),
                    ]
                ))
            ]
        },
    }
)