The wordpress-blocks-starter from benjaminluoma

View Code? Open in Web Editor NEW

A WordPress "Gutenberg" blocks boilerplate.

License: GNU General Public License v2.0

PHP 31.28% JavaScript 68.72%

wordpress-blocks-starter's Introduction

them.es WordPress Blocks

them.es WordPress Blocks is a WordPress "Gutenberg" blocks boilerplate which can be included in a theme.

Gutenberg blocks configuration tested in WordPress v5.8+
The legacy boilerplate which is compatible with WordPress <5.8 can be found in the "v1" branch
NPM configuration
ESNext
Support for a category where all custom blocks can be organized
A simple "Hello world" block implementation is included
Optional: Easily add more blocks

Prerequisites: Node.js (NPM) needs to be installed on your system
Download the source code of this repository to a new directory (e.g. /blocks) in your WordPress theme
Add the following code snippet to functions.php in your theme (or plugin)

$theme_blocks = __DIR__ . '/blocks/index.php';
if ( is_readable( $theme_blocks ) ) {
	require_once $theme_blocks;
}

Open /blocks in Terminal and install the required Node.js dependencies
$ npm install
A simple Hello world block implementation is included to get you started. More examples can be found in the official Gutenberg examples repository
You can easily include additional blocks by duplicating /src/block# and referencing the new block(s) in /src/index.js
Run the start script
$ npm run start
Develop the block(s) by modifying /src/block#/index.js - the official Gutenberg Handbook may help you learn how to build blocks
When you're done run the build script to create a minified version of your blocks
$ npm run build
Now you can test the block(s) in the WordPress Editor