I have a very simple custom format button for Gutenberg. JS code is as follows:

(function ( wp ) {
    // Create our button.
    var lqdNotesButton = function( props ) {
        return wp.element.createElement(
            wp.Editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Blank It',
                onClick: function () {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'lqdnotes/blankit' }
                    ));
                },
            }
        );
    };

    // What the button does
    wp.richText.registerFormatType(
        'lqdnotes/blankit', {
            title: 'Blank It',
            tagName: 'span',
            className: 'lqdnotes-blank-it',
            id: lqdNotesButton,
            edit: lqdNotesButton,
        }
    );
} )( window.wp );

It works but you have to click on a down arrow to the right of the bold/italic/link buttons to see it.

Is there an option to force the button to appear on the toolbar itself and not the dropdown?

0

Leave a Reply

Your email address will not be published. Required fields are marked *