3 Ways To Create Custom Gutenberg Blocks in WordPress

Gutenberg has been the WordPress content editor since version 5.0, released at the end of 2018. Despite several years passing since its integration, many developers still prefer the classic, old-school editor, while some have opted for alternatives like ACF Flexible Content.

The Classic Editor plugin remains one of the most popular WordPress plugins, boasting more than 5 million active installations. There are several reasons for this preference.

One is the change in approach, which transformed the editor-only experience into a page builder, rendering pure editors less effective. Another reason is the complexity of adding custom blocks to Gutenberg.

WordPress has evolved as a PHP CMS, while Gutenberg is React-based, requiring knowledge of React to add custom blocks. But regardless of our attitude, Gutenberg is the default WordPress editor, and it's clear that it will eventually replace the Classic Editor.

Moreover, the concept behind Gutenberg blocks surpasses traditional theme PHP templates, offering a modular and reusable approach. This article will help you become familiar with Gutenberg by exploring all the ways to create custom Gutenberg blocks, including methods that don't require React knowledge.

The first and default method to create Gutenberg blocks is by using React. The primary idea is to register a new block in WordPress by adding a block.json file to your theme and defining JavaScript code that produces HTML using React and the WordPress JS API.

FYI: React is a JavaScript library for building user interfaces, developed by Facebook. It allows developers to create reusable UI components that efficiently update and render when data changes. React utilizes a virtual DOM for optimizing performance and provides a declarative syntax for describing UI elements.

There are official tutorials available or you can explore a comprehensive course from fullstackdigital. While this approach is straightforward, it has a couple of significant drawbacks, including the requirement for React knowledge and limited abilities in adding block settings.

Regarding the latter, while it offers a range of settings like simple text input or checkboxes, mastering more complex items, or adding conditional logic requires additional effort.

Gutenberg is still actively developing, and perhaps in the future, the process will become simpler and smoother. If you're not familiar with React or are seeking faster solutions, consider exploring alternative methods.

An alternative solution is to create Gutenberg blocks using meta fields plugins such as Advanced Custom Fields, Meta Box, or Pods. These plugins are well-known for their meta field capacity, custom post type (CPT), and taxonomy management features.

In addition to these capabilities, they also offer features for creating custom Gutenberg blocks. The main idea is simple: since each of these plugins already offers a wide range of field types, why not allow users to create custom blocks and assign any fields to them?

This approach abstracts away from React and block settings management, making it easy to create blocks, assign any fields as settings, and render them using familiar PHP templates.

It simplifies block creation, removes the need for React knowledge, and allows for easier management of block settings. However, there is one drawback: if you don't already use these plugins, you'll likely need to pay for them.

ACF Blocks is a feature of the ACF Pro version, while the MB Blocks add-on is sold separately. Pods Blocks are entirely free to use, but they're limited to basic field types only.

On the positive side, purchasing these plugins grants access not only to the Blocks feature but also to the entire framework, including meta fields, custom post types, and taxonomy management. Moreover, these popular plugins have numerous integrations with various tools and page builders.

For instance, the Advanced Views framework brings smart templates with post queries and automated template generation. It supports the block features of the mentioned plugins, making it super easy to master custom Gutenberg blocks.

While the main scheme for the Gutenberg block creation process is the same, the final implementation slightly differs in each of the meta plugins. Therefore, it's advisable to check vendor-related information for detailed guides on ACF Blocks, MB Blocks, and Pods Blocks.

In case you haven't used these plugins before and are unsure about your choice, we recommend reading our in-depth comparison of the best meta-field plugins.

Diving into the topic, it's worth mentioning that there are plugins that provide a PHP API for creating Gutenberg blocks.

Essentially, this approach is quite similar to the meta plugins mentioned above, with the main difference being that these plugins are focused solely on Gutenberg blocks and do not allow for the management of custom fields or custom post types.

The most famous solutions in this category are Lazy Blocks and BlockStudio. Lazy Blocks offers a Lite version for free, while BlockStudio is exclusively available as a Pro version.

While it may seem like a more precise tool, offering better and cheaper functionality compared to the plugins mentioned above, surprisingly, the Pro versions of such plugins cost the same or even more than the meta plugins.

Therefore, using the Pro version of these plugins makes sense if you're solely focused on Gutenberg blocks and don't require any of the extra features offered by the meta plugins.

Gutenberg is an integral part of WordPress, and mastering custom Gutenberg blocks is essential for any WordPress developer. Each of the three methods we just reviewed has its own benefits and drawbacks, so it's up to you to choose the one that fits your case best.