Prerequisites
Before you begin, ensure you have the following installed:Node.js
Gutenberg requires Node.js. The project currently uses Node.js v20 and npm v10. While we aim to use the Active LTS version, this may vary. We recommend using Node Version Manager (nvm) to manage Node.js versions:Git
Gutenberg uses Git for source control. Ensure you have:- An updated version of Git installed
- A GitHub account
Docker Desktop (Recommended)
We recommend using the@wordpress/env package for your local WordPress environment. Docker is required for this:
- macOS/Linux: Install Docker Desktop
- Windows 10 Home: Follow Docker for Windows with WSL2 instructions
GitHub CLI (Optional)
The GitHub CLI can be very useful for checking out pull requests locally from both the main repository and forks.Getting the Gutenberg Code
Fork and Clone
Fork the Gutenberg repository to your GitHub account, then clone it:Building Gutenberg
Install Dependencies
Install the project dependencies:Build the Plugin
You have two build options:Development Build (Recommended)
For active development with automatic rebuilds:Production Build
For optimized production builds:Local WordPress Environment
Using wp-env (Recommended)
The@wordpress/env package provides a quick way to create a standard WordPress environment using Docker.
Start the Environment
Make sure Docker is running, then startwp-env from the Gutenberg directory:
- Latest WordPress Docker image
- Gutenberg plugin mounted and activated
- Live reload of your local code changes
Access WordPress
- Site: http://localhost:8888
- Admin: http://localhost:8888/wp-admin/
- Username:
admin - Password:
password
- Username:
Database Access
phpMyAdmin: Available at http://localhost:9000/ Direct MySQL Connection:- Run
npm run wp-env startand note the MySQL port number - Use these connection details:
- Host:
127.0.0.1 - Username:
root - Password:
password - Database:
wordpress - Port: (from step 1)
- Host:
wp-env restarts.
wp-env Commands
Using Local or MAMP
If you prefer Local, MAMP, or WampServer:- Clone and build Gutenberg as described above
- Create a symlink or copy the Gutenberg directory to your
wp-content/pluginsfolder - For e2e tests, symlink test plugins:
Developer Tools
Configure your editor for the best development experience:EditorConfig
Install the EditorConfig extension for your editor. It will automatically configure your editor to match the project’s coding standards.ESLint
Install the ESLint extension for your editor:- VS Code: ESLint Extension
Prettier
Install the Prettier extension:- VS Code: Prettier - Code formatter
TypeScript
The project uses TypeScript via JSDoc for type checking JavaScript files. VS Code has built-in TypeScript support.Storybook
Test and develop UI components in isolation with Storybook:Next Steps
Now that your environment is set up:- Review the Development Workflow to learn the Git workflow
- Check the Testing Guide to understand testing requirements
- Read the Coding Guidelines for project conventions
- Explore the Folder Structure to understand the codebase organization