Learn about the blocks and theme regions.
We’ll cover the following:
- Cover what blocks and regions are
- How to view theme regions
- How to manage blocks
- How to display blocks on specific pages
Transcript
Trainer (00:00):
The block system in Drupal allows you to display content in theme regions. A block at its most basic level is just a bit of HTML added into a theme region. And it can be the site’s main navigation, a search form, or it could be the logo and site name, or it can just be basic HTML. To demonstrate all of this, let’s go to structure, then block layout, and here you can see all of the theme regions and their blocks. The amount of regions available depends on the theme. It’s the theme that implements the regions. And here you can see that in the header region, there’s the site branding block.
Trainer (00:45):
And if we scroll further down in the content region, which is the main region, it has the page title, tabs and the main page content block, which renders everything that isn’t a block. So when a basic page or an article is rendered, it is rendered through the main page content block. Now it’s hard to visualise where these regions appear in the theme from just this page. But if we scroll all the way back up and click on demonstrate block regions, it’ll highlight the regions in the theme for you. So straightaway you will know where the block will appear if you add it into a specific region.
Trainer (01:26):
Let’s jump back to the block layout page and let’s look at how to manage blocks. I’m not going to cover the whole block system in this video because that’s a whole course in itself. Instead, I’ll cover the fundamentals, which should be enough to get you started. Let’s first look at how to add a block into a region. So let’s scroll down to the sidebar first region. This region will appear on the left-hand side. And if you click on place block, you should see a pop-up of all the available blocks. Over time, as you are building your website, this list will grow. So I do recommend that you use this filter option up the top here.
Trainer (02:06):
So what I’ll do is I’ll search for powered, and let’s add this block into the region. This block just displays a bit of text, which says Powered by Drupal and the word Drupal just links over to drupal.org. So to place this block into the region, just click on place block, and here you can configure the block, but we’ll look at this configuration later on. So go ahead and click on save block and straightaway you can see the Powered by Drupal block has been added into this region. And you can also reorder the blocks in the region. So if you want, you can have the block right down at the bottom, or you can order it at the top of the list. Once everything has been configured, just scroll down and click on save blocks. And then if we go to the homepage, we can see our Powered by Drupal block right here.
Trainer (02:57):
Let’s go back to the block layout page. So let’s go to structure, block layout, and let’s scroll down to the block which we just added. And from the operation column, you can configure the block just by clicking on the configure button and you can also disable a block. So let me go ahead and disable it. And disabling the block will leave it in the region, but it won’t show it. And this is handy for testing out blocks because you can temporarily disable them. And then if you want to enable the block, you can just click on enable. And then if we scroll back down, we can see that our block has been enabled again. And finally, if we click on the down arrow, we also have the option to remove it. This will fully remove the block from the region. It won’t delete the block. It’ll just remove it from this region.
Trainer (03:50):
Let’s now click on configure. And from the configure block page, you can change the title of the block by changing the values in the title field. And you can also have the title displayed by checking the display title checkbox. Then below that you have the block visibility settings, which allows you to control when a block is displayed. You can configure the block to appear on specific content types or a specific page, and you can even have a block displayed for users with specific roles. And then below the block visibility settings, you can move the block into a different region by selecting a region from this dropdown. But let’s go ahead now and change the visibility settings so that the block only appears on the home page.
Trainer (04:38):
So click on pages and then enter in this special path called . This will tell Drupal to only display this block on the homepage. And then click on save block. And then if we go to the homepage, we can see our block right here. But if we go to any other page, such as this article, you can see that the block is no longer visible, but if we go to the homepage, the block reappears, and that is because we have configured the block visibility settings to only show the block on the front page or homepage.
Trainer (05:15):
If you have the contextual links module installed, and if you installed Drupal using the standard installation profile, then the module should already be installed. And if you hover over any of the blocks, you should see a pencil icon. And if you click on this pencil icon, you can easily jump to the configure block page just by clicking on the configure block link. This is a quick and easy way to get to the configure block page.