In this post you’ll learn how to:
- Download the source code of WordPress.
- Create a runnable version (build version) of the source code.
Downloading the WordPress source code
We’ll use the Git mirror hosted on Github to retrieve the source code. To do so, open a Terminal window, switch to a directory of your choice, and clone the repository to your machine with:
git clone https://github.com/WordPress/wordpress-develop
Now that we have downloaded the source code, we need to switch to the 5.0 branch. Change into the
wordpress-develop directory, and type
git checkout 5.0
For this step, you need to have Node.js & NPM installed on your local machine. You can download an installer from the Node website that contains both tools.
This changes WordPress from being a monolithic application to a more modular approach. In fact each package represents an independent module, that could also be used in other applications, not just WordPress.
npm install at the root of the
The WordPress Develop directory will now look like this:
Exploring the NPM setup
If you are unfamiliar with how NPM works, then this might seem like black magic to you. However, there are only a couple of things to know that will make this a lot more understandable:
package.jsonfile indicates the packages, along with their desired version numbers, that should be downloaded from NPM.
devDependencieskey in the
dependencieskey in the
package.jsoncontains the list of packages needed for the application. Without these, the application will not work.
node_modulesis the directory that contains all the packages we just downloaded, along with their dependencies.
package-lock.jsonfile contains all the version numbers and hashes of all the downloaded packages.
Now that we have seen how the packages get downloaded, we’ll have a deeper look at which of them are specific to Gutenberg.
If you look into the
package.json file, you’ll see a number of package names that start with
The WordPress packages are located in
node_modules/@wordpress/<package-name> at the root of the
wordpress-develop directory. So if you want to browse the source code, this is where to look.
The most important packages are (sorted alphabetically):
block: Exposes the API to interact with blocks: registration, settings, validation, saving, etc.
block-library: Registers the Core blocks that ship with WordPress 5.0. If you want to know more about how blocks work, this is the place to look.
components: Generic React components for building user interfaces. Examples are buttons, drop downs, date pickers, radio controls, checkboxes, etc.
compose: Higher Order Components that add basic features like unique instance identifiers to components.
core-data: Helper library to retrieve or change data in the database via the WordPress Rest API. Build upon the
data: The data handling API, build upon Redux. Includes client side storage mechanisms to reduce the number of needed requests to the REST API endpoints.
edit-post: The editor application itself. For internal use only.
editor: Components that are specific to the block editor. Examples are the rich text editable field, the alignment toolbar, the inspector (sidebar) control, etc.
element: An abstraction layer on top of React. You’ll use this package to create your own custom React components.
plugins: Exposes the API for Gutenberg plugins. Mostly used in combination with custom sidebars that are added to the editor.
Exploring the Gutenberg PHP code
Gutenberg has only a handful of PHP files. These have been integrated into the layout of the WordPress codebase, in the
blocks.phpcontains functions for registering blocks, parsing block content, and rendering blocks on the front end.
blocksdirectory contains the registration code and render callbacks for some of the Core blocks that require PHP to work.
- The endpoints specific to Gutenberg have been moved to the
Building WordPress 5.0
In the current state, you do not yet have a working piece of software. The missing step is building the application.
To do so, run
npm run grunt build at the root of
wordpress-develop. This will add a
build directory with build versions of the source code.
As a consequence, there needs to be a build process. The act of transforming source code from one language into its equivalent in another language is called transpiling. There are other tasks done during the build process, but this is the most important one.
wp-includes/script-loader.php file contains a
wp_default_packages_scripts() function which registers all these scripts in PHP. This allows the build scripts to be added as dependencies via PHP, both in Core, and for custom Gutenberg blocks in plugins and themes.
Now all you need to do is create a
wp-config.php file, and you’ll be able to run WordPress 5.0 out of the
If you’re not yet familiar with developing custom Gutenberg blocks, consider reading this guide for learning Gutenberg development in 6 days.