This is the first tutorial of the “Learning Three.js” series! This series is about learning Three.js, together with you. Although Three.js has been around for some time now, I’m an absolute beginner in this field. The reason why I wanted to learn this is because I really want to make cool 3D animations for my websites, just like those cool websites on awwwards.com.

As always, the full code for this demonstration will be on Github at this link.

Setting up Webpack

The most important package we’ll need is of course the Three.js package. Install it from npm:

npm install --save three

Take a…


Dusk time in Hong Kong

Check out my last tutorial on explaining block attributes! It’s worth your time as it gives you a more in-depth understanding on how attributes work.

This time I’m going to show you how to add alignment controls in the Block Toolbar in your custom Gutenberg blocks in 3 minutes! The full plugin code demonstrated in this article is on my Github repo(the alignment-toolbar branch).

What is the Block Toolbar

The Block Toolbar appears just above the block whenever you select a block in the Block Editor. The toolbar has a couple of icons which let you tweak the block settings quick and easy. …


This is how I start the day

In this guide, I’ll show you how to use the component in your blocks as simple as possible. Forget the need to set ‘source’ or ‘selector’ properties, just plain string attributes will work the same!

The plugin code for this guide is all pushed to my Github repo(note that you should be on the richtext-block-demo branch). As always, read the full code in my repo; I’ll just highlight the important bits here.

Know your Block

The component allows developers to edit lines of text on the spot in the Block Editor, providing us with various formatting options(e.g. bold, italic, superscript, subscript…


https://www.pexels.com/photo/person-holding-turned-on-silver-laptop-computer-261662/

In my last tutorial, we solved the dependency management issue for Gutenberg Block development once and for all. Now we can import whatever @wordpress dependencies we want hassle-free! This time, I’m gonna explain the centrepiece of block development — attributes.

Check out my next tutorial on adding alignment controls in the Block Toolbar!

When I first learn and search about block attributes on the web, I couldn’t find a single article that explains it well enough for me to understand the whole thing. So I decided, why not write the perfect guide myself? Let’s dive right in!

What are Block Attributes?

Gutenberg Block Attributes…


Check out my first tutorial in my Gutenberg Tutorials series: Gutenberg Tutorials: #1 How to Build a Simple Gutenberg Block with Webpack and the next tutorial Gutenberg Tutorials: #3 Attributes — Demonstrated and Explained.

Welcome to the second tutorial in my Gutenberg Tutorials series! Last time, we got our simple Gutenberg block built by a basic Webpack setup up and running. This time, we’re going to focus on how to get the correct and required dependencies set when we register our editor script with . This is a pretty important step and we should get this right as soon as…


has been introduced since WordPress 5.6, which fixes a previous weird issue where the property is only passed in the edit function but not the save function in . With , we can use the same ‘wp-block-’ prefixed class name in both the edit and save functions!

Assuming your registered block type has the name: ‘’, then the default generated className we can extract from would be ‘’(forward slashes are converted to hyphens).

Prerequisites of using useBlockProps

Firstly, make sure your WordPress version is 5.6 or above.

Secondly, pass key/value pair (‘api_version’ => 2) to the arguments array like this:


This is the first article in the Gutenberg Tutorials Series. This series aims at helping Gutenberg beginner developers as well as myself(learning by teaching 😄). TBH, I’m learning new stuff from even writing this article!

You can download the code used in this tutorial on the Github repository, or you can build the same plugin following all the steps below as well.

Check out my next tutorial: Gutenberg Tutorials: #2 How to Manage Dependencies when you do wp_register_script

Why am I writing this

Maybe you have already read the official Block Editor Handbook tutorials on how to build your first block type but feel like…

Franky Hung

Founder of Arkon Digital. I’m not a code fanatic, but I’m always amazed by what code can do. The endless possibilities in coding is what fascinates me everyday.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store