Introduction

When you initially install Drupal it will come with quite useful default blocks, like search bars, layouts, etc. However, sooner or later you would probably want to create your custom blocks. Luckily, creating new blocks is a relatively simple task which we will explore in the following lines of this guide.

Before we begin we would like to encourage you to take a look at our How to manage Blocks in Drupal tutorial where we have explained the Blocks concept in a nutshell. If you are not quite familiar with blocks yet, you will find a lot of useful information.

Alternatively, if you already have some experience with Drupal blocks you are good to go and we can start off.

Accessing the Custom block library page

In order to begin, please log in to your Drupal Admin Dashboard and navigate through the Administration toolbar to Manage > Structure.

Once you are located on the "Structure" page, please click on the first "Block layout" link.

When you access the "Block layout" page you will notice it consists of two tabs. For the purpose of our tutorial, please switch to the second "Custom block library" tab.

Under it, you will be presented with two subtabs, please access the second one - "Block types"  

Now that you are located on the intended page, please click on the "+ Add custom block type" button.

Creating a Custom Block Type

Once you are redirected to the "Add custom block type" page, all you will need to do is enter the block type "Label" and write a "Description" if necessary. It is optional, therefore if it is not needed you may as well leave it blank.

You will also be able to create a revision that will hold an informational log regarding the changes applied to this block type. This is a useful feature in case you have multiple people managing your website.

When you are ready, please click on the "Save" button to finalize the creation process.

Once saved, you will be redirected back to the "Block types" page where you will have to click on the "Manage fields" button to further configure your new block type.

Under the block type configuration page, you will be able to edit and add fields as well as to manage its display settings. In other words, you can completely customize the block type depending on your requirements.

Let's say we would like to add a new field to it. This can be done by clicking on the "+ Add field button" located under the "Manage fields" tab (the default one).

When the button is clicked, you will be presented with a dropdown from which you will need to select the field type. Once selected, you will also need to specify the field "Label".

Once done, please click on the "Save and continue" button.

Afterward, you will be redirected to the field configuration page where you will be able to set everything depending on your liking. Considering the fact every field type holds specific settings we will not go off-topic to explain in detail how to configure each individual type.

When you complete the field configuration, please do not forget to click on the "Save field settings" button. With this done, your new custom block type had been successfully created.

Creating a Custom Block

Now that your custom block type had been created, it is time to guide you on how to create the custom block itself. To do that, please go back to the start point of this tutorial, the "Custom block library" page. However, this time, the "Blocks" subtab is where you need to be. When you are there, please click on the "+ Add custom block" button.

When clicked, you will start by selecting the block type. You will be presented with the default "Basic block" type along with any custom block types you have created.

Please note that if you have not created any custom block type your new custom block will be automatically assigned to the "Basic block" type and you will be automatically redirected to the next "Add custom block" page.

You can edit the "Basic block" type itself by going back to the "Block types" page we have reviewed in the previous section.

On the "Add custom block" page you will need to specify a "Description" which is intended for your and other administrators' reference.

The "Body" panel is where you will have to enter the actual content which will be displayed on your website frontend. Please note that compared to the description, entering content is optional, therefore if it is not required you are welcome to leave it blank.

In the footer of the content box, you will see the "Text Format" dropdown menu which will allow you to change the text formatting used in the "Body" content box. If you are not sure what exactly you could achieve with the available format types, you can always click on the "About text formats" links and explore your possibilities.

The "Revision Information" section will be positioned right below. Here you will be able to manage the revisioning of this block. A brief message describing the changes performed could be left for future references.

Please note that these are the general block settings, depending on the block type select additional fields, boxes, and sections holding specific settings will be available on this page.

And finally, the "Save" button which you will need to click once you are done entering the block details.

Well done! At this point, your new custom block is successfully created and ready to be placed in whichever block region you desire. If you are not sure how to do that, you will find detailed instructions in the tutorial mentioned in the Introduction of this guide.

We hope you have managed to easily follow our guidance and found the information provided in this tutorial useful. In case you have any additional questions on the topic, you are welcome to contact our Support Team.