<< wp-scripts and create-block>> are two commands and these versions are compatible with my system:npm install --save-dev @wordpress/scripts@23.7.2npx @wordpress/create-block@4.30.0 copyright-date-block
wp-script
wp-scripts is WordPress’s ready-to-use development toolkit for building Gutenberg blocks and modern JavaScript projects. It handles things like Webpack, Babel, ESLint, Prettier, Sass, testing, and production builds, so you don’t have to configure them yourself. Basically, you install @wordpress/scripts, use npm start while developing and npm run build for the final production version.
npm install --save-dev @wordpress/scripts
create-block
@wordpress/create-blockis a scaffolding tool that quickly creates a ready-to-use Gutenberg block plugin for you. Instead of setting up folders, files,package.json,wp-scripts, and the basic block structure manually, you run one command and WordPress generates everything you need, so you can immediately start developing your custom block.
Installing “Copyright date” block to Gutenberg block collection:npx @wordpress/create-block@latest copyright-date-block
| Feature | @wordpress/create-block | @wordpress/scripts |
| Primary Role | Scaffolder / Setup Tool | Compiler / Build Engine |
| When to Use | Only once at the very start of a project. | Every time you edit code or prepare for production. |
| How It Runs | Via npx @wordpress/create-block. | Via npm run start or npm run build. |
| What It Outputs | A full WordPress plugin folder containing folders like src/, a block.json, and PHP wrapper files. | A compiled, browser-ready build/ directory with production JavaScript, CSS, and asset maps. |
| Scope | Strictly used to kickstart blocks or dynamic plugins. | Can be used independently for block themes, standard plugins, or standalone React apps. |
Useful links:
WooCommerce Checkout Development
webpack.config.js
Block Developer Cookbook