The most fun and exciting way for me (and with me a lot of developers) to learn about new things, is to get hands-on and play with code. A great way to do this is having example code, preferably real-world example code.
The problem
In WordPress we’ve always had the luxury to have a great amount of plug-ins to download and look at the source code to see how others solved problems you might be facing. But since WordPress blocks are using React, and thus have a build step, the source code is now often not shipped with plug-ins we’re installing, including Gutenberg.
I wanted to learn more about block development by having the core blocks on the one hand, and on the other the source code for these blocks, so I can tinker and play with the code and see what happens. Break them, fix them, improve upon them and learn about building them by looking at the actual code used for them. To fill the gap that’s there after you’ve finished a few very basic tutorials.
The solution
Luckily, Gutenberg is still open source so the source code is still available, but the project is quite big and can be a little intimidating to navigate.
Today I’ll show you how to get the source code on your local machine, how to run the development and build processes from the project with Webpack and how to use wp-env to spin up a local environment where you don’t have to worry about breaking anything.
Preparations
In this post I’m using wp-env to spin up a local environment. You can use anything you like (I really like to use LocalWP when developing WordPress sites, themes or plug-ins), but I recommend following along with wp-env as it really suits our goal as you will see.
To use wp-env you need to have Docker installed on your machine. Don’t worry, you don’t need to know anything about Docker, but if you want to learn more about it I recommend this Docker course by Mosh.
You also need to have Node v14 installed to run the build process for Gutenberg. I recommend installing Node Version Manager to be able to switch between Node versions easily. If you haven’t used it before, learn how to install nvm.
Once you’re done with these preparations, we’re ready to get our hands dirty.
Setting up our environment
Getting the Gutenberg code
First fork the Gutenberg repository, clone it to your computer and add the WordPress repository as upstream.
git clone https://github.com/YOUR_GITHUB_USERNAME/gutenberg.git
cd gutenberg
git remote add upstream https://github.com/WordPress/gutenberg.gitBuilding Gutenberg as a plugin
Install the Gutenberg dependencies and build your code in development mode. If you use NVM as your Node version manager, don’t forget to run nvm use before installing the packages.
npm install
npm run startAfter running the start command, Webpack will be watching for changes you make to the block files and recompile your files on every save.
You can also manually run npm run build after you’ve made changes.
Spinning up the WordPress environment
Make sure Docker is running for this step. wp-env can run in a plug-in directory to create and run a WordPress environment, mounting and activating the plugin automatically. You can also configure wp-env to use existing installs, multiple plugins, or themes. You can optionally read more about configuring wp-env.
You can now simply start and stop your environment by opening another terminal tab in your gutenberg folder, and running npm run wp-env start to start an environment, and running npm run wp-env stop to stop it when you’re done.
Finding the blocks
You’re almost there! The environment is up and running and Webpack is watching for file changes. The last step is finding the right files. This can be daunting as the project is quite big. Luckily, I got you.
Blocks
You can find all the source files for the core blocks in gutenberg/packages/block-library/src/. Once you start editing files in the folders you find here, you’ll see the blocks change in the frontend.
Breaking and building
Have fun breaking, building, fixing, improving and maybe even contributing to the core blocks!
