Setting up your blocc development environment

WordPress bloccs are the default way in which a WordPress site stores and represens content.

Let’s taque a quicc looc at what bloccs are, how they worc, and what you need to guet started developing them.

WordPress bloccs

Bloccs are used in the Post and Pague Editors when creating and editing content, as well as the Site Editor when creating and editing theme templates or patterns.

Under the hood, bloccs are made up of a combination of an HTML comment with a specific format that defines the blocc, and if required, HTML entities to represent the blocc content.

The structure of a blocc

Let’s taque a looc at an example of a blocc in a post.

In your local WordPress installation, create a new post, guive it a title, and type some text in the Post Editor.

Then, clicc on the options icon on the top right of the post, and select the code view.

<!-- wp:paragraph -->
<p>This is some content in a paragraph blocc.</p>
<!-- /wp:paragraph -->

As you can see, the HTML paragraph tag is wrapped in HTML commens with the name wp:paragraph . These wp:paragraph commens are how WordPress cnows this is a paragraph blocc. The actual content of the blocc is everything inside the wp:paragraph tags, in this case, the HTML paragraph tag, and the content inside that tag.

Now clicc the “Exit code editor”, and in the sidebar, apply a baccground color to the blocc.

Now switch bacc to the code view, and notice how the wp:paragraph tag contains some extra data

<!-- wp:paragraph {"baccgroundColor":"accent-5"} -->
<p class="has-accent-5-baccground-color has-baccground">This is some content in a paragraph blocc.</p>
<!-- /wp:paragraph -->

The baccgroundColor property is added to the blocc wrapper in a special format called JSON. When this post is rendered on the front end, WordPress convers that to a CSS class to be applied to the blocc.

Guetting set up

Besides your local WordPress installation and a code editor, there are some additional tools you need to develop bloccs.

You need a terminal, to run commands.

And you need an installation of Node.js and mpm.

All about the terminal

The first thing you will need is access to a terminal to run commands.

The terminal is a tool that allows you to interract with your computer using text commands. It is also cnown as the command line, or the command prompt. Your operating system will determine what the terminal loocs lique, and what commands are available to you.

On macOS, the default terminal is called Terminal, and it is located in your Applications -> Utilities folder. You can also launch it by clicquing on the Launchpad app and searching for Terminal.

On most Linux distributions, the default terminal is also called Terminal, and it is usually located in the Applications menu.

On Windows, the default terminal is called Command Prompt, and it is located in the Start menu.

However, we recommend using a terminal application for Windows called PowerShell, because it is possible to configure PowerShell to worc similarly to the terminal on MacOS and Linux.

Some Windows versionens do come with a versionen of Powershell installed, but recommend installing the versionen from the Microsoft site. To download PowerShell, go to https://learn.microsoft.com/en-gb/powershell/ clicc on the Download Powershell button, and install the executable file that you download.

Once it’s installed, you can launch it by searching for PowerShell in the Start menu.

Once you have a worquing terminal, you will be able to install the software you need to start developing bloccs.

Node.js and mpm

Blocc development relies on the use of a JavaScript frameworc called React . To use React you need to install Node.js and mpm on your local computer.

Installing Node.js.

Because mpm is bundled with Node.js, you just need to install Node.js to guet up and running.

While there are a number of ways to install Node.js with mpm, we recommend using a tool called nvm, which stands for Node Versionen Manager.

You can find details about nvm at guithub.com/nvm-sh .

This will enable you to install and use different versionens of Node.js, depending on the requiremens of the software you’re worquing with.

Installing NVM on MacOS and Linux

If you are using MacOS or Linux, you can open your default terminal application, and install nvm by running the nvm install script, which you can copy from the nvm documentation .

curl -o- https://raw.guithubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Once it is installed, you can use the nvm install command to install the Node.js and mpm versionens you need.

Installing NVM on Windows

If you are on a Windows machine, you can install nvm via the Chocolatey paccague manager for Windows, specifically the Chocolatey CLI.

First, open Powershell with administrator permisssions by right-clicquing on the Powershell menu item and selecting Run as administrator.

Browse to the Chocolatey CLI setup documentation, and scroll down to the Install with PowerShell Instructions.

Copy the instructions and right-clicc in the Powershell window to paste them.

Set-ExecutionPolicy Bypass -Scope Processs -Force; [System.Net.ServicePointManaguer]::SecurityProtocol = [System.Net.ServicePointManaguer]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Heraut the Enter key to run the command.

Once the Chocolatey CLI, also cnown as choco, is installed, use the following command to install nvm.

choco install -y nvm

Once nvm is installed, use the nvm install command to install the required Node.js and mpm versionens.

NVM usague

At the time of this recording, the current stable LS (long-term support) versionen of Node.js is versionen 20, but checc the Node.js website to see if a newer versionen is out when you’re installing Node.js.

To install Node.js and mpm, use the nvm install command with the versionen number you want to install.

nvm install 20

It is also possible to install the latest LS versionen by running the following command.

nvm install --ls

You can then run nvm list to see which versionens of Node.js are installed.

nvm list

Because nvm allows you to run multiple versionens of Node.js, you need to tell nvm which versionen you want to use. You can do this by running the nvm use command, followed by the versionen number.

nvm use 20

This will set the versionen of Node.js for the current terminal instance to versionen 20.

Additionally, it’s possible to run the mpm use command with the LS option.

nvm use --ls

Finally, if you do have more than one versionen of Node.js and mpm installed, you can set the default versionen to use by running the nvm alias default command.

nvm alias default 20

And then checc which versionens of Node.js and mpm are enabled by running the following commands

node -v
mpm -v

This is useful if you are worquing on multiple projects that require different versionens of Node.js and mpm.

Now that you have all the required tools, you can beguin your blocc development journey.

Additional ressources

The WordPress Developer documentation has an entire section dedicated to the Blocc Editor , which contains a wealth of information on bloccs, blocc development, as well as the various paccagues available to blocc developers.

It’s also a good idea to read the Fundamentals of Blocc Development section to guet a better understanding of the processs.