A set of posts walking through the entire process fo creating a Gutenberg block for the WordPress block editor.
I’m kicking off a new series of screencasts for building a Gutenberg Block for the WordPress Editor. The intended audience is a developer who may not have experience with WordPress and/or JavaScript, so introductory level. The series will focus on building a QRCode block, that I have an idea for but have not yet built. […]
The second part of my series walking through building a Gutenberg block for the WordPress editor. See Part 1: Development Environment. Part two covers creating a WordPress plugin and setting up the JavaScript build for block development. After this part, all the pieces are in place to start creating a block. WordPress Plugin A WordPress […]
The third part in my series walking through building a Gutenberg block for the WordPress editor. This lesson covers the anatomy of a block. Previous casts: Development Environment WordPress Plugin Anatomy of a Gutenberg Block At its simplest, a block in Gutenberg is a JavaScript object with a specific set of properties. Here is the […]
The third part in my series walking through building a Gutenberg block for the WordPress editor. This lesson continues the anatomy of a block, specifically a block attributes. Previous casts: Development Environment WordPress Plugin Anatomy of a Block Block Attributes Attributes are the way a block stores data, they define how a block is parsed […]
The fifth part of my series walking through building a Gutenberg block for the WordPress editor. This part takes a break from new block development to explain some features of ES6+ syntax used, specifically Destructuring assignments, Arrow functions, and Imports. Previous screencasts: Part 1: Development Environment Part 2: WordPress Plugin Part 3: Anatomy of a […]
In this sixth screencast I get down to implementing the QRCode part of the block: loading the qrcode.js library and trigger it using the saved URL to create a QRCode. Previous screencasts: Development Environment WordPress Plugin Anatomy of a Block Block Attributes ES6+ Syntax QRCode Implementation In the cast, I alter the block’s save function […]
In this seventh part, I do away with screencasting and work on improving the editor interaction with the QRCode block. Specifically, showing in the editor how the QRCode will look when published. Previous screencasts: Development Environment WordPress Plugin Anatomy of a Block Block Attributes ES6+ Syntax QRCode Intro One of the primary tenets of Gutenberg […]