Blocks, one of the built-in features of Drupal 8 after installation, are boxes with content and are usually created by different means. Blocks are placed in Regions on your Drupal page. 

To configure blocks on your Drupal 8 site, log in and from the administration toolbar, click on Structure and then click on Block layout. The block layout page will show you the current blocks being used and placed on the site.

On the Block layout page, you’ll be able to see 2 tabs, the Block layout tab, and the Custom block library tab. 

 

block layout page

Block Layout

This is where you configure the placements of your blocks. Block placement is theme specific, so that’s why you see two themes (Bartik and Seven in this case) tabs right below the block layout and custom block library tabs. In this case, we will be looking at Bartik theme block layout.

Looking further below, you’ll be able to see the list of regions in a bold text format just beside the Place block button. The list of available regions will vary, depending on the regions provided by the theme enabled. In this case, Bartik has a lot of regions provided, and these are Header, Primary Menu, Secondary Menu, Highlighted, Featured Top. Breadcrumb, Content, Sidebar First, Sidebar Second, Featured Bottom First, Featured Bottom Second, Featured Bottom Third, Footer First, Footer Fourth, Footer Fifth. Yes, there’s a ton of regions provided by the Bartik theme, now click on Demonstrate block regions (Bartik) and you’ll be able to see where each of these regions will appear on the theme.

Going back the block layout page, try to scroll down until you are able to see the Content region. The list of items underneath Content regions are all blocks. The order of the blocks set within the region will also reflect the order blocks displaying your Drupal website.

 

Content Region

 

The icon on the left side of each block indicates that you can drag-and-drop the block to either a different order or to a different region. You need to click on the Save blocks button, located at the bottom of Block layouts page, in order to save the order of the blocks you’ve set.

 

Drag Focus Block

 

You can also move each block to other regions by clicking on the dropdown region.

Region Dropdown

 

Now look at the Help block and click on the drop-down icon just beside the configure button. You’ll be able to see the Configure, Disable, and Remove options. 

 

Help Block Configrure

 

Disable option will just hide the block from displaying on your Drupal site.

Remove option will hide the block from displaying on your Drupal site, and at the same time will be removed from the list of blocks on the current region it is in.

Configure option will redirect you to a page where you will be able to configure more settings of the specific block. Go ahead and click the Configure option to see the actual block configuration page.

 

Configure block

 

On the block configuration page, you will be able to do the following:

  • Change the title field using the Title field
  • Hide or Display the title by checking/unchecking the Display title checkbox
  • Set when and where the block should appear by setting up conditions on the Visibility section.
  • Change the region where it should be placed by selecting the region from the Region dropdown field.
  • All these changes will be applied once you click on the Save block button. If you want to remove the current block from the region, click Remove block link

You can also add a new block by clicking on the Place block button form any of the regions. Clicking on the place block button will pop-up a modal listing the blocks you can use. 

 

Place Block

 

Select any of the available blocks available by clicking on the Place block button from the list. You can also add a custom block by clicking on the + Add custom block button.

Custom Block Library

This is where you will add custom blocks on your Drupal site. The first thing you’ll see just below the Custom Block Library, are the Blocks tab and Block types tab. 

 

Custom Block Library

 

Blocks

This is the section where you can view and add the actual contents for the custom blocks. 

You can search the block by typing in the keyword in the block description, or select which block type, or both. Click the Apply button to see the search result.

You can add a custom block by clicking on the + Add custom block button. Out of the box, there is only one block type, Basic Block, provided by Drupal after installation. In this case, when you add a new custom block, you’ll be using Basic Block as the block type by default.

Block Types

You’ll probably be wondering or confused about these block types. Block types are unique blocks set with different fields and display settings. Block types section will show you the custom block types you’ve added. Since there are no custom block types added yet, you will only be seeing the Basic Block block type, because this is set up by Drupal out of the box after installation.

 

Block Types

 

Try adding a new block type by clicking on the Block Types tab and then click on the + Add custom block type button. Fill in the label, in this case, we will call the new block type as Basic block with subheading, and click Save button. 

 

New Block Type

 

After you’ve added the new block type, you will be able to see it on the Block types list.

 

Updated Custom Block Types

 

Now we can add a custom field to our new block type by clicking on the Manage fields button. There is only a Body field by default. 
 

We will add another custom field for our Subheading, so what we’ll do is click on the + Add field button.

On the Add new field option, select Text (Plain) and name the label as Subheading.

For the Maximum length field and allowed number of values field, leave it as it is for now and click on the Save field settings button.

After saving the field settings, you will be redirected to additional field settings page, just skip this part and click Save settings button for now. That’s it, you have now added a custom field to your custom block.

 

Updated new block type

 

A couple of last things to do. Click on the Manage form display tab and drag Subheading just on the top of body field and Save

 

Custom block manage form display

 

Then click on the Manage display tab and drag Subheading to the top and Save.

 

Custom Block Manage Display

 

What you just did is basically rearranging the order of how these block fields display, both when editing the custom block and showing the custom block on your Drupal site.

Now go back to Blocks section and try to add another custom block content. You will now see two block types options, and one of these is the custom block type you’ve created. Click on Basic block with subheading and you will be able to see the new custom field Subheading as well.

 

New Custom Block Content

 

New Basic Block With Subheading

 

Go ahead and add any information you want and click Save button. You will now be able to use this custom block content you’ve added every time you place a block within the block layout section page.

That’s it. I’ve covered the basic parts, but I’m hoping that you are now able to understand how the block system works in Drupal 8.

Tags

Was this helpful? Share this content, and you might be able to help others