Skip to the content
Marcus Kazmierczak
  • /code
  • /now
  • /about

Build a Block Series

A set of posts walking through the entire process fo creating a Gutenberg block for the WordPress block editor.

    Build a Block Series – Part 1: Development Environment

    November 26, 2019

    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. […]

    Build a Block Series – Part 2: WordPress Plugin

    November 26, 2019

    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 […]

    Build a Block Series – Part 3: Anatomy of a Block

    November 26, 2019

    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 […]

    Build a Block Series – Part 4: Block Attributes

    December 3, 2019

    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 […]

    Build a Block Series – Part 5: ES6+ Syntax

    December 9, 2019

    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 […]

    Build a Block Series – Part 6: QRCode

    December 12, 2019

    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 […]

    Build a Block Series – Part 7: Placeholder

    January 16, 2020

    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 […]