Steps to Prepare for WordPress Block Development

WordPress blocks are the native editor for WordPress sites to store and represent content. In this article, we will discuss the steps to prepare for WordPress block development that you need to know.

Let’s take a brief look at what blocks are, how they work, and what is needed to start developing them.

WordPress Block

Blocks are used in the Post and Page Editor for creating and editing content, as well as in the Site Editor for creating and editing templates or theme patterns.

Fundamentally, blocks consist of a combination of HTML comments with a specific format that defines the block and, if necessary, HTML entities to represent the block content.

Structure of a Block

Let’s look at an example of a block in a post. On a local WordPress installation, create a new post, then add a title and some text content in the Post Editor.

Next, click the options icon at the top-right of the post and select the code view.

This is some content in a paragraph block.

As you can see, the HTML paragraph tag is wrapped in an HTML comment with the name wp:paragraph. The wp:paragraph comment is how WordPress knows that this is a paragraph block.

The actual block content is everything inside the wp:paragraph tag, in this case, the HTML paragraph tag, and the content inside it.

Now click “Exit code editor.” Then, on the sidebar, apply a background color to the block.

Switch back to code view, and notice how the wp:paragraph tag contains additional data. See the code below!

This is some content in a paragraph block.

The background Color property is added to the block wrapper in a special format called JSON. When this post is displayed on the front end, WordPress converts it into a CSS class to apply to the block.

Preparations Needed

In addition to installing WordPress on a local server and having a code editor, there are some additional tools required to develop these WordPress blocks.

You will need access to a terminal to run commands. Next, you will need to install Node.js and npm.

All About the Terminal

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

A terminal is a tool that allows you to interact with your computer using text commands. It is also known as the command line or command prompt. Your operating system will determine what the terminal looks like and what commands are available.

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

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

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

However, we recommend using a terminal app for Windows called PowerShell, as it can be configured to work similarly to the macOS and Linux terminals.

Some versions of Windows come with PowerShell pre-installed, but it’s best to install the latest version from the Microsoft website. To download PowerShell, click here https://learn.microsoft.com/en-gb/powershell/ and then install the downloaded file.

After installation, you can launch it by searching for PowerShell in the Start menu.

Once you have a functioning terminal, you can install the necessary software to start developing blocks.

Node.js and npm

Block development relies on using a JavaScript framework called React. To use React, you need to install Node.js and npm on your local computer.

Installing Node.js

Since npm is bundled with Node.js, you only need to install Node.js to get started.

There are several ways to install Node.js with npm, but we recommend using a tool called nvm (Node Version Manager). You can find details about nvm on github.com/nvm-sh.

This tool allows you to install and use different versions of Node.js depending on the software requirements.

Installing NVM on macOS and Linux

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

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

After installation, you can use the nvm install command to install the Node.js and npm versions you need.

Installing NVM on Windows

If you are using a Windows computer, you can install nvm via the Chocolatey package manager for Windows, specifically using the Chocolatey CLI.

The first step is to open PowerShell with administrator permissions by right-clicking the PowerShell menu item and selecting “Run as administrator.”

Next, browse the Chocolatey CLI setup documentation, and scroll down to the PowerShell Install Instructions section.

Copy the instructions and right-click in the PowerShell window to paste them.

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

Press Enter to execute the command. After Chocolatey CLI (also known as choco) is installed, use the following command to install nvm.

choco install -y nvm

After nvm is installed, you can use the nvm install command to install the required versions of Node.js and npm.

Using NVM

At the time this article was written, the stable LTS (Long-Term Support) version of Node.js is version 20, but check the Node.js website to see if there is a newer version when you install Node.js.

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

nvm install 20

You can also install the latest LTS version by running the following command.

nvm install --lts

Then, you can run `nvm list` to see which versions of Node.js are installed.

nvm list

Since 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

nvm use 20

This will set the Node.js version for the current terminal session to version 20. Additionally, it’s possible to run `nvm use –lts` to use the LTS version.

nvm use --lts

Finally, if you have multiple versions of Node.js and npm installed, you can set the default version by running the nvm alias default command:

nvm alias default 20

Then check which version of Node.js and npm is active by running the following commands

node -v
npm -v

This is particularly useful if you’re working on multiple projects that require different versions of Node.js and npm.

Now that you have all the necessary tools, you can start your WordPress block development journey.

Additional Resources

The WordPress Developer Documentation has an entire section dedicated to the Block Editor, which contains a wealth of information about blocks, block development, and various packages available for block developers.

It’s also a good idea to read the Block Development Basics section to get a better understanding of the process.

Mangcoding can shared. We hope this article is useful and provides new knowledge for you. If you have any constructive criticism or suggestions, feel free to leave a comment or send them via Email or social media.

Source : Steps to Prepare for WordPress Block Development