WordPress Gutenberg Block Plugin Builder

A foundation for WordPress Gutenberg blocks plugin development that aims to provide a clear and concise guide for building your first block plugin:

• Regular & dynamic blocks sample
• PostCSS ready
• Translation ready
• Prettier + Stylint WP config
• Browser Sync live reload
• Webpack config

Provided by WordPress developer Jeffrey Carandang from the Philippines, who also is the guy behind projects like ShareABlock, a collection of free block designs and templates for Gutenberg, as well as Iceberg, a beautiful, flexible writing editor for crafting posts with the WordPress block editor.

Installation

WP Block Builder is available through npm. Run this command inside wp-content/plugins folder to start the installation.

$ npx wp-block-builder

Setup

A series of questions will automatically be asked via CLI (command line interface) with regards to plugin information such as folder and plugin name, etc.

The block slug used for identification (also the plugin and output folder name):
The internal namespace for the block name (something unique for your products):
The display title for your block:
The short description for your block (optional):
The name of the plugin author (optional). Multiple authors may be listed using commas:
The short name of the plugin’s license (optional):
The current version number of the plugin:

Development

All the required npm and composer packages will be automatically installed after the setup questions. This WordPress blocks plugin configuration is the one Jeffrey has been using and battle-testing. This config comes with:

Multiple Gutenberg blocks sample

• Posts List: a dynamic gutenberg block that displays configurable number of posts with title, featured image, post meta and excerpt. This block provides extensive code resources when it comes to building dynamic gutenberg block.
• Custom Container: regular sample block using InnerBlocks. This block will let you follow the usage of inner blocks and custom color supports.

PostCSS ready

• easily add both editor and frontend styling via configured wp-scripts. Both sample blocks are showing how to include the .scss files which will automagically be generated on the builds folder.

Translation ready

• languages folder will automatically be generated on npm build or npm makepot. Both .php and .js files will be included on the translation process.

ESLint, Stylint and Prettier configurations

• WordPress standards for CSS and JS formatting are included with auto fixing configuration via npm run lint:js-fix or npm run lint:css-fix.

Browser-sync live reload

• Live reloading is also available with configurable local.json file to easily add your WordPress website link.

{ "devURL": "http://icebergtest.local/wp-admin/post.php?post=5617&action=edit" }

PHP file WordPress coding standards

• WordPress coding standards check for .php files is also configure via composer. Just run composer run format to check which one needs changing.

WebPack configurations

• webpack.config.js is available for you to easily extend it with your own configs.

Available Commands

Inside that bootstrapped directory (it doesn’t apply to es5 template), you can run several commands:

$ npm start

Starts the build for development. 

$ npm run build

Builds the code for production. 

$ npm run format:js

Formats JavaScript files. 

$ npm run lint:css

Lints CSS files. 

$ npm run lint:css-fix

Check and auto apply Stylelint fixes on CSS files. 

$ npm run lint:js

Lints JavaScript files. 

$ npm run lint:js-fix

Check and auto apply ESlint fixes on JS files. 

$ npm run makepot

Generate language translations for PHP and JS files.

$ npm run packages-update

Updates WordPress packages to the latest version. 

Picture courtesy of Erwan Hesry.