javascript – Gutenberg add extra attributes to custom format
Question
I’m creating a custom format (adding a custom option to the format toolbar) using the following guide: https://developer.wordpress.org/block-editor/how-to-guides/format-api/
import { registerFormatType, toggleFormat } from 'wordpress user/rich-text';
import { RichTextToolbarButton } from 'wordpress user/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,
} );
This creates, for example: Hello <samp>world</samp>
How can i add extra attributes to the new format? For example if i want to add a data attribute. I tried:
registerFormatType( 'my-custom-format/sample-output', {
title: 'Sample output',
tagName: 'samp',
className: null,
'data-custom': 'Some value',
edit: MyCustomButton,
} );
But data-custom
does not show in the HTML output.
0
2 years
2022-05-21T11:10:04-05:00
2022-05-21T11:10:04-05:00 0 Answers
0 views
0
Leave an answer