Genesis Blocks & Genesis Custom Blocks Explained

Maddy Osman
Maddy Osman

Published:

Through a series of acquisitions in 2018, WP Engine acquired StudioPress — the makers of the Genesis Framework, and Array Themes — as well as the developers of Atomic Blocks. A few years later, in April 2020, WP Engine acquired Block Lab, a popular block-building plugin.

Later that year, WP Engine relaunched Atomic Blocks as Genesis Blocks and Block Lab as Genesis Custom Blocks to consolidate its portfolio of plugins under the Genesis brand. Together, these Genesis plugins allow you to extend the WordPress Gutenberg editor used by more than 74 million websites.

Want to learn how?

Here’s everything you need to know about Genesis Blocks and Genesis Custom Blocks.

Grow Your Business With HubSpot's Tools for WordPress Websites

What is Genesis Blocks?

Genesis Blocks is a library of blocks, sections, and layouts that improves the default block editor functionality in WordPress and helps you customize a WordPress site without having to code.

Genesis Blocks is available in two versions:

  1. Genesis Blocks (Free)
  2. Genesis Blocks Pro (Paid)

Genesis Blocks is the free version available on WordPress.org. It offers 15 dedicated blocks, one collection, 27 page sections, and nine page layouts to improve the WordPress block editing functionality.

Genesis Blocks Pro is a paid plugin available as part of the Genesis Pro subscription priced at $30/month.

Its pro features include everything in the free plugin plus two premium block types, reusable blocks functionality, blocks permissions, and additional collections, sections, and page layouts.

The Genesis Pro subscription also includes access to other products in the Genesis Product Suite, such as premium themes built on the Genesis Framework used by over 273,327 live websites, according to BuiltWith.

Features of Genesis Blocks

There’s no limit to what you can create with the WordPress Genesis Blocks plugin. It provides advanced block types and features that make it easy to design a website.

Let’s explore everything Genesis Blocks offers in the free and pro versions.

Blocks

The free version of the Genesis Blocks plugin supports 15 different types of blocks. Here are the five most notable blocks:

  1. Layouts Block
  2. Call To Action Block
  3. Button Block
  4. Sharing Block
  5. Spacer Block

You can view some of the other blocks in the image below.

 block types in genesis blocks

The Genesis Blocks Pro plugin includes the Device Mockup and Portfolio blocks as well. In addition to the premium block library, it adds the ability to create reusable blocks and assign block permissions.

Sections

Sections are small groups of pre-configured blocks you can add to posts and pages. They eliminate the need to manually add and organize blocks while designing content on a WordPress site.

sections genesis blocks plugin

For example, if you want to design a testimonials section for your site, you need a combination of columns, containers, headings, paragraphs, and images. But when you design with Genesis Blocks, you can add a ready-to-use testimonials section in just a few clicks.

Genesis Blocks offers nine pre-designed sections, and Genesis Blocks Pro adds over 150 pre-built sections to that selection.

Layouts

Layouts are groups of pre-designed sections that make it easy to design web pages because they give you a basic foundation to build your site on. Just add a layout block to a page, customize it, and publish it to your website.

layouts in genesis blocks plugin

The free version of Genesis Blocks offers nine unique layouts for different pages, such as the profile, about, home, and contact us pages. The premium version adds several more unique full-page layout designs to that list.

Collections

Collections are groups of page sections and block layouts that share similar color schemes or design aesthetics. They help you create cohesive designs across a website using themed components.

collections in genesis blocks plugin

Genesis Blocks includes a default collection called Slate, and Genesis Blocks Pro gives you access to six more collections. You can use them to design a website in a few hours. Add them to your site, customize the content, and you’re good to go.

Now that we have a feel for Genesis Blocks, let’s look at the Genesis Custom Blocks plugin.

What is Genesis Custom Blocks?

Genesis Custom Blocks is a WordPress plugin that makes it easy to build custom blocks for Gutenberg. The standard approach to building custom blocks in WordPress requires familiarity with React.js and the WordPress Block API.

In contrast, Genesis Custom Blocks lets you add extra blocks to WordPress using HTML, CSS, and the default WordPress block editor. You can also mix in some PHP if you want to add logic to your custom blocks.

Genesis Custom Blocks is available in two versions:

  1. Genesis Custom Blocks (Free)
  2. Genesis Custom Blocks Pro (Paid)

Genesis Custom Blocks helps you build blocks using three components — fields, functions, and filters. It supports 13 field types that allow you to add different input fields such as checkbox, number, and text-area.

The Genesis Custom Blocks Pro version offers six extra fields such as user, taxonomy, and post. It also lets you import and export custom blocks to reuse across multiple websites.

How to Use Genesis Custom Blocks

Here’s how you can use Genesis Custom Blocks to build a basic CTA block:

Step 1: Add a new custom block.

Navigate to Custom Blocks > Add New in the WordPress admin.

add new custom blocks

In the Block Builder, enter a name for your custom block.

name genesis custom blocks

Step 2: Design and configure the block.

Add input fields using the “+” sign and configure the input settings in the right-hand sidebar.

configure genesis custom block fields

Step 3: Build the block template.

Now click on Template Editor to start building the block and add your custom HTML to add structure to the block in the Markup section.

Then, click CSS and style your block using CSS.

add HTML and CSS in genesis custom blocks

Click on Editor Preview to view how the block will appear in the WordPress editor. Add sample content in the input fields to visualize the content.

editor preview in genesis custom blocks

Click Save Draft and preview the block as it would appear on the frontend using the Front-end Preview option.

Step 4: Save and publish your custom block.

Click Publish to save the block in your WordPress block library.

publish custom block

Using Genesis Blocks and Genesis Custom Blocks

Genesis Blocks and Genesis Custom Blocks offer unique ways to customize a WordPress website. We hope our guide has helped you understand the difference between these popular WordPress plugins and discover everything they have to offer.

The free versions of both plugins offer plenty of value by themselves. But, if you’re looking for a bit more, the pro versions add a layer of advanced functionality for those hoping to push the limits of modern WordPress design.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN