How to Create a Custom WordPress Block (Simple Method)


Want to create a custom Gutenberg block for your WordPress site?

Although WordPress comes with many basic blocks for creating content, you may need something more customized for your website.

In this article, we’ll show you an easy way to create custom Gutenberg blocks for your WordPress site.

Creating Custom Gutenberg Blocks in WordPress

Why create a custom WordPress block?

WordPress comes with an intuitive block editor that allows you to easily build your posts and pages by adding content and layout elements as blocks.

By default, WordPress comes with several commonly used blocks. WordPress plugins can also add their own blocks that you can use.

However, there may be times when you want to create your own custom block to do something specific and cannot find a block plugin that works for you.

In this tutorial, we’ll show you how to create a completely custom block.

To note: This article is intended for intermediate users. You will need to be familiar with HTML and CSS to create custom Gutenberg blocks.

Step 1: Start with your first custom block

First, you need to install and activate the Genesis Custom Blocks connect. For more details, see our step-by-step guide on how to install a WordPress plugin.

Created by the folks behind the popular Genesis Theme Framework and StudioPress, this plugin provides developers with simple tools to quickly create custom blocks for their projects.

For the purposes of this tutorial, we will create a “testimonials” block.

First, head toCustom Blocks ยป Add Newpage in the left sidebar of your admin panel.

Creating a new custom block

This will take you to the block editor page.

From there, you need to give your block a name.

block name

On the right side of the page you will find the properties of the block.

Here you can choose an icon for your block, add a category, and add tags.

Configure Block Parameters

The slug will be auto-populated based on your block name, so you don’t have to edit it. However, you can write up to 3 keywords in the Keywords text field so that your block can be easily found.

Now let’s add some fields to our block.

You can add different types of fields such as text, numbers, email address, URL, color, image, checkbox, radio buttons and much more.

We will add 3 fields to our custom testimonial block: an image field for the reviewer’s image, a text box for the reviewer’s name, and a text box field for the testimonial text.

Click on the[+] Add fieldbutton to insert the first field.

Add block field

This will open up a few options for the field. Let’s take a look at each of them.

  • Field label: You can use any name you want for the field label. Let’s name our first field ‘Reviewer Image’.
  • Domain name: The field name will be generated automatically based on the field label. We’ll use this field name in the next step, so make sure it’s unique for each field.
  • Field type: Here you can select the field type. We want our first field to be an image, so we’ll selectPicturein the drop-down menu.
  • Field location: You can decide if you want to add the field to the editor or the inspector.
  • Help text: You can add text to describe the field. It’s not required if you’re creating this block for your personal use, but it can be useful for multi-author blogs.

You may also get additional options depending on the type of field you choose. For example, if you select a text field, you will get additional options such as placeholder text and character limit.

Following the above process, let’s add 2 more fields for our testimonials block by clicking on the[+] Add fieldbutton.

If you want to rearrange the fields, you can do so by dragging them using the handle to the left of each field label.

To edit or delete a particular field, you need to click on the field label and edit the options in the right column.

Post block

When you’re done, click thePublishbutton, present on the right side of the page, to save your custom Gutenberg block.

Step 2: Create a Custom Block Template

Although you created the custom WordPress block in the last step, it won’t work until you create a block template.

The block template determines exactly how the information entered in the block is displayed on your website. You can decide how it looks using HTML and CSS, or even PHP code if you need to perform functions or do other advanced things with the data.

There are two ways to create a block model. If your block output is in HTML/CSS, you can use the built-in template editor.

On the other hand, if your block output requires PHP to run in the background, you will need to manually create a block template file and upload it to your theme folder.

Method 1. Using Built-in Template Editor

On the custom block editing screen, simply switch to the Template Editor tab and enter your HTML code under the markup tab.

Block model editor

You can write your HTML code and use double braces to insert block field values.

For example, we used the following HTML code for the example block we created above.

<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>

After that, switch to the CSS tab to style your block’s output markup.

Enter your CSS block pattern

Here is the example CSS we used for our custom block.

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Method 2. Manually Uploading Custom Block Templates

This method is recommended if you need to use PHP to interact with your custom block fields.

You will basically need to upload the editor template directly to your theme.

First, you need to create a folder on your computer, name it with your custom block name slug. For example, our demo block is called Testimonials, so we’ll create a testimonials folder.

Block model folder

Next you need to create a file called block.phpusing a plain text editor. This is where you will place the HTML/PHP part of your block template.

Here is the sample template we used for our example.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Notice how we used the block_field() function to retrieve data from a block field.

We’ve wrapped our block fields in the HTML we want to use to display the block. We have also added CSS classes so that we can properly style the block.

Don’t forget to save the file in the folder you created earlier.

Then you need to create another file using plain text editor on your computer and save it as block.css in the folder you created.

We will use this file to add the necessary CSS to style our block display. Here is the sample CSS we used for this example.

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Don’t forget to save your changes.

Your block template folder will now contain two template files inside.

block template files

After that, you need to upload your block folder to your website using an FTP client or the File Manager app in your WordPress hosting account’s control panel.

Once logged in, go to /wp-content/themes/your-current-theme/ case.

If your theme folder doesn’t have folder name blocks, go ahead and create a new directory and name it blocks.

Create a blocks folder in your WordPress theme folder

Now enter the blocks folder and upload the folder you created on your computer to the blocks folder.

Download block model files

That’s all! You have successfully created manual template files for your custom block.

Step 3. Preview your custom block

Now, before you can preview your HTML/CSS, you need to provide some test data which can be used to view sample output.

In the WordPress admin area, edit your block and switch to the Editor Preview tab. Here you need to enter dummy data.

Editor preview

Remember to click the Update button to save your changes before you can preview.

Save your template changes

You can now switch to the Front-End Preview tab to see how your block will look on the front-end (public area of โ€‹โ€‹your WordPress website).

Front-end preview of your website

If everything looks good, you can update your block to save unsaved changes.

Step 4. Using Your Custom Block in WordPress

You can now use your custom block in WordPress like you would use any other block.

Simply edit any post or page where you want to use this block.

Click the Add New Block button and search for your block by typing its name or keywords.

Inserting a custom block in posts and pages

After inserting the block into the content area, you will see the block fields you created for this custom block.

Overview of block fields

You can fill in the blocking fields as needed.

When you move away from the block to another block, the editor automatically shows a live preview of your block.

Block preview in Block Editor

You can now save your post and page and preview them to see your custom block in action on your website.

This is what the testimonial block looks like on our test site.

Custom block live preview

We hope this article helped you learn how to easily create custom Gutenberg blocks for your WordPress website.

You can also check out our guide on creating a custom WordPress theme from scratch, or check out our expert pick of must-have WordPress plugins for your website.

If you liked this article, subscribe to our Youtube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Custom WordPress Block (Easy Way) first appeared on WPBeginner.



Leave a Comment

Your email address will not be published.