When you save a block, symbol or SCSS partial in the FanCoolo editor, every other tab of the same site that is open in the same browser updates on its own: the block editor and front-end pages. You don't need to refresh to see the change.
What updates, and how
- Style-only changes (SCSS) are applied instantly, without reloading the page.
- Changes to the render template or the block structure reload the page, so the block is rendered again from the new PHP.
- In the block editor, FanCoolo re-renders the affected blocks in place and keeps their attribute values.
How it works
FanCoolo sends a message to the other tabs through the browser's BroadcastChannel API (channel fancoolo-hot-reload). If a browser doesn't support it, FanCoolo falls back to localStorage events. No server polling or websocket is involved, and only tabs in the same browser receive the update.
Front end on live sites
The hot reload script is loaded in the admin, the block editor and on front-end pages. On a production site you may want to load it only for logged-in editors, for example with a small mu-plugin:
add_action( 'wp_enqueue_scripts', function () {
if ( ! current_user_can( 'edit_posts' ) ) {
wp_dequeue_script( 'fancoolo-hot-reload' );
}
}, 100 );