Learn how to create your own custom blocks.
We’ll cover the following:
- Cover what custom blocks are
- Create and manage custom blocks
- Create block type
- Attach blocks to content types
So far, all we’ve done is add existing blocks into regions. Now you’ll learn how to create your own blocks. Let’s go to structure, block layout, and click on custom block library. If you can’t see this tab, it means the custom block module is not installed. If we go to extend, and filter by custom block, and make sure the custom block module is installed. This module will be installed if you installed Drupal using the standard installation profile.
Let’s go back to the custom block library. The custom block module allows us to create a block with a bit of content and add it into a region. We can also create different block types, which are fieldable. This is the same as content types. Here, you can see that we have a single block type called basic block. If we click on manage fields, there is a single field called body. But you can add extra fields to this block type by clicking on the add field button, and then selecting a field from the add a new field dropdown.
Let’s go back to the custom block library and let’s create our first block. A block can be created by clicking on add custom block from this page, or if we go to block layout and then click on place block, we’ll also see the add custom block button right here.
Let’s go back to custom block library, and let’s now create a block that’ll have a bit of text and we’ll add it to the sidebar first region. Click on add custom block, and then in the block description, I’ll enter in welcome text, and then in the body I’ll paste in welcome to our new site, and then click on save. Here, you can see the block that we just created. I should mention that you can filter this page by block description and also the block type. This is useful because over time as you create more blocks, this page will grow. If you need to edit or delete a block, you can do so from the operations column. If you click on the block description text, it’ll take you to the block edit form.
Now let’s add this block into a region. So far, we have just created the block but we haven’t added the block into a region. Let’s go to block layout, and I will scroll all the way down until I find sidebar first, and then I’ll click on place block. If I filter by welcome, I should see the welcome text block and the category should be custom, which means it’s a custom block. Then click on place block. Let’s hide the title, so I’ll uncheck display title, and we’ll leave everything else as it is and then click on save block, and I’ll reorder the block all the way to the top, and then I’ll scroll down and click on save blocks.
Let’s go to the home page. Here, you can see the block that we just added into the region. If you want to edit the content of the block, you can go to the custom block library page and edit the block from there, or if you hover over the block, you should see this pencil icon if you have the contextual links module installed. If you click on the pencil icon, simply click on edit, and this will take you to the block edit form. Once you’ve made your change, just click on save and you should be redirected back to the homepage. That is how you can create a custom block and add it into a region.
Now I want to show you how to use custom blocks with content types. To explain all of this, let’s jump into a product, and let’s imagine that we want to add a refund policy to the bottom of every product page. To do this, we could add a text area field to the product content type similar to the product summary, and then manually add the refund policy text into each product. But instead of adding it manually into each product, which is time consuming, let’s create a custom block that will store the text and we’ll create an entity reference field on the product content type, which will allow us to reference the custom block and display it. By using a custom block, we’ll have a single version of the text, and if we need to change it in the future, we can change it in the custom block once instead of manually editing each product.
Let’s first create the custom block. Go to structure, block layout, and then click on custom block library, and then add custom block. In block description, enter in refund policy, and then I’m pasting some random text, and I’ll add in refund policy to the front and I’ll make it bold, and then click on safe.
Now we need to create an entity reference field on the product content type. Go to structure, content types, and then click on manage fields on the product row, and then click on add field. From the add a new field dropdown, select other from reference. From label, I’ll enter in components as the field name, and then click on save and continue. From the type of item to reference dropdown, select custom block right under content, and let’s change the allowed number of values to unlimited. We can select any number of custom blocks. Then just click on save field settings. Then from the reference type section, just check basic block under custom block type, and then click on save settings.
Now that the field has been created, click on manage display and then full content. Then, if we scroll all the way down, we should see the components field. Currently, it is disabled, and let’s move it below related products. Let’s hide the label. Then, from the format dropdown, select rendered entity, and then click on save.
Now we need to go to content, and let’s edit a product. Then, if we scroll all the way down, we should see components. All we need to do is search for refund, select it, and then click on save. Then, if we view our product and scroll all the way to the bottom, we should see our refund policy. Then, if we go back into content, and let’s edit another product, and then scroll all the way down and let’s select refund, and then click on save. Then, if we view this product, we can see the refund policy here as well.
Now, if you want to edit this refund policy, all you need to do is go to structure, and I’ll open that up in a new tab, then block layout, and then click on custom block library. If we edit the refund policy, so let me just put in new up the front, and then click on save. If we refresh our product page, we should see the new text.
By referencing a custom block, we can change the content from a single location.