So I have developed a sidebar for the Gutenberg editor in WordPress. The purpose of this sidebar is to provide feedback, grades, scores, etc., for a set of custom input boxes that appear below the post editor. As such, the user may want to have it open and be using it to view the real-time updates to their scores as they are editing.

Now, of course, the button on the toolbar works to activate and deactivate the sidebar, but I was wondering if their was an external way that I can call my sidebar to reveal it. I have a call to action that I've just added to that section of inputs that will inform the user that this "optimizer" now exists, and if they click on it, I want the sidebar to become activated so that they can check it out. I'm hoping for something like this:

jQuery(document).on('click', '.my-button', function() {
    // How do I activate, deactivate or toggle the activation of the sidebar?
    activateSidebar('my-cool-sidebar');
    deactivateSidebar('my-cool-sidebar');
    toggleSidebarActivation('my-cool-sidebar');
});

Of course, all of those function are make believe, but that's where you come in. Is there a function or methodology that will allow me to invoke the same behavior as what happens when that top toolbar button is called? Thanks.

So I have developed a sidebar for the Gutenberg editor in WordPress. The purpose of this sidebar is to provide feedback, grades, scores, etc., for a set of custom input boxes that appear below the post editor. As such, the user may want to have it open and be using it to view the real-time updates to their scores as they are editing.

Now, of course, the button on the toolbar works to activate and deactivate the sidebar, but I was wondering if their was an external way that I can call my sidebar to reveal it. I have a call to action that I've just added to that section of inputs that will inform the user that this "optimizer" now exists, and if they click on it, I want the sidebar to become activated so that they can check it out. I'm hoping for something like this:

jQuery(document).on('click', '.my-button', function() {
    // How do I activate, deactivate or toggle the activation of the sidebar?
    activateSidebar('my-cool-sidebar');
    deactivateSidebar('my-cool-sidebar');
    toggleSidebarActivation('my-cool-sidebar');
});

Of course, all of those function are make believe, but that's where you come in. Is there a function or methodology that will allow me to invoke the same behavior as what happens when that top toolbar button is called? Thanks.

• block-editor
• post-editor

1 Answer 1

So it turns out that it's as easy as sending a click even to the button. While this is probably more of a work around than an actual solution, it does get the job done in a single piece of code.

    jQuery(document).on('click', '.my-element', function() {
        jQuery('my-button-selector').click();
    });