1

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/rich-text';
import { RichTextToolbarButton } from '@wordpress/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.

8
  • The format API does not support custom attributes - why do you want to add a static data attribute?
    – bosco
    May 21 at 16:21
  • i think it does support it. there are many reasons to add a data attribute. I am making it static in the example for simplicity
    – CyberJ
    May 21 at 16:29
  • for example maybe i want to create an inline tooltip format which can use extra attributes for custom js
    – CyberJ
    May 21 at 16:32
  • The documentation for the format settings object is here at the top of the file. It makes no mention of any other possible parameters. It doesn't look like extraneous parameters are stripped though - they should still end up in state. I'll dig around a little further. If you're writing custom JS for a tooltip, I'd think you might as well code those settings into the JS based on className, as they would be static for all instances of the format anyway.
    – bosco
    May 21 at 16:35
  • 1
    Awesome!! I'll add it as an answer after I look around a little more. Everything I'm seeing indicates that this should be a stable feature moving forward :)
    – bosco
    May 21 at 17:21

1 Answer 1

1

I was able to add the attribute by passing it in attributes through the registerFormatType settings:

attributes: {
   'custom-attr': 'custom-attr'
},

then in edit():

toggleFormat( value, {
    attributes: {
      'custom-attr': 'Hello world'
    },
} )

I don't know how exactly it all works together because I could not find detailed explanations in the current documentation.

Another great feature would be the ability to add extra HTML markup in custom formats but I could not find any examples. For example:

<div custom-attr="Hello world"><div class="an-extra-div"></div>Lorem ipsum dolor...</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.