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.
Share Improve this question asked Aug 11, 2020 at 2:48 Nicholas CardotNicholas Cardot 1851 silver badge8 bronze badges1 Answer
Reset to default 0So 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();
});