block editor – How to do store, retrieve and write attributes in the registerFormatType method in Guttenberg?


I’m trying to add a format that has multiple, independent attributes to a custom <a> tag. The attributes are href= and data-caption= and data-set= while I use custom client side JavaScript to process the data attributes.

Here’s my shoddy, work in progress code:

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

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


    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) => {
                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',
                                onChange:  (newSetName) => {
                                    setName = newSetName;
                                },
                            }),
                            el( components.TextControl, {
                                placeholder: 'Set Caption',
                                onChange: (newCaption) => {
                                    caption = newCaption;
                                }
                            }),
                            el( components.Button, {
                                className: 'button button-large',
                                onClick: () => {
                                    
                                }

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

Well, surprisingly, it works to a good degree. A Popover appears to accept input but it cannot store them in memory. Second, how can it export the stored attributes as output attributes.

I know that using registerBlockType method would be easier and more defined but the reason I’m not using it is that the custom links, <a> tag, may be mixed in with the rest of the RichText of the Guttenberg Editor.

I really appreciate all your help on this interesting conundrum.