WordPress blocks are the default way in which a WordPress site stores and represents content.
Let's take a quick look at what blocks are, how they work, and what you need to get started
developing them. Blocks are used in the post and page editors when creating and editing content,
as well as in the site editor when creating and editing theme templates or patterns.
Under the hood, blocks are made up of a combination of an HTML comment with a specific
format that defines the block and if required, HTML entities that represent the block content.
Let's take a look at an example of a block in a post.
On your local WordPress installation, create a new post, give it a title, and type some text.
Then click on the options icon on the top right of the post and select the code editor view.
As you can see, the HTML paragraph is wrapped in an HTML comment with the name "wp colon paragraph".
These WP paragraph comments are how WordPress knows this is a paragraph block.
The actual content of the block is everything inside the WP paragraph tags,
in this case the HTML paragraph tag and the content inside that tag.
Now click "exit the code editor" and in the sidebar apply a background color to the block.
[
Now switch back to the code editor view. Notice how the WP paragraph tag now contains some extra data.
The background color property is added to the block wrapper in a special format called JSON.
When this post is rendered on the front end, WordPress converts that to a CSS gloss to be
applied to the block. Besides your local WordPress installation and a code editor,
there are some additional tools you need to develop blocks. You need a terminal to run commands
and the installation of Node.js and npm. Mac OS or any Linux users can use the terminal that ships
with the operating system. If you are a Windows user and you don't already have a terminal solution,
we recommend installing and using PowerShell as it's more beginner friendly and more tailored to
the Windows operating system. To install PowerShell, either open the Microsoft Store and search for
PowerShell or browse to microsoft.com/powershell. Browse to "setup an installation" and then follow
the instructions to download and install it. Block development relies on the use of a
JavaScript framework called React. To use React, you need to install Node.js and npm on your local
computer. Because npm is bundled with Node.js, you just need to install Node.js to get it up and
running. While there are a number of ways to install Node.js, we recommend using a tool called
NVM, which stands for Node Version Manager. You can find NVM at github.com/nvm-sh.
This tool will enable you to install and use different versions of Node.js,
depending on the requirements of the software you're working with.
If you're using Mac OS or Linux, you can open your default terminal application and install
NVM by running the NVM install script, which you can copy from the "Installing and Updating" section
of the NVM readme file. Once it is installed, you can use the NVM install command to install the
Node.js and npm versions you need. Here on a Windows machine, you will need to install
the Chocolatey package manager for Windows to install NVM. First, open PowerShell with
administrator privileges by right-clicking on the PowerShell menu item and selecting "Run as
administrator". Then, browse to the Chocolatey setup documentation and scroll down to the
"Install with PowerShell" instructions. Copy the instructions and right-click in the PowerShell
window to paste them. Once Chocolatey 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 npm versions. To install Node.js and npm, use the nvm install command with the version
number you want to install. At the time of this recording, the current stable LTS or long-term
support version of Node.js is version 20. But always check the Node.js website to see if a
newer version is out when you're installing Node.js. It is also possible to install the
latest LTS version by running the following command, nvm install --lts. You can then run
NVM list to see which versions of Node.js are installed. Because NVM allows you to run
multiple versions of Node.js, you need to tell NVM which version you want to use.
You can do this by running the nvm use command followed by the version number.
This will set the version of Node.js for the current terminal instance to version 20.
Additionally, it's also possible to run the nvm use command with the LTS option.
If you do have more than one version of Node.js and npm installed,
you can set the default version to use by running the nvm alias default command and then
specifying the version. Finally, you can run node -v to check the node version and npm -v
to check the npm version. WordPress developer documentation has an entire section dedicated
to the block editor which contains a wealth of information on blocks, block development,
as well as the various packages available to block developers. It's also a good idea to read
the fundamentals of block development section to get a better understanding of the entire process.