3

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?

2
  • 1
    Same problem for me. have you found an answer to this problem ?
    – Fabien
    May 4, 2020 at 15:37
  • I didn't find an answer but I did get a response...though I can't for the life of me find it atm. I was told that this was operating as intended, they want to keep the UI as simple as possible. I'd still like to find a way around it but haven't had more time to spend on it recently.
    – davemackey
    May 7, 2020 at 16:29

1 Answer 1

2

Old question but an up-to-date answer could help someone: instead of using RichTextToolbarButton you have to use the BlockControls component. This way your button will appear before the other styling buttons.

ESNext working example (from the official documentation):

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';

const MyCustomButton = ( { isActive, onChange, value } ) => {
    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarButton
                    icon="editor-code"
                    title="Sample output"
                    onClick={ () => {
                        onChange(
                            toggleFormat( value, {
                                type: 'my-custom-format/sample-output',
                            } )
                        );
                    } }
                    isActive={ isActive }
                />
            </ToolbarGroup>
        </BlockControls>
    );
};

registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
    edit: MyCustomButton,
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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