How to re-render Gutenberg component when object instance is available

wp_add_inline_script can be used to insert a tiny trigger script that executes after the script specified in script and any instance defined by that script will be available.

// When this js executes `Masonry` is sure to be defined
wp_add_inline_script( 'masonry', 'if (window.top !== window) doItNow()');

This will end up being executed twice when the editor is iframed because scripts specified with script are loaded in both windows/documents. That’s the reason to conditionally doItNow() only when the window isn’t the topmost.

Then to have a component re-render, the trigger should update a store that the component subscribes to and the variable holding the value from the store has be included in the useRefEffect dependencies.


I’ve published a git repo of a working demonstration. It’s pretty bare-bones and doesn’t require a build step so hopefully it’s easy enough to dissect. The quickest way to test is running wp-now start from the directory.

I can extract and explain some key parts of the code here if it helps.

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)