Drupal 8 Theming - Part 04 - Blocks and Regions

hello this is even for watch and learn comm 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 so if you can call it that I just move 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 description actual link is in the description below or if you're watching this on my site it will be under the under this video ok so before we start making our regions and putting blocks in them let's first first discuss what regions and blocks are so if we go to structure and go to block layout so these are blocks like right here we can click on this link right here demonstrate block regions and then we have endymion so that's the name of our team 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 region 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 secondary menu here we have my account and log out in a 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 it okay so if we go back to this blog page you can see if you can see if we go to 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 so as you can see we have search footer menu tools and power drop by Drupal in left sidebar so this search powered by Drupal tools and so on so we can take this user account menu and just put it in the in the left sidebar so I'm going to just take it and drag it to the 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 or 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 let's now check out how this looks on our actual template so if we go to our theme and go to page dot HTML tweak 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 so what we want to do now or we don't want to use these defaults 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 endymion dot in for that one help and then we are going to define some regions right here so we do regions we of course in the indented 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 the second name which we are going to be using in our administration so let's say a potent quote 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 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 set this 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 are going to go right here into the configuration and then we are going to go to performance and clear all caches turn this off and as you can see right now the block and demian account menu was assigned to 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 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 iris 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 because Drupal already had content so main content and two already had the 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 statement page but that as you can see we don't have anything right here so let's define this 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 a 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 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 account menu we can put put that we need this because it will help us log out and login 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 and so this is twig right here if page sidebar first and if so what was this actually doing it is checking if something exists in the sidebar first but we don't have a side by first we have a sidebar so I'm just going to remove this first and we're going to check if something exists if if this regions 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 that 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 page that sidebar region so wherever we put into that region is 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 logout okay so that's the user 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 use Drupal before you already know all the concepts behind blocks and regions but if you haven't this is a good entry the introduction to it before we conclude this episode let me just show you how you can make your own custom block so with some kind of content in it that you want to display on your page so we go to 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 inside bar 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 power by drupe ok save this block and if you go to our front page you can see hello hello there 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

Channel: Watch and Learn

Views: 59,742

Rating: 4.9727426 out of 5

Keywords: Drupal 8, tutorial, Drupal 8 theming, theming, Drupal theming, Drupal blocks, Drupal regions, blocks, regions, web site, website

Id: DqTDiLzr4Iw

Length: 16min 1sec (961 seconds)

Published: Thu Nov 19 2015