New @wordpress/create-block package for block scaffolding

Block scaffolding is a shorthand term that describes the supporting directory structure you need for WordPress to recognize a block. Typically that directory includes files like index.php, index.js, style.css and perhaps others—which in turn hold calls like register_block_type.

You’ve likely noticed a lot of tools that aim to automate the scaffolding build—or at least make it easier to build your own blocks. They’re nothing new in the WordPress ecosystem. And there’s even one in WP-CLI: the wp scaffold block command.

You’ve probably also noticed that some of those third-party tools get you up and running with just one npx command, while WP-CLI still needs a full WordPress installation to run. And WP-CLI doesn’t play well with advanced JavaScript tooling like code transpiling, linting or formatting.

Until now.

WordPress 5.4 brings you a brand-new, officially supported npm-based scaffolding package.

Create Block generates PHP, JS and CSS code—and everything else you need to start building your WordPress plugin. Its quick-start mode lets you pass it a slug that then becomes both the target location for the generated files AND the internal block name:

$ npm init @wordpress/block todo-list

You don’t need to install or configure tools like webpack, Babel or ESLint yourself. They’re preconfigured and out of sight. So you can focus on the code.

Create Block also has an interactive mode that lets you customize several essential block options before code generation:

$ npm init @wordpress/block

Finally, despite its support for modern JavaScript tooling, Create Block also lets you to pick an ES5 template—and skip the transpiling tools that trigger ESNext and JSX support.

Note: If you’re concerned about backwards compatibility, the new tool comes straight from the existing WP-CLI implementation—and in particular, the optional ES5 template uses the existing ES5 code.