How to Create Custom Gutenberg Blocks in 4 Easy Steps

Looking for an easy way to create custom Gutenberg blocks for your website? If so, you’ve come to the right page!

While the Gutenberg editor offers many basic blocks, sometimes you need something more specific. In this case, creating custom Gutenberg blocks is a great way to achieve the functionality you need.

In this WordPress Gutenberg tutorial, we’ll show you how to create custom Gutenberg blocks for your WordPress site in just four easy steps.

So, let’s get started.

What is a Gutenberg Block?

A Gutenberg block is a modular element in the WordPress Gutenberg editor that allows you to create and design content with ease. Each block serves a specific function, such as adding text, images, videos, buttons, and more. These blocks enable you to build rich, dynamic content without needing to write any code.

The Gutenberg editor, introduced in WordPress 5.0, replaced the classic editor to provide a more visual and intuitive way to design posts and pages. It uses a block-based system, where each piece of content is a block that you can easily move around, customize, and style.

There are several types of core blocks available in Gutenberg. Some of the most commonly used include:

1. Paragraph Block: To add and format text.
2. Image Block: This block is for inserting and customizing images.
3. Heading Block: To add headings to organize your content.
4. List Block: For creating ordered or unordered lists.
5. Quote Block: For highlighting quotes.

Gutenberg blocks can be nested, combined, and customized to create complex layouts. You can change the settings for each block, such as alignment, color, and typography, directly within the editor.

One of the major advantages of Gutenberg blocks is their reusability. You can save custom blocks as reusable blocks, allowing you to use the same content and settings across different posts and pages. This feature helps maintain consistency and saves time when creating repetitive content.

Why Create Custom Gutenberg Blocks?

As you know, the WordPress Gutenberg editor lets you build posts and pages by adding content and layout elements as blocks. While WordPress provides several commonly used blocks by default, sometimes you need something more specific.

In that case, you can create custom Gutenberg blocks to add unique features and functionality to your website that pre-built blocks may not offer.

Custom blocks can help automate processes and make content creation more efficient. For instance, you might want to create a custom block to display testimonials, which allows you to insert and manage them easily without coding knowledge.

Custom blocks can also be tailored to meet your website’s specific needs, providing solutions that generic blocks or plugins can’t achieve.

Additionally, custom blocks offer more control over the design and functionality of your content. This level of customization helps create a consistent and professional look across all your posts and pages.

Having said that, let’s see how you can easily create custom Gutenberg blocks in WordPress.

IMPORTANT: Before you create custom Gutenberg blocks, first make sure your WordPress site has Gutenberg enabled. If not, check out our detailed guide on how to get Gutenberg Editor in WordPress.

4 Easy Steps to Create Custom Gutenberg Blocks in WordPress

To create a custom Gutenberg block in WordPress, we will use a plugin called ‘Genesis Custom Blocks,’ which is designed for this purpose. This plugin is perfect for both beginners and intermediate developers as it simplifies the process and helps you build custom blocks efficiently.

First, install the Genesis Custom Blocks plugin from the WordPress plugin repository. After installation, activate the plugin to enable its features.

Once the plugin is activated, you can start creating your custom block. Follow the steps below to develop a testimonial block for your WordPress website.

1. Add a New Custom Gutenberg Block
2. Edit Your Block Template
3. Preview and Finalize Your Custom Gutenberg Block
4. Begin Using Your Custom Gutenberg Block

Step #1: Add a New Custom Gutenberg Block

Open your WordPress dashboard and navigate to Custom Blocks in the left menu. Click on Add New to open the block editor page.

Once inside the block editor page, give your custom Gutenberg block a name, like we have named Testimonials.

Next, by clicking on the Block, open its settings in the right pane, where you can configure advanced settings. Here, you can set categories, add keywords, choose name (slug), icon, and more.

Now, it’s time to customize the Testimonial we just created to fit our requirements. For this tutorial, we will add three different fields, which are: 

• Text area field
• Image field
• Reviewer Name field

To add a field, click on the plus (+) icon in the lower right corner of the block. It will also open the field settings in the right pane. Where you can configure the following options:

• Field Label: Enter a descriptive label for the field.
• Field Name (Slug): This will automatically be set based on the field label.
• Field Type: Choose the appropriate type from the drop-down menu. For the image field, select Image.
• Field Location: Choose whether the field appears in the editor or inspector.
• Field Width: Select a width from 25% to 100% relative to the total block width.
• Help Text: Provide a description to help others understand the field’s purpose.
• Default Value: Set an initial value that will appear in the field by default.
• Placeholder Text: Enter text that will appear inside the field when it is empty.
• Character Limit: Set a maximum number of characters that can be entered in the field.

Additionally, you can rearrange the fields using the drag-and-drop feature. To edit a field, click on it and modify its settings in the right panel. Once satisfied with your block, click Publish to save your custom Gutenberg block.

Step #2: Edit Your Block Template

Creating a custom block with the plugin is just the beginning. After publishing the custom block, you need to edit its template to determine how it will display data on your website. This involves using HTML, CSS, and PHP to ensure the block works as intended.

A custom block template defines the block’s functionality and appearance. There are two main methods to create a template:

1. Using the Built-in Template Editor: Ideal for HTML, CSS, and static data.
2. Create and Configure the Template Manually: Necessary for complex data and PHP-based blocks.

Let’s check out both methods.

Method #1 Create Template via Built-in Editor

• Open the custom block page and go to the Template Editor tab.

 Here, you can edit the HTML (markup) and CSS directly. For our Testimonial custom block, add the following HTML to the editor:

<div class="testimonial-block">
    <div class="testimonial-content">
        <p class="testimonial-text">{{ text_area_field }}</p>
        <div class="testimonial-image">
            <img src="{{ image_field.url }}" alt="Testimonial Image" />
        </div>
        <p class="testimonial-name">{{ reviewer_name_field }}</p>
    </div>
</div>

• Next, switch to the CSS tab and add the following CSS code:

.testimonial-block {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.testimonial-content {
    text-align: center;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 15px;
}

.testimonial-image img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 15px;
}

.testimonial-name {
    font-weight: bold;
}

This method completes your template using the built-in editor.

Method #2: Create and Configure the Block Template Manually

For more complex templates involving PHP, follow these steps:

1. Create a Folder: On your system, create a folder named after your block (e.g., testimonials).
2. Generate the Block PHP File: Inside the folder, create a file named block.php and add the following code:

<?php
function block_field() {
    // Your PHP code to fetch and display data
}
?>

The ‘block_field()’ function fetches data and styles your custom block.

3. Generate the Block CSS File: In the same folder, create a file named block.css and add the following CSS:

.testimonial-block {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.testimonial-content {
    text-align: center;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 15px;
}

.testimonial-image img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 15px;
}
.testimonial-name {
    font-weight: bold;
}

Now, your testimonials folder should contain block.php and block.css.

4. Upload the Template Folder: Use an SFTP client like FileZilla or your hosting provider’s file manager to upload the folder. Connect to your website and navigate to /wp-content/themes/your-current-theme/.
5. Create a Blocks Folder: Inside this directory, create a new folder named ‘blocks.’

6. Upload Your Block Folder: Upload the ‘testimonials’ folder into the blocks folder.

This completes the manual block template creation process.

Step #3: Preview and Finalize Your Custom Gutenberg Block

Before finalizing a custom WordPress block, you must preview it. This allows you to fine-tune settings and ensure the block appears correctly on your website.

• First, navigate to the Editor Previewer tab and input some sample content into the block. This helps you see how the block will function with actual data.

• Next, click the Update button to save your changes.

• After updating, switch to the front-end preview to see how the block will display on your live WordPress site.

By thoroughly previewing and testing, you can ensure that your custom Gutenberg block works as intended and looks great.

Step #4: Begin Using Your Custom Gutenberg Block

After creating the block, configuring the template, and previewing it, you can start using the Testimonial block on your website. 

You can create a new page or post, or edit an existing one. Click on the widgets option in the top left corner and search for your custom block.

Once you find your custom block, drag and drop it onto your page or post. Input the content you want to display.

Your custom Gutenberg block is now ready for use. This process allows for quick development, and you can follow similar steps to create and use other custom blocks on your WordPress site.

Just ensure you have the correct HTML, CSS, and PHP code for each block. In just four simple steps, your custom block will be ready to use and publish.

Benefits of Creating Custom Gutenberg Blocks

Creating custom Gutenberg blocks in WordPress offers several significant benefits, such as:

• Time Efficiency: Custom blocks reduce the time needed to set up different content elements.
• Tailored Solutions: They effortlessly meet specific requirements that generic blocks cannot.
• User-Friendly: Non-technical users can manage and update content with minimal training.
• Theme Consistency: Custom blocks help maintain alignment with your site’s theme and design.
• Enhanced Appeal: They improve the visual appeal of your website, making it more engaging.
• Increased Productivity: Custom blocks streamline content creation, boosting overall productivity.
• Custom Functionality: They allow for the addition of unique features tailored to your website’s needs.

Better Performance: Optimized custom blocks can enhance your website’s performance by minimizing the use of unnecessary code.

Final Remarks on Custom Gutenberg Blocks Creation

If you want to create custom Gutenberg blocks, the good news is that it’s very easy to do. Custom Gutenberg blocks enable you to add unique functionality and design to your WordPress website without needing extensive coding knowledge.

By following these four easy steps, you can easily create custom Gutenberg blocks. Which in turn enhances your website’s capabilities and streamlines content creation. 

Custom blocks help you save time, align content with your theme, and make your website more appealing.

If you still have any questions, feel free to ask in the comment section below. We would love to help!