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.
To handle these short comings in Drupal 7 you would use Panels for complex layouts and Bean so you can add fields to 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”.
Testing Block
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.
Summary
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?
Nice article and explanations. Love that “reference field” example.
BTW, I’m missing an option to assign a custom CSS class. Still needs an extra module for it!?
Sorry I don’t understand. Where do you want to add custom CSS classes?
I was looking for build-in parameters to set a custom class or even more attributes. Most likely you know the following D7 module projects:
https://www.drupal.org/project/block_class
https://www.drupal.org/project/block_attributes
Expected to find something similar or basics in D8 core.
Oh, I see. This functionality is not in core and I think it’s better to stay as contrib. I’m sure they’ll be upgraded to Drupal 8.
In Drupal 8, the themes control the CSS and you need to add the CSS to the theme.
I use Adaptive Theme and I don’t let it do everything. Adaptive Theme has a generator (starter kit) that sets up a sub-theme. When you create the sub-theme, you have options. One of the options, AFTER you set it up, is custom CSS. But, if you want to use all the other options, use them BEFORE you do the custom CSS, or it will erase all your custom-css.css configurations.
After you have formatted what you want in the options and saved, you can either click the tab in the Adaptive Theme settings “Custom CSS” and enter the custom CSS or better yet, go into “themes/adaptive_tommy/styles/css/generated/custom-css.css” and open the “custom-css.css” that was created when you checked the box for “Custom CSS”, in an editor.
I like the Atom editor because it makes it easy and I create a “soft wrap” in preferences. Then create your CSS there, but make sure you create a duplicate of the CSS in a second file for backup.
I commonly copy and paste all my code again and again from the “custom-css.css” onto the backup, to make sure I never lose it. If you don’t have a backup and you go into the Adaptive Theme and change something, like the size of H1 text, when you save, it will erase all the custom CSS you have already done.
If you have a backup, you can simply copy and paste it back into the “custom-css.css” file.
I also use Firebug in Firefox to see the CSS code. In Firebug, in the upper left of the panel, that is at the bottom of the page, you will see a small box, right next to the bee. Click it and pick the text, paragraph or whatever you want to apply CSS to and then left click on it.
In the panel at the bottom, right click on the blue area that shows what you picked. you will see, 4th from the top, “Copy CSS Path”.
Copy that and past it into your CSS file. In Atom, it show all the code that does not matter above the code that does. Delete that and see if the styles that you have created have not changed. The upper code will be to specific and will only work on that page if you don’t delete it.
Good luck.
Thanks for the long reply.
Hello James, your comment and tip is all about custom rules. My question/comment was about how to apply custom classes to certain elements. (not how to style them)
First of all: Very Good Tutorial !!
When I complete this tutorial and I select a blog post, I see the image and the body of the Promo block is to the right of the image and the link text is below the image. That does not look professional.
I would like to see both to the right of the image or both below the image
How can I change this ??
Regards and Compliments,
Hans
This will be a combination of reordering the fields and applying some custom CSS.
Hi Ivan, nice post. I have created a custom block in my module and its rendered successfully. Now, I want to change the content of the block based on the ajax POST data, I can do this in drupal 7 with a switch statement in hook_block_view() function.
In drupal 8, controllers are used to render the output, but I am not able to create the block inside the controller.
Any suggestions would be helpful.
Thanks.
> In drupal 8, controllers are used to render the output, but I am not able to create the block inside the controller. Any suggestions would be helpful.
When you say you can’t create a block inside of a controller, are you getting errors? Blocks are entities and you should be able to programmatically render it.
Here’s an example of rendering a paragraph entity.
Replace $paragraph with the block entity.
Hi, so in the second example you place the custom block above the body of the blog article. But what if I want to place the custom block in the sidebar like the static block in the first example?
Hi Johny,
The first example, “static block” is a custom block.
If you want to add a custom block into a region. Just create it and add it to a region from the Structure, “Block layout” page.
Cheers,
Ivan
Yeah, but I’m talking about the the promo block in part 2. If I added it into a region it would appear on every blog page and not just on a specific one and also it would appear twice, in the region and above the body…
Oh, you want to select a custom block and have it appear in a region?
One way is to do it using Views. Create a block view and add the “ID” contextual filter and select “Content ID from URL”. from “Provide default value”. Then configure the view to display the entity reference field referencing the selected block. UPDATE: Found this link: http://drupal.stackexchange.com/a/183372/247
Or, look at “Field as Block”. (https://www.drupal.org/project/fieldblock) I have a tutorial on using the Drupal 7 version, https://www.webwash.net/create-a-call-to-action-block-using-the-field-as-block-module/
Sounds good, thank!
In fact, I don’t really want to do it, I just wondered how it could be done, after reading the article 😉
Thanks for this.
What about the theming of custom block ?
What exactly do you want to know about theming a custom block?
It’s like theming any other thing in Drupal.