WPLake > Learning Hub > 3 Ways To Create Custom Gutenberg Blocks in WordPress

3 Ways To Create Custom Gutenberg Blocks in WordPress

Gutenberg, an evolution of the Classic Editor, offers a page-builder experience. Discover 3 ways to create custom Gutenberg blocks, including React-free alternatives.

Key Points at a Glance

  1. Gutenberg, as the next generation of the Classic Editor, shifts from a simple editor to a page builder.
  2. React-based custom Gutenberg blocks require knowledge of React and have limitations in adding block settings.
  3. Meta field plugins like Advanced Custom Fields offer an alternative method for creating Gutenberg blocks without needing React expertise.
  4. Dedicated plugins such as Lazy Blocks and BlockStudio provide a PHP API for Gutenberg block creation, focusing solely on blocks without managing custom fields or post types.

Table of Contents

Intro: Gutenberg as the Classic Editor replacement

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.

1. React-based custom Gutenberg blocks

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.

2. Creation of custom Gutenberg blocks with Meta plugins

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.

3. Dedicated plugins for Custom Gutenberg blocks creation

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.

Afterwords

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.

Was this article helpful?

Totally useless

Slightly helpful

Very helpful

FAQ mode

/

Learning mode

  1. What are the drawbacks of using React-based custom Gutenberg blocks?

    React-based blocks require knowledge of React and have limitations in adding block settings, which can be a barrier for some developers.

  2. How can I create custom Gutenberg blocks without needing React expertise?

    You can use meta field plugins like Advanced Custom Fields to create custom Gutenberg blocks without requiring React knowledge.

  3. Are there any dedicated plugins available specifically for creating Gutenberg blocks?

    Yes, plugins like Lazy Blocks and BlockStudio provide a PHP API for Gutenberg block creation, focusing solely on blocks without managing custom fields or post types.

  4. Can I still use the Classic Editor alongside Gutenberg?

    Yes, the Classic Editor plugin is still available for those who prefer the traditional editing experience and can be used alongside Gutenberg.

  5. Do I need to purchase additional plugins to use these methods for creating custom Gutenberg blocks?

    Some plugins, like ACF Pro for ACF Blocks or the Pro versions of Lazy Blocks and BlockStudio, require purchases for full functionality, while others like Pods Blocks are free to use.

Course navigation: WordPress Beginner

Content links (26)

About the Author

Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it