Learn how to create your own block using the custom block module.

We’ll cover the following:

How to create a custom block
Edit custom blocks
Create custom block type

Transcript

Trainer (00:00):
From this block layout page, if we click on Place block on a region, you can see all of the available blocks, which can be added into a region. And this is how we added the Powered by Drupal block into the sidebar. But what if you want to create your own block? What if you want to add some text welcoming users to your website? How do you do this? Luckily, there’s a module which comes with Drupal core custom block, and it allows you to create your own custom blocks, which can be added into any region. First, you want to make sure that this module has been installed, so close this pop-up and then go to Extend and I’ll open that up in a new tab and search for custom block and make sure it has been installed, but chances are you already have it installed. So let me close this tab.

Trainer (00:54):
And if we scroll all the way back to the top on the block layout page, you should see this tab Custom block library. From this page, you’ll see all of your custom blocks once they have been created. Obviously, we haven’t created any. That’s why none are appearing, but if we click on Block types, from here you can implement your own block types with its own field. Now, from a Drupal standpoint, custom blocks are fieldable entities and block types are the same as content types. Any field you can attach to a content type can be attached to a block. And if you installed Drupal using the standard installation profile, then you should see the basic block type with a single body field, which you can access by clicking on the Manage fields button.

Trainer (01:46):
Now let’s go ahead and create a block and add it to the sidebar. So let’s go back to the Blocks page. Now, you can create a block in two ways. First, you can click on the + Add custom block button on this page. Or if we go back to the Block layout page and click on one of the Place block buttons, you should see the same + Add custom block button in the pop-up and both buttons point to the same page, so it doesn’t really matter which button you press, but let’s create the block from the Custom block library page. So let me close this pop-up and then click on Custom block library, then + Add custom block. In the block description field, enter in Welcome. Then in Body enter in something like Welcome to our new website. Any text added into the Body field will be displayed in the block. Once you have finished filling out the Body field, scroll down and click on Save. And here we can see our custom block in the table.

Trainer (02:52):
Now we need to add the block into a region. Click on Block layout, then scroll all the way down to Sidebar first and let’s remove the Powered by Drupal block. And then scroll back down to Sidebar, first click on Place block, and we should see our custom block right here. Leave everything as it is, then click on Save block. And let’s also move it right to the top so we can see it, then scroll down and click on Save blocks. If we go to the homepage, we should see our Welcome block in the sidebar. And if you want to edit the custom block, all you need to do is hover over the block, click on the pencil icon and then click on Edit. This will take you directly to the block edit form. You can make your change. And then when you click on Save, you’ll be returned back to the page that you were on. If you can’t see this pencil icon when you hover over your blocks, make sure the Contextual Links module has been installed.

Trainer (04:03):
Let’s now go back to the Custom block library page. Click on Structure, Block layout, and then click on Block types. The welcome block that we just created is a basic block type and it has just a single field core body on it. Now I want to show you how to create your own custom block type, because just imagine you want to create call to action blocks with a body field, as well as a link field. This is where creating your own block type makes sense. So to create one, click on + Add custom block type, and then in Label, enter in Call to action. This is the name of your block type. You can enter in whatever you want, but I will enter in Call to action. And then in description enter in Used for CTAs, then click on Save. Click on Manage fields on the call to action row and here you can see that we automatically get a body field. Drupal adds this body field whenever you create a block type. You can delete this field, it is not required, but we’ll keep it in.

Trainer (05:11):
Now all we need to do is create a link field. So to create a field, just click on + Add field, then from the Add a new field dropdown, select Link and in Label I will enter in Read more. And leave everything as it is on this page and click on Save field settings and then scroll down and select Required under Allow link text, then scroll all the way down and click on Save settings. Now let’s go back to Custom block library, then click on + Add custom block, then Call to action. And in the Block description field, enter in Newsletter and in Body we’ll enter in Join our newsletter. And if we scroll further down in the URL field, we can add in /newsletter. Then in Link text let’s enter in Subscribe. This is the text that will appear on the link. Once you filled everything out, click on Save.

Trainer (06:16):
At this point, we created our block type and then we created a custom block using the call to action block type. Now we need to add the block into a region. So click on Block layout and scroll all the way down to Sidebar first, then click on Place block and you should see Newsletter right here. Then click on Place block again, leave everything as it is here, then click on Save block and we’ll move Newsletter above the Welcome block. Then click on Save blocks. Let’s now go to the front end and we should see our newsletter block in the sidebar.

Trainer (06:59):
Now I’ve noticed that the link field is displaying the label, which is Read more. Let’s hide that label. To do that, click on Structure, then go to Block layout, Custom block library, then Block types, then click on the down arrow on the call to action row, then Manage display and from label drop down on Read more, select Hidden, then click on Save. Then if we go back to the front end, we can see that the label is now hidden.

Trainer (07:31):
So that is how you can create your own blocks and block types. I’ve created all sorts of block types in the past. I’ve created ones that display a web form in a region, as well as slideshows and carousels.