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.