WordPress Gutenberg Block Plugin Builder
A foundation for WordPress Gutenberg blocks plugin development that aims to provide clear and concise guide for building your first block plugin.
Table of contents
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
Series of questions will automatically be asked via CLI with regards to plugin information such as folder and plugin name, etc.
? The block slug used
Development
All the required npm and composer packages will be automatically installed after the setup questions. This WordPress blocks plugin configuration is the one I've been using and it battle-tested. 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 thebuilds
folder.
🇵🇭 Translation ready
languages
folder will automatically be generated onnpm build
ornpm 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
ornpm 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.
📃 PHP file WordPress coding standards
- WordPress coding standards check for
.php
files is also configure via composer. Just runcomposer 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. Learn more.
$ npm run build
Builds the code for production. Learn more.
$ npm run format:js
Formats JavaScript files. Learn more.
$ npm run lint:css
Lints CSS files. Learn more.
$ npm run lint:css-fix
Check and auto apply Stylelint fixes on CSS files. Learn more.
$ npm run lint:js
Lints JavaScript files. Learn more.
$ npm run lint:js-fix
Check and auto apply ESlint fixes on JS files. Learn more.
$ npm run makepot
Generate language translations for PHP and JS files.
$ npm run packages-update
Updates WordPress packages to the latest version. Learn more.
Contribute
Your contributions and support tickets are welcome. Please see our guidelines before submitting a pull request.