I am trying to disable a gutenberg toolbar button added by myself following this tutorial. https://developer.wordpress.org/block-editor/tutorials/format-api/2-toolbar-button/

But there is no docs for disabling the toolbar button, i have tried to fiddle with isActive property of that button, setting it to true or false doesnt seem to have effect on toolbar button. There seems to be nothing in docs explaining this condition, I need a way to disable the toolbar button

1 Answer 1


I have found that you could add a className attribute to the button and select the button by document.getElementsByClassName query selector. so the code would be this

( function( wp ) {
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                className: "foo"
                onClick: function() {
                    console.log( 'toggle format' );
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
            edit: MyCustomButton,
} )( window.wp );

with className foo added to the button.

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.