No, you always have to reload the page. That’s the only way the browser will load the updated JS file. I’ve been doing it this way for years now. It’s just a matter of getting used to it 🙂
Thanks for the quick answer. I guess you get used to it but nevertheless there should be a solution to have an efficient dev workflow….
Well then I need to get my template perfect right from the start 😀
If you’re using the wp-scripts package for building your blocks you can use the --hot option which enables HMR in the editor. Important: You need to set the constant SCRIPT_DEBUG to true in your wp-config.php.
In my case I also needed to enqueue the runtime separately when using hot reload. This is my enqueue script: https://gist.github.com/lxbdr/2d2120804ad400aaeb6ef21eed088e8a (Adjust constants accordingly)
For the frontend part:
When using save.js you need to save your block and manually refresh it on the frontend. Unless you’re using tailwind you’ll likely have few changes to the markup during development and a lot of changes to the stylesheet. You can load your folder in the Chrome dev tools workspace which will automatically inject changes without a page reload. Or try a setup with browser-sync which can also inject updated files without a full page reload.
If your are using the render.php you could set up a watcher using browser-sync to reload if the file changes.
