Creating Custom Blocks for the WordPress Block Editor

WP Engine just announced the launch of a new plugin called, Genesis Custom Blocks, this is not to be confused with their page builder plugin, Genesis Pro.

This new plugin is awesome! It will save you a ton of time when building custom blocks for the WordPress block editor, and allow you to reduce the number of plugins you need.

This article provides a detailed over view of the plugin, a complete walkthrough demo on how to build a block with the plugin, and downloadable sample code to help you get started.

What This New Plugin Means

3 reasons to get existed about the custom blocks plugin

1. Take control of design – Implement beautiful, custom designs with fine-tuned front-end templating control.
2. Build unique functionality – Build blocks that function and behave exactly as you need.
3. Extend & Integrate – Easily extend your custom blocks to integrate with third-party apps and plugins.

What You Need to Know

This is NOT a code free solution. Using this plugin will require some basic skills with PHP, html, and CSS.

Although we tend to focus our articles on CODE FREE solutions, we thought is one was worth an introduction.

This single plugin can take your website design and functionality to whole new level if you can learn these basic skills.

The documentation for this new plugin is very well done and very helpful for successfully using this plugin.

Although they mention this plugin is not built after the freemium model of, try it out with limitations, then upgrade to the paid version for all the features, it seems like it kinda is, for developers.

This is a screenshot taken from the upsell page in the plugin:

Check out Genesis Pro here!

Genesis Custom Blocks Requirements

If you’re familiar with the Genesis Framework, you probably know that the plugins developed by the Genesis team, require the use of the framework, but not in this case!

• Does NOT require you to use the Genesis Framework.
• The theme you use, must have support for the block editor.
• You can not have the Classic Editor plugin activated.
• Genesis Pro is NOT required.
• Basic PHP, HTML, CSS knowledge.
• Ability to follow documentation.

What Kinds of Blocks…?

You could literally build any type of block you want with this plugin, but your skills, or lack there of, will be your limitations.

That said, this is a list of available fields you could use to build your custom blocks.

• Text Field
• Image Field
• URL Field
• Toggle Field
• Textarea Field
• Select Field
• Range Rield
• Radio Field
• Number Field
• Multi-select Field
• Email Field
• Color Field
• Checkbox Field

With the advanced features currently available in the Genesis Pro page builder, you’ll have a few more fields and functions.

• Repeater Field
• Taxonomy Field
• Post Field
• User Field
• Rich Text Field
• Classic Text Field
• Block Level Import/Export

My First Custom Block

So I wanted to show you just how easy this is to use, and I needed a better quotes block anyway.

I’ll make these files available for you to download to use as a starter template.

Before you jump into this video, I want you to understand, I am NOT a hardcore coder, I have an understanding of HTML and CSS and I was able to follow the documentation provided by the plugin developers to get this done.

This first video is an overview of the process. The second video is more of a detailed walk through on how to use this plugin to build your custom block.

The video below is a complete walkthrough on how to build a custom block with the Genesis Custom Block plugin.

The Wrap Up

It’s probably clear that I am excited about the introduction of this new custom blocks plugin! And I might be a little bias because I have been a user and fan of StudioPress and the Genesis Framework for ten plus years, but regardless this plugin is a game changer.

We’re excited about the possibilities for custom development and the ability to offer additional services to our customers for building custom blocks.

Since you can export and import with the Genesis Pro page builder and the pro version of the Custom Blocks plugin, we are very excited.

Use the demo video and the downloadable code templates to give it a try! You might just be as excited as we are.

As always, if you have questions feel free to use the comments or chat below.