How to Create a Custom Gutenberg Block in WordPress (Easy Way)

Like Tweet Pin it Share Share Email

Do you need to create a customized Gutenberg block in your WordPress web site? After the WordPress 5.zero replace, you might want to use blocks to create content material within the new WordPress block editor.

WordPress ships with a number of helpful blocks that you should utilize when writing content material. Many WordPress plugins additionally include their very own blocks that you should utilize.

Nonetheless, generally you could need to create your individual customized Gutenberg block to do one thing particular.

When you’re in search of a straightforward answer to create customized Gutenberg blocks in your WordPress web site, then you definitely’re in the appropriate place.

On this step-by-step tutorial, we’ll present you the simple strategy to create a customized WordPress block for Gutenberg.

Creating a custom WordPress block for Gutenberg

Notice: This text is for intermediate customers. You’ll must be aware of HTML and CSS to create customized Gutenberg blocks.

Step 1: Get Began

The very first thing you might want to do is set up and activate the Block Lab plugin.

It’s a WordPress plugin that means that you can create customized blocks out of your admin panel with out a lot trouble.

Block Lab WordPress Plugin

To put in the plugin, you could comply with our newbie’s information on easy methods to set up a WordPress plugin.

As soon as the plugin is activated, you may proceed to the following step of making your first customized block.

Step 2: Create a New Block

For the sake of this tutorial, we’ll construct a ‘testimonials’ block.

First, head over to Block Lab » Add New from the left sidebar of your admin panel.

On this web page, you might want to give a reputation to your block. You possibly can write any identify of your selection within the “Enter block identify right here” textbox.

Enter Custom Block Name

We’ll identify our customized block: Testimonials.

On the appropriate aspect of the web page, you’ll discover the block properties. Right here you may select an icon in your block and choose a block class from the Class dropdown field.

The slug will probably be auto-filled based mostly in your block’s identify, so that you don’t have to alter it. Nonetheless, you could write as much as three key phrases within the Key phrases textual content area, in order that your block could be simply discovered.

Custom Block Properties

Now let’s add some fields to our block. You possibly can add several types of fields like textual content, numbers, electronic mail, URL, coloration, picture, checkbox, radio buttons, and rather more.

We’ll add three fields to our customized testimonial block: a picture area for the picture of the reviewer, a textbox for the reviewer identify, and a textarea area for the testimonial textual content.

Click on on the + Add Area button to insert the primary area.

Image Field Options

This may open up some choices for the sphere. Let’s check out every of them.

  • Area Label: You need to use any identify of your selection for the sphere label. Let’s identify our first area as Reviewer Picture.
  • Area Title: The sphere identify will probably be generated mechanically based mostly on the sphere label. We’ll use this area identify within the subsequent step, so make certain it’s distinctive for each area.
  • Area Kind: Right here you may choose the kind of area. We wish our first area to be a picture, so we’ll choose Picture from the dropdown menu.
  • Area Location: You possibly can resolve whether or not you need to add the sphere to the editor or the inspector.
  • Assist Textual content: You possibly can add some textual content to explain the sphere. This isn’t required should you’re creating this block in your private use.

You might also get some extra choices based mostly on the sphere sort you select. For instance, if you choose a textual content area, then you definitely’ll get further choices like placeholder textual content and character restrict.

You possibly can click on on the Shut Area button when you’re executed with the picture area.

Following the above course of, let’s add 2 different fields for our testimonials block by clicking the + Add Area button.

Final Custom Block Fields

In case you need to reorder the fields, then you are able to do that by dragging them utilizing the hamburger icon on the left aspect of every area label.

To edit or delete a selected area, you might want to hover your mouse over the sphere label to get the edit and delete choices.

When you’re executed, click on on the Publish button, current on the appropriate aspect of the web page, to save lots of your customized Gutenberg block.

Step three: Create a Block Template

Though you’ve created the customized WordPress block within the final step, it’ll not work till you create a block template named block-testimonials.php and add it to your present theme folder.

Create a Block Template

The block template file will inform the plugin easy methods to do show your block fields contained in the editor. The plugin will search for the template file after which use it to show the block content material.

When you don’t have this file, then it’ll show an error saying “Template file blocks/block-testimonials.php not discovered”.

Let’s create our block’s template file.

First, go forward and create a folder in your desktop and identify it blocks. You’ll create your block template file inside this folder after which add it to your present WordPress theme listing.

To create the template file, you should utilize a plain textual content editor like Notepad.

Each time you add a brand new area to your customized block, you might want to add the next PHP code to your block template file:

<?php block_field( 'add-your-field-name-here' ); ?>

Simply keep in mind to switch add-your-field-name-here with the sphere identify.

For instance, the identify of our first area is reviewer-image, so we’ll add the next line to the template file:

<?php block_field( 'reviewer-image' ); ?>

Easy, isn’t it? Let’s do the identical for the remainder of our fields:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Subsequent, we’ll add some HTML tags to the above code for styling functions.

For instance, you may wrap the reviewer picture inside an img tag to show the picture. In any other case, WordPress will show the picture URL which isn’t what you need, proper?

You can even add class names to your HTML tags and wrap your code inside a div container to fashion your block content material (which we’ll do on this subsequent step).

So right here’s our ultimate code for our block template:

<div class="testimonial-block clearfix">
	<div class="testimonial-image">
		<img src ="<?php block_field( 'reviewer-image' ); ?>">
	</div>
	<div class="testimonial-box">
		<h4><?php block_field( 'reviewer-name' ); ?></h4>
		<p><?php block_field( 'testimonial-text' ); ?></p>
	</div>
</div>

Lastly, identify the file as block-testimonials.php and put it aside contained in the blocks folder.

Step four: Type Your Customized Block

Wish to fashion your customized block? You are able to do that with the assistance of CSS.

Open a plain textual content editor like Notepad and add the next code:

.testimonial-block 
	width: 100%;
	margin-bottom: 25px;


.testimonial-image 
	float: left;
	width: 25%;
	padding-right: 15px;


.testimonial-box 

.clearfix::after 
	content material: "";
	clear: each;
	show: desk;

As soon as executed, identify the file as block-testimonials.css and put it aside contained in the blocks folder.

Step 5: Add Block Template File to Theme Folder

Now let’s add the blocks folder containing our customized block template file to our WordPress theme folder.

To try this, you might want to hook up with your WordPress web site utilizing an FTP consumer. For assist, you could try our information on easy methods to add information to your WordPress web site utilizing FTP.

When you’re related, go to the /wp-content/themes/ folder. From right here you might want to open your present theme folder.

Enter Theme folder using FTP

Now add the blocks folder, containing the block template file and the CSS file, to your theme listing.

As soon as executed, you may proceed to the ultimate step to check your customized block.

Notice: Block Lab plugin means that you can create theme-specific blocks. When you change your WordPress theme, then you might want to copy the blocks folder to your new theme listing.

Step 6: Take a look at Your New Block

It’s time to check our customized testimonials block. You are able to do this by heading over to Pages » Add New to create a brand new web page.

Subsequent, click on on the Add Block (+) icon and seek for the Testimonials block. As soon as you discover it, click on on it so as to add the customized block to your web page editor.

Add Custom Block to Page Editor

Now you can add a testimonial to this web page utilizing your customized block. So as to add extra testimonials, you may all the time insert new testimonial blocks.

When you’re executed, you may preview or publish the web page to verify whether or not it’s working correctly or not.

That’s all! You’ve efficiently created your first customized WordPress block in your web site.

Do you know you can save time with reusable blocks in your editor? Take a look at our information on easy methods to simply create reusable blocks within the WordPress block editor and use them on different web sites.

You might also need to see our information on easy methods to create a customized WordPress theme with out writing any code.

When you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can even discover us on Twitter and Fb.

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *