plugin development - Catching Gutenberg sidebar switch event

admin管理员组

文章数量:1296401

I'm working on a plugin with Gutenberg integration. I registered a plugin in React, and my sidebar is showing and working fine. But I need to perform an action each time my sidebar is showing up.

I noticed that functions Render, componentDidUpdate, componentDidMount are not called when I switch the sidebar (for example I open Rank Math sidebar, and then I return to my sidebar). So using those are not good for me.

I'm looking for some kind of event listener that will be executed when I reopen my sidebar. I'm new to React, so I'm not sure if I can use useState hook in some way to do this?

Furthermore, I also field at looking for any built-in events in Gutenberg in documentation, so not sure if there is any ready solution.

I'm working on a plugin with Gutenberg integration. I registered a plugin in React, and my sidebar is showing and working fine. But I need to perform an action each time my sidebar is showing up.

I noticed that functions Render, componentDidUpdate, componentDidMount are not called when I switch the sidebar (for example I open Rank Math sidebar, and then I return to my sidebar). So using those are not good for me.

I'm looking for some kind of event listener that will be executed when I reopen my sidebar. I'm new to React, so I'm not sure if I can use useState hook in some way to do this?

Furthermore, I also field at looking for any built-in events in Gutenberg in documentation, so not sure if there is any ready solution.

• plugin-development
• block-editor
• events

Share Improve this question asked Jul 14, 2022 at 13:08 mWinmWin 13655 bronze badges 2

• 1 There isn’t an event. That’s not really how React or the block editor works. What sort of thing do you need to happen when switching tabs. Knowing that would help inform the appropriate solution. – Jacob Peattie Commented Jul 14, 2022 at 16:10
• @JacobPeattie I need to put dynamic content using iframe into the sidebar. Currently, I can load it properly, but when I change the sidebar and then return to my sidebar, the dynamically loaded content is gone. So my idea was to catch the event when sidebar is loaded and insert content then. – mWin Commented Jul 15, 2022 at 7:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

For everyone who is looking for a solution:

The issue was that I wanted to use React. Component as I was sure it is required by WordPress. But Functional Component is also accepted, and in this case instead of componentDidMount you can use useEffect hook, which is executed each time sidebar is loaded and do the job perfectly.

本文标签： plugin developmentCatching Gutenberg sidebar switch event