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
CyberJ 2 years 2022-05-21T11:10:04-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse