Building custom blocks for WordPress

Blocks in WordPress are built in javascript (ES5, or ESNext/JSX then compiled down to js using webpack and bable). if you have used react or vuejs you will be very familiar with this workflow.

Install nodejs

First, you need to have node and npm setup on your system:

Linux: apt install nodejs npm
mac: brew install node
Windows: choco install node

Project init

I always start with git init, and add in a .gitignore:

git init
#.gitignore

# ignore everything in the root except the "wp-content" directory.
!wp-content/

# ignore everything in the "wp-content" directory, except:
# "mu-plugins", "plugins", "themes" directory
wp-content/*
!wp-content/mu-plugins/
!wp-content/plugins/
!wp-content/themes/

# ignore these plugins
wp-content/plugins/hello.php

# ignore specific themes
wp-content/themes/twenty*/

# ignore node dependency directories
node_modules/

# ignore log files and databases
*.log
*.sql
*.sqlite

Next, you need to use npm to init your node project and add the wordpress test scripts:
create a working folder

mkdir blocks
cd blocks

npm init
# answer the questions
package name: (block) block
version: (0.0.01)
description: my block
entry point: (index.js) build/index.js
test command:
git repository:
keywords:
author: myself
license: (ISC) closed, gpl, whatever -- see here https://spdx.org/licenses/

next, install the wordpress test scripts:

npm install --save-dev --save-exact @wordpress/scripts

Setup build scripts

using the example from wordpress developer docs, create a basic test block, at src/index.js

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'jonathansblog/block', {
title: 'Basic Example',
icon: 'smiley',
category: 'design',
edit: () => "Hello, world!",
save: () => "Hello, world!",
} );

this will give us something to test against, to create the actual javascript for the block, you have to build it:

add the following to the package.json scripts section:

"scripts": {
"build": "wp-scripts build",
"check-engines": "wp-scripts check-engines",
"check-licenses": "wp-scripts check-licenses",
"format:js": "wp-scripts format-js",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"lint:md:docs": "wp-scripts lint-md-docs",
"lint:md:js": "wp-scripts lint-md-js",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"packages-update": "wp-scripts packages-update",
"start": "wp-scripts start",
"test:e2e": "wp-scripts test-e2e",
"test:unit": "wp-scripts test-unit-js"
},

then you can build with

npm run build

You will now have the built javascripts needed, but how to load them into wordpress?

Building custom blocks for WordPress – Loading your block

in the root of the project, create a file called block.php (assuming your project is called ‘block’)

add this info to the file (its generated by the build stage and contains the version info and dependencies for you):

Now you can commit to your git repo and load into a wordpress instance (or run 'npm run start' and start creating your blocks!)

https://developer.wordpress.org/block-editor/tutorials/create-block/

https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/

https://jschof.com/gutenberg-blocks/gutenberg-blocks-made-easy/

https://jonathansblog.co.uk/making-a-new-wordpress-theme-from-scratch


0 Comments