Day 2: Setting Up Your Environment for Gutenberg Development

Introduction

In Day 1, we explored the basics of the Gutenberg Block Editor and why it’s transforming the way we create content in WordPress. Now, it’s time to roll up our sleeves and dive into development. But before we start creating custom Gutenberg blocks, you need to set up a local development environment.

Having a proper environment is crucial for building and testing your blocks efficiently. In this guide, I’ll walk you through setting up your development environment with WordPress, Node.js, and the tools you need for Gutenberg block creation.

Why You Need a Local Development Environment

A local development environment allows you to create and test your Gutenberg blocks without impacting a live site. This way, you can experiment with new ideas, debug code, and preview changes in real-time. It also speeds up the development process since you don’t need to upload files or push changes to a live server.

Some tools we’ll be using include:

@wordpress/scripts for build tools, so you don’t have to configure Webpack manually.

Local WordPress installation for easy access and testing.

Node.js for managing JavaScript dependencies, as Gutenberg heavily relies on JavaScript.

NPM (Node Package Manager) to manage the required Gutenberg packages.

Step 1: Install a Local WordPress Environment

What is Local by Flywheel?

There are several ways to set up WordPress locally, but I recommend using Local by Flywheel. It’s a user-friendly tool that sets up WordPress quickly without needing to configure a web server manually.

How to Install Local by Flywheel:

1. Download Local by Flywheel: Go to LocalWP and download the version for your operating system (Windows, Mac, or Linux).
2. Install Local: Run the installer and follow the prompts to install the software.
3. Create a New WordPress Site:
   • Open Local and click “Create a New Site”.
   • Give your site a name (e.g., “Gutenberg Dev Site”).
   • Select the environment (I recommend using PHP 7.x and MySQL 5.7 for compatibility).
   • Set up a WordPress username and password.
   • Click “Add Site” to finalize the setup.

Once this is done, you’ll have a fully functional WordPress site running locally on your computer.

Alternative Options for Local Development:

If you prefer other options, you can also use:

• MAMP (for Mac) or XAMPP (cross-platform).
• Docker for a more technical, container-based setup.

Step 2: Install Node.js and NPM

Why You Need Node.js for Gutenberg Development

Gutenberg is built using JavaScript (React), which means you need Node.js to manage JavaScript packages and dependencies. NPM (Node Package Manager) comes bundled with Node.js, and you’ll use it to install Gutenberg development tools.

Installing Node.js:

1. Go to the Node.js website.
2. Download the LTS version (Long-Term Support) for your operating system.
3. Run the installer and follow the instructions.

Once Node.js is installed, verify it by running the following commands in your terminal or command prompt:

node -v
npm -v

These commands will display the version numbers of Node.js and NPM, confirming that the installation was successful.

Step 3: Set Up Your WordPress Theme for Gutenberg Development

We’ll create custom Gutenberg blocks within your WordPress theme or as part of a custom plugin. To keep things simple, let’s start by adding blocks to a theme.

Create a Child Theme (Optional but Recommended):

If you’re using a theme, it’s better to create a child theme to avoid overwriting changes during theme updates.

1. Create a Child Theme Folder: Inside the wp-content/themes directory of your local WordPress site, create a new folder called your-theme-child.
2. Create a style.css File: Inside the child theme folder, create a style.css file with the following content:

/*
Theme Name: Your Theme Child
Template: your-theme
*/

3. Activate the Child Theme: Go to the WordPress admin dashboard, navigate to Appearance > Themes, and activate your new child theme.

Step 4: Install @wordpress/scripts

The @wordpress/scripts package is a build tool that simplifies the development process for Gutenberg blocks. It manages dependencies like Babel (for JavaScript transpiling) and Webpack (for bundling), so you don’t have to configure these manually.

How to Install @wordpress/scripts:

1. Open your terminal or command prompt.
2. Navigate to your theme directory:

cd wp-content/themes/your-theme-child

3. Run the following command to install the @wordpress/scripts package:

npm init -y
npm install @wordpress/scripts --save-dev

4. After installing the package, create a src folder in your theme directory to store your block files.

Step 5: Set Up Your package.json Scripts

In your package.json file, add the following script to make it easier to build and watch your block development:

"scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
}

Now, every time you want to compile your Gutenberg blocks during development, you can simply run:

npm run start

This command will automatically build your project and recompile any changes you make in real-time.

Step 6: Preparing for Block Development

With everything set up, you’re now ready to start developing custom Gutenberg blocks. Before we dive into coding, here’s a recap of what we’ve done:

• Installed a local WordPress environment with Local by Flywheel.
• Installed Node.js and NPM to manage JavaScript dependencies.
• Installed @wordpress/scripts to simplify the build process.
• Set up your theme (or child theme) for block development.

Conclusion: Your Development Environment is Ready!

You’re now fully equipped to start creating custom Gutenberg blocks. Setting up the development environment is a crucial first step in any project, and now that you have everything in place, you’ll be able to develop, test, and optimize your blocks efficiently.

In Day 3, we’ll take our first step into building a custom Gutenberg block, walking through the file structure and the basics of block creation. Stay tuned for more!

Resources:

Day 1: Introduction to Gutenberg

Local by Flywheel.

Node.js