This tutorial is part of the “Build a Blog in Drupal 8” series:
The Block system in Drupal allows you to add arbitrary content into regions within a theme. A block could be as simple as just text or list content using Views.
In Drupal 7, the Block system is pretty limiting. For instance, a single block can only be assigned to a single region. You also have very basic control of hiding and displaying blocks.
In Drupal 8, the Block system has been revamped and it’s more flexible. The two big improvements: assign a single block to multiple regions and fieldable block types.
In this tutorial, we’ll continue work on our Drupal 8 blog site. We’ll add a static call-to-action which’ll only appear in the sidebar on the blog page. This call-to-action could be some promotional content or a newsletter sign-up form.
Then we’ll create a custom block type which we’ll use to create reusable promotional content that can be added to any blog post.
There’s a lot of work to do, let’s get into it.
Static Call-to-action Block
Let’s first look at the basic aspects of the Block system. We’ll create a static block and configure it so it only appears in the sidebar if a blog post is being viewed.
1. Go to Structure, “Block layout” and click on the “Custom block library” tab.
In Drupal 7, the Block module handles two things: the placement of a block and lets you create static blocks. In Drupal 8, the functionality’s been broken out into two modules.
The Block module simply handles the placement of the block; in which region it should be part of. The “Custom Block” module implements a new entity which allows you to create block content. You can create different block types and they’re fieldable.
So from this page you can create custom blocks and manage them.
2. Click on “Add custom block” and enter in “Call-to-action 1” into “Block description” and the following into Body:
Welcome to my great blog about Drupal. Click here to get a FREE eBook.
Then click on Save.
3. Once the block has been created you’ll be redirected back to the “Custom block library” page.
At this point the block is disabled and needs to be added to a specific region.
4. Click on the “Block layout” tab, scroll down to “Sidebar second” and click on “Place block”.
5. Search for “Call-to-action 1” and click on “Place block”.
6. From the “Configure block” modal, check Blog in the “Content types” Visibility vertical tab.
By choosing Blog, this means that the block will only appear on Blog content type pages. The settings allow you to control when a block should be displayed. You can control it by content type, pages and roles.
Once you’ve configured everything click on “Save block”.
7. Don’t forget to scroll right down to the bottom and click on “Save blocks”.
Now go to a blog post page and you should see the call-to-action in the right sidebar.
If you hover over the block, an edit icon will appear. These are called contextual links. If you click on it you’ll get a few links: “Quick edit”, “Configure block”, Edit and Delete.
This functionality is nothing new it’s in Drupal 7 but what’s new is the “Quick edit”. “Quick edit” allows you to edit content inline while viewing the page. You won’t have to manage the block content from the edit form. Simply modify the text inline while viewing the page. I won’t lie to you, this functionality is pretty cool.
Custom Block Content
New in Drupal 8 is the “Custom block” module which allows you to create the actual block content and custom block types.
When you install Drupal using the Standard installation profile, you get a block type called “Basic block”. This type is very basic and it has a single field: the Body field.
What we need to do is create reusable content for promotional blocks. We’ll create a custom block type called “Promo” which’ll have a Body as well as a Link field. The field will be used to link to an external or internal page.
Create Block Type
1. Go to Structure, “Block layout”, “Custom block library” and click on the Types tab.
2. Click on “Add custom block type”, add Promo into Label and the following into the Description field:
Used for promotional content.
Then click on Save.
Now that we have a block type, let’s add a link field.
3. Click on “Manage fields” in the Promo row. Then click on “Add field”.
4. Select Link from “Add a new field” and add “Promo link” to Label. Then click on “Save and continue”.
5. Leave “Allowed number of values” set to 1 and click on “Save field settings”.
6. On the field settings page you can select the allowed link type and if link text is required. We’ll leave the “Allowed link type” option on “Both internal and external links” and change “Allow link text” to Required. Then click on “Save settings”.
The “Promo link” field has been created, now let’s configure how it’ll be displayed.
7. Click on the “Manage display” tab.
The default configuration looks good. The only thing we’ll do is hide the label.
8. Select “- Hidden -” from the label drop-down on the Promo row. Then click on Save.
The Promo block type is now ready to be used. Let’s create our first promotional content.
Create Promo Content
1. Go to Structure, “Block layout”, “Custom block library” and click on “Add custom block”.
2. Click on the Promo link.
3. Now let’s create our first promo. Add “Promo 1” into “Block description”, “Looking for a CMS? Download Drupal.”, into Body.
In the Promo link area; add “http://www.drupal.org” into URL and “Download NOW” into “Link text”.
Once the page has been filled out, scroll to the bottom and click on Save.
Create Promo Reference Field on Blog Content Type
The reason why we created a Promo block type is to have a library of promotional block content which can be added to any blog post. We don’t want to hard code a single block like we did for the call-to-action earlier.
To embed a promo block into a blog post, we’ll need to create a “Promo link” reference field. This will give us an autocomplete field which can be used to select a promo block.
Let’s add this field to the Blog content type now.
1. Go to Structure, “Content types” and click on “Manage fields” on the Blog row.
2. Click on the “Add field” link.
3. From the “Add a new field” drop-down, select “Other…” from the Reference section.
4. Enter “Promo” into the Label and click on “Save and continue”.
5. On the next page, make sure you select “Custom block” from “Type of item to reference”. Then click on “Save field settings”.
6. In the “Reference type” field-set, check Promo in Bundles and click on “Save settings”.
7. Now that the field has been created and configured, click on “Manage display”.
8. We want the blocks to appear above the Body field. So move the Promo formatter above Body.
9. From the Format drop-down select “Rendered entity”. This will render the promo block using the default view mode.
10. Remove the label by select “- Hidden” from Label. Once everything is done, the formatter should look like the image below:
Don’t forget to scroll to the bottom and click on Save.
Embed Promotional Content into Blog
We’ve created a Promo block type and added a Promo field on the Blog content type. Everything has been setup now let’s test it all out.
1. Go and create a new blog post or edit an existing one.
2. You should see a Promo autocomplete field. Select a block and click on “Save and keep published.”
3. Now view the blog page. The block should be displayed above the Body field.
I really like the fieldable block types in Drupal 8. I understand that it’s nothing new, but being in core it’ll become the standard way of managing and displaying small pieces of content.
How would you use the new block types in Drupal 8?