Developing for WordPress means working with its Block Editor. This is a JavaScript-based solution that lets the end user build a page in a modular fashion. Creating WordPress Blocks can be straightforward, but it has some challenges.
For example, you’ll often have to make sure you configure your environment. What’s more, if you’re unsure of the workflow, registering and rendering your Block isn’t fun.
In this post, we’ll look at a couple of ways to create WordPress Blocks. First, let’s show you what they are, and discuss why they’re worth creating.
What WordPress Blocks Are
For the unaware, WordPress introduced its Block Editor in 2018. It was called Gutenberg at first, although this name is still in use for the beta plugin version of the editor.
The idea is to create your WordPress posts and pages using Blocks. These are small, modular elements that provide specific functionality. For example, you can add paragraphs, headings, images, and more by selecting the right Block:
Blocks are much like the older meta boxes in the Classic Editor, in that you can also work with attributes too.
What’s more, users aren’t restricted to the default Blocks either. Through plugins, you can add more functionality (i.e. Blocks) to the editor. This is where you come in.
Why You’d Want to Create WordPress Blocks Over Plugins
The traditional approach for creating WordPress products is either themes or plugins. This makes sense, as they are both central to the User Experience (UX).
Though, Blocks represent somewhat of a middle ground for a few reasons:
- You install new Blocks through plugins, so there’s a similar building process.
- While Blocks are a structural element for your site, they can also introduce visual style too.
For example, collections such as Genesis Blocks gives you elements such as posts grids and containers. You can also find share icons and drop caps Blocks too.
On the whole, WordPress’ Blocks are the future of the platform. With the advent of Full Site Editing on the horizon, Blocks are going to be more prominent. Learning how to create WordPress Blocks is a skill that could (literally) pay off.
What You’ll Need In Place to Create WordPress Blocks
There are a few prerequisites you’ll need to create WordPress Blocks. The good news is most of them should already be in your possession if you’re a developer:
- A code editor. This is one argument we’ll stand back from to watch the fight. Though, popular solutions are Atom, VS Code, Vim, and Sublime Text.
- Coding knowledge. This is an obvious requirement. To create WordPress Blocks, you’ll need JavaScript, React, and Nodejs knowledge. Of course, your classic web development trinity of HTML, CSS, and PHP will also be necessary.
- A development environment. Your setup will depend on your system. You could use Laravel’s Homestead, Docker Desktop, Varying Vagrant Vagrants, and many more. You’ll also want to install some Node/NVM development tools too.
- Node Package Manager (NPM). This is a package manager that will help you install specific dependencies for creating Blocks.
Once you have these in place, you’ll be able to create so-called ‘vanilla’ WordPress Blocks at least. Some of the above is possible using the Advanced Custom Fields (ACF) plugin. We’ll discuss this in more detail later.
How to Create WordPress Blocks (2 Methods)
Within the next two sections, we’ll talk about how to create WordPress Blocks in two ways. While we won’t give you a full coding rundown, there will be guidance on how to achieve each approach.
What’s more, our second method doesn’t use JavaScript. We’ll give you more information on this later.
Still, note that we’re going to skip over some basic information, such as creating child themes. We’ll concentrate on the coding process, and assume you already have solid knowledge in this area.
1. Create a ‘Vanilla’ Block
Beware: This approach is not for the faint of heart. This is especially true if you’re new to JavaScript or WordPress.
To begin, you’ll need to have a WordPress development environment complete with a working site. You’ll also need to have installed Nodejs to be able to run JavaScript outside of the browser.
When you’re ready use the command line to navigate to your ‘dev site’, and find the plugins folder. Here, run the following:
npx @wordpress/create-block starter-block
This creates a new starter-block directory, a wireframe, and scaffold for your block. Advanced users can omit starter-block to run through a deeper interactive mode.
From here, head into WordPress, and activate your plugin from the dashboard:
You can then use the Block within the Block Editor as normal. Of course, this Block won’t have any functionality. While we can’t tell you how to code your Block, we can point you in the right direction.
In fact, the Make WordPress Website is the first place to go for learning to create Blocks. In a broad sense, you’ll register the Block, set its attributes, and style the Block using CSS enqueues.
Even so, it’s a complex process if you don’t have JavaScript knowledge. As an alternative, you could use a plugin to help bridge the gap, while letting you use PHP.
2. Use a Tool Such as Advanced Custom Fields to Create Blocks
In contrast to working with JavaScript, Advanced Custom Fields (ACF) lets you work in PHP. This gives you a chance to work with modern WordPress features using your existing skills.
For the unaware, ACF is a way to add extra fields and meta boxes to your WordPress editor screen. It used to be a go-to solution for enhancing the Classic Editor.
Though, it also has value when working with the Block Editor too. The premium version of ACF lets you create ‘ACF Blocks’. In other words, you can create Block Editor components from ACF’s functionality.
As such, you’ll need ACF Pro to follow along. There are three steps for creating a WordPress Block with ACF Pro:
- Register the Block in your template.
- Create the Block’s field groups within ACF.
- Render the Block on the front end.
To register the Block, you’ll be working within the functions.php file of your WordPress theme. First, you’ll declare a function that holds an array. Inside this, you’ll register the Block and some essential meta data. In our example, we’re creating a Testimonial Block:
Once you’ve done this, it’s time to head into WordPress. Here, you’ll look to the Custom Fields > Field Groups screen:
This lets you define the fields themselves. You’ll also want to make sure you’ve set how the Block will display in the Location field. We’ve set ours up so that the field group will only display if the user has selected the Testimonial Block:
The final step is to render the Block. This follows three sub-steps:
- Create a dedicated template file for your theme. This is the same one you declared for the render_template setting when registering the Block.
- Choose a method for rendering the Block.
- Enqueue your scripts and styles as you normal would.
Enqueuing your scripts uses a WordPress ‘hook’ and function that defines a CSS and JavaScript file. Through these, you can add specific Block styling and dynamism.
In Summary
The WordPress Block Editor has become a great way for end users to build their site. As such, there’s been a slight pivot from developing themes and plugins, to creating Blocks.
This post has focused on how to create WordPress Blocks. The direct approach is to use JavaScript to build a Block. Though, using a plugin such as Advanced Custom Fields is also a viable solution. The latter approach doesn’t need JavaScript knowledge at all. Even so, we’d suggest learning the ‘vanilla’ method, as this is going to offer more flexibility.
Are you thinking of creating WordPress Blocks, and if so, what’s your approach? Share your thoughts in the comments section below!