Build a Block Series – Part 1: Development Environment

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. My plan is to record each step, taking it fairly slow and explaining as I go. I will try to keep each cast around 10-15 minutes, I’ll include show notes on my site here with links to each item covered. I hope to post a new cast each week.

My hunch the best way to learn is following along, doing each step, actually typing and running it. Pause the video if need be, sorry if I talk too fast. You might need extra time to catch up or understand the section.

Let’s kick it off, Part 1: Development Environment

The three main pieces needed for the development environment are:

  1. WordPress Development Site
  2. Code Editor
  3. Node/NPM Development Tools

WordPress Development Site

If you are just starting out, I recommend using Local by Flywheel to run your local WordPress development site. Local is a single application you download and install and tends to be much simpler than alternatives.

Alternatives

The core WordPress repository has a development environment script that works with Docker. This requires installing Docker, checking out the repository, and running the scripts to setup. It gives more flexibility, but can be tricky.

You can use WampServer or MAMP environments, both are quite similar to Local, combining a web server, PHP, and database. However these tools are not WordPress specific, so if not already using them, you might as well use Local.

You can work remotely on a server. This may require a little more setup, either syncing files, or editing the directly on the server.

My setup, I just use the built-in Apache and MySQL from the Linux repository. I’m quite familiar with the tools and have everything scripted up so this is easiest for me.

For this series, I’ll use Local by Flywheel. The important part is having a WordPress site installed, and know where and how to update files in the plugins directory.

Code Editor

I recommend using Visual Studio Code for your code editor. It works well and is becoming the defacto standard for web development.

If you have another editor you’re comfortable with it, that is great. This is more personal preference. The key is having a way to open, edit, and save text files.

Development Tools

The tools we need for development are Node and NPM. Nodejs is a runtime environment that allows running JavaScript outside of the browser. NPM is the Node Package Manager, it is used for installing dependencies and running scripts.

The tools are used to take the JavaScript we are going to write, which is in a syntax that the browser can not run, and transpile it into a syntax it can. This is called the build step.

You can download Nodejs directly from the main website and install. It also packaged for most package managers.

On Mac, I recommend using Homebrew package tool and install is: brew install nodejs

On Windows, you can use Chocolatey package manager and install using: choco install nodejs

It appears NPM comes bundled with the above installs. On Ubuntu, or Debian, NPM is bundle separately and you can install using: apt install nodejs npm

However you install Nodejs, the important part is being able to use them in your terminal. Open a termainl and be able to run node -v and npm -v to confirm they are installed.