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:
- WordPress Development Site
- Code Editor
- 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.
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.
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.
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.