Made withDrupalTutorial

Drupal 8 Theming - Part 04 - Blocks and Regions

W

Watch and Learn

Creator on the Drupal channel

Watch on YouTube ↗

64K viewsNov 19, 201516:02 runtime

Learn the fundamentals of Drupal 8 theming by exploring the crucial concepts of blocks and regions. This guide walks you through what blocks and regions are, how to visualize them on your site, and why they are essential for structuring your page layout. Discover how to define…

Chapters

#drupal#tutorial#cmscrm

What are Blocks and Regions?

Regions: These are predefined areas in your theme's layout where content can be placed (e.g., Header, Footer, Sidebar, Content). You can visualize your theme's active regions by navigating to /admin/structure/block/demo/THEME_NAME.
Blocks: These are individual pieces of content that are placed inside regions. Blocks can be anything from a site logo and navigation menu to main page content or a custom piece of HTML.
Management: You can manage which blocks appear in which regions through the Block layout page at /admin/structure/block. Blocks can be dragged and dropped between different regions.

Defining Custom Regions

To gain full control over your theme's layout, you can define your own set of regions, which will override the Drupal defaults.

Edit the .info.yml file: Open your theme's THEME_NAME.info.yml file (e.g., emian.info.yml).
Add a regions key: Define your regions using YAML syntax. The key is the machine name (used in templates), and the value is the human-readable label (shown in the admin UI).

# emian.info.yml
regions:
  header: 'Header'
  content: 'Main content' # 'content' is a required region
  sidebar: 'Sidebar'
  footer: 'Footer'

Important
After modifying your .info.yml file, you must clear Drupal's cache for the changes to take effect. Navigate to /admin/config/development/performance and click "Clear all caches".

Rendering Regions in Twig Templates

Once your regions are defined, you need to render them in your theme's page.html.twig file.

Output a region: Use {{ page.region_name }} to print all the blocks assigned to that region. For example, {{ page.sidebar }}.
Conditionally render a region: It's best practice to check if a region has any content before rendering its wrapper HTML. This prevents empty <div> tags from being added to the page.

{# page.html.twig #}

{% if page.sidebar %}
  <aside class="layout-sidebar">
    {{ page.sidebar }}
  </aside>
{% endif %}

Creating and Placing Custom Blocks

Drupal allows you to create your own reusable blocks with custom content.

Navigate to the Custom Block Library: Go to /admin/structure/block/block-content.
Add a custom block: Click "Add custom block", give it a description (which will be its title in the admin UI), and add your body content (text, HTML, images, etc.).
Place the block: Go back to the Block layout page (/admin/structure/block), find the region where you want to place it, click "Place block", find your new custom block in the list, and configure its placement.

Introduction to Blocks and Regions

Hello, this is Ian for watchandlearn.com and in this episode we are going to be talking about blocks and regions. So, first of all, we are going to explain what blocks and regions actually are. And then we are going to see how we can make our own regions and how we can put some blocks into those regions. I hope you guys have fun with this episode. Blocks and regions are one of the more important things in Drupal theming.

Before we start, I just want to draw your attention to this page right here. So that's the front page of our site right now, and I just did a little bit of styling to it, if you can call it that. I just moved this to the right side and I just added some font styles to the theme. Of course, all of that will be available for you on GitHub repository. The link is in the description below, or if you're watching this on my site, it will be under this video.

Okay, so before we start making our regions and putting blocks in them, let's first of all discuss what regions and blocks are.

Visualizing and Managing Blocks and Regions

So if we go to Structure and go to Block layout, so these are blocks right here. We can click on this link right here, 'Demonstrate block regions', and then we have 'emian', so that's the name of our theme. If I click on this, it's going to go to the front page of our site and demonstrate where the regions are. So we have primary menu regions, secondary menu region, breadcrumb region, highlighted, content, footer, left sidebar, right sidebar.

And if we go back to our site, if we open it in another window, you can see that, let's say, in the secondary menu right here, we have 'My account' and 'Log out'. In the content area right here, we have something, let's say a title and some kind of text right here, 'No front page content has been created yet'.

Okay, so if we go back to this block page, you can see if we go to the secondary menu, you can see that we have 'User account menu' in it. So this block, so this is a block, has 'User account menu' in it, and you can place it somewhere. So let's say I wanted to place this right here to the left sidebar. As you can see, we have Search, Footer menu, Tools, and Powered by Drupal in the left sidebar. So this is search, powered by Drupal, tools, and so on.

So we can take this user account menu and just put it in the left sidebar. So I'm going to just take it and drag it to below 'Powered by Drupal'. Okay, and just save it, save blocks. And as you can see, when we refresh this page, we have 'My account' and 'Log out' right here. So this is the way you deal with these regions and blocks.

So, blocks are pieces of content that you can put on your page. Of course, they can be large pieces of content like this one right here called 'Main page content'. So it's going to put things we actually have in our pages or articles and so on into this block, and it's going to display it on our page. But you also have something like Site branding, Main navigation—so small pieces of content that you can move around on your page.

Connecting Regions to Twig Templates

Let's now check out how this looks on our actual template. So if we go to our theme and go to page.html.twig, you can see some corresponding names. So like primary menu, secondary menu, breadcrumbs, and so on. If we go back here and demonstrate block regions again, you can see this primary menu, secondary menu, breadcrumb, highlighted, help, content, and so on. So the content should be right here. So as you can see, everything on our page is corresponding to the regions that we have in our administration.

Defining Custom Regions in YAML

So what we want to do now, we don't want to use these default regions that we have because I think there are too many of them. We are going to use just a few. And to do that, we have to go into our info file. So emian.info.yml. And then we are going to define some regions right here. So we do regions:. We of course indent it because this is a YML file, and then we add the name of our region. So one of the regions we have to have, of course, is content. So I'm just going to write content. This is the name that we are going to be using in our theme. And we can add it a second name which we are going to be using in our administration, so, let's say, a quote-unquote "human readable name." So I'm just going to define this as 'Main content'.

Okay, so the second region we want to have is header, of course. So every page has to have a header, and I'm going to name it 'Header'. Okay, and then we want to have a footer, of course, and I'm going to name it 'Footer'. So we have three regions right here, and I'm just going to add one more. So we're going to have, let's say a standard blog is going to have a header, footer, main content, and the sidebar. So I'm just going to call this one sidebar, and we're not going to be having two sidebars, but just one. Okay, and I save this.

Clearing Cache and Understanding the Effects

When I save it, if we go to our site, refresh, nothing will happen, of course. Because as I said before, when you make changes to your configuration files, you have to clear the cache. So we're going to go right here into the Configuration, and then we're going to go to Performance and clear all caches.

I'm going to turn this off. And as you can see right now, 'The block emian account menu was assigned to an invalid region sidebar_first and has been disabled.' We get these warnings because those regions don't exist anymore. So as I said before, Drupal comes with a set of some kind of default regions, but when you define your own regions, those regions don't work anymore. I'm just going to turn this off right here because I reinstalled the database when I prepared for this video and I forgot to turn this off.

Okay, so those default regions don't exist anymore. And when we go to our site right now, you see that we have only this, we have this, and also this right here. Because Drupal already had a 'Content', so main content, and it already had a 'Header' and a 'Footer'. So everything that was in a header and a footer stayed on the page, and also everything that was in main content stayed on the page. But as you can see, we don't have anything right here.

Rendering Custom Regions in a Twig Template

So let's define these regions on our page. I'm just going to remove all the styling, actually all the comments right here because we don't need them. I'm just going to call this one... okay, actually I'm going to leave it as layout-container and I'm going to remove primary menu, secondary menu, breadcrumbs, highlighted, page help, because we don't actually have those regions so we don't need them. So we're going to leave the header, we're going to leave this page.content. I'm just going to leave this piece of code right here and we have a footer, so we're going to leave it right here. So now our page, our actual page template is a bit smaller. So I'm just going to save this.

And if we go to blocks right now, so Structure, Block layout, we can see that all of these disabled blocks are right here. So we can move them around if we want. So we have our main content, header, and a footer. So let's say we of course want to have user account menu. We can put that, we need this because it will help us log out and log in. So we just put this one this guy right into our sidebar. Okay, save blocks. And if we refresh the page, of course, nothing happens. Nothing happens because we didn't define sidebar in our theme, in our template actually. So we're going to go to our template.

So this is Twig right here. If page.sidebar_first and endif. So what's what's this actually doing is checking if something exists in sidebar_first, but we don't have a sidebar_first, we have a sidebar. So I'm just going to remove this _first, and we're going to check if something exists, if this region has any blocks in it. If it does, it's going to output this HTML right here, and we are going to call this page.sidebar. So what this piece of code is doing is just checking if there are blocks in the region, and if there are, it's going to output this right here, and it's going to call the page.sidebar region. So wherever we put into that region, it's going to display on our page. So if I save this, go right here, refresh it, as you can see, we now have 'My account' 'Log out'.

Okay, so that's the user account menu right here. So let's put another block in it, one that we can see. So let's put 'Powered by Drupal'. Okay, save this block. If we refresh the page, we have 'Powered by Drupal'. Okay, so that's the way you define regions in Drupal 8. If you used Drupal before, you already know all the concepts behind blocks and regions, but if you haven't, this is a good introduction to it.

Creating and Placing a Custom Block

Before we conclude this episode, let me just show you how you can make your own custom block with some kind of content in it that you want to display on your page. So we go to the Block layout page and go to 'Custom block library', and then we add a custom block. We can call it 'Hello hello'. And let's just put some HTML in it, actually just some text: 'Hello there'. And I'm going to make it an H4 tag. As you can see, you can put images in it, links in it, you can add some HTML output to it, and so on. Also, you have these formats right here, but when you install a module, you can actually add a PHP in these blocks if you want. So let me just save this.

And now we have this 'Hello' block. So if we go to Block layout, we can't see that block right here. So to put it in some region, we do this. So I'm going to put it in the sidebar region. I'm just going to press this 'Place block' link right here. And as you can see, we have 'Hello' block right here. So I'm just going to click 'Place block', 'Save block', and that's it. So now we have this 'Hello' block in our sidebar. I'm just going to put it above the 'Powered by Drupal'. Okay, okay, save this block. And if we go to our front page, you can see 'Hello hello there'.

Conclusion and Next Steps

Of course, during the course of these videos, we are going to be dealing with with regions and blocks throughout the whole series. So of course, what we learned right here, it's not everything you need to know about blocks and regions, but as we are doing our page, we will find more and more uses for these blocks and regions.

Okay, so this is it for this episode. Well, you know the deal. If you like the video, please like it or even subscribe to my channel. You can follow me on Twitter or on Facebook, all that good stuff. I hope you enjoyed this episode, and thank you for watching once again. And I'll see you in the next video.