Gutenberg Block Live Reloading
"name": "nt-block",
"version": "0.1.0",
"description": "Example block scaffolded with Create Block tool.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"main": "build/index.js",
"scripts": {
"build": "wp-scripts build –webpack-copy-php",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start –webpack-copy-php"
},
"devDependencies": {
"@wordpress/scripts": "^30.4.0"
},
"dependencies": {
"@wordpress/block-editor": "^14.6.0",
"@wordpress/blocks": "^14.0.0",
"@wordpress/components": "^28.11.0",
"@wordpress/i18n": "^5.11.0",
"ajv": "^8.17.1"
}
}
npm run start not reflecting changes during run when we changes in edit.js
gautenberg block
using root sage 10 theme in docker
1. **Hot Reloading Configuration**:
– Ensure that your Docker setup has the correct file-watching configurations enabled. Docker’s file system might sometimes not pick up file changes in real time.
– If using Docker Desktop, try adjusting the `sync` settings under Settings > Resources > File Sharing.
2. **Adjust Webpack Watch Options**:
– In your block’s `webpack.config.js` (or if `@wordpress/scripts` handles it), you might need to adjust the watch settings.
– Add the following to the `watchOptions` within your Webpack config:
watchOptions: {
poll: 1000, // Check for changes every second
aggregateTimeout: 300, // Delay before rebuilding
},3. **Rebuild Block Files**:
– Occasionally, files are cached in Docker. Restarting the container or rebuilding the project can help clear this.
– Run `docker-compose down && docker-compose up -d` to restart the containers.
4. **Enable File Syncing in Sage 10**:
– Sage uses Browsersync for real-time changes. Check if Browsersync is enabled and configured to watch your block’s files within the Sage setup.
1. **Use `–watch` with wp-scripts**:
– When running `npm run start`, add `–watch` to the command. This can sometimes help keep the files monitored in environments where changes aren’t being picked up automatically.
– Update your `start` script in `package.json`:
"start": "wp-scripts start --webpack-copy-php --watch"2. **Use a Volume Mounting Fix**:
– For Docker specifically, the way files are shared between your host system and the container might be causing an issue. Adding the `:cached` option to your volume in the `docker-compose.yml` can sometimes improve file syncing.
– Example:
volumes:
- .:/var/www/html:cached3. **Clear Cache**:
– Cached files may be causing the issue. Stop your containers, clear the Docker cache, and start again:
docker-compose down --rmi all
docker-compose up --build4. **Check Sage Browsersync**:
– If Sage’s Browsersync is active, make sure it watches the right directories, including your custom block files.