We have already talked about nodes, content types, and fields. In Drupal, they often comprise the main content of a page. Very likely you will want to display extra information along the page. This can be accomplished using containers called blocks. For example, the main content of a page can be a news article and a block can be used to display a list of other articles written by the same author. You could also use a block to show a search box or copyright text. Let’s explore what Drupal blocks have to offer.
Static vs dynamic content
Depending on how often the information presented in a block changes, they can display static or dynamic content. When the data to present is the same always or almost always, we say the content is static. For example, if you create a website for an event, you could use a block to display the picture of your sponsors on the sidebar in every page of your site. Another example is when copyright text, often placed in the footer, includes the current year. This will change once a year so in practical terms the data presented can be considered static.
On the other hand, when the content changes regularly, we say the content is dynamic. For example, you might want to have a block in the sidebar that list the latest news articles that have been published on the site. If you were to create a new article every day, the block’s content will change daily. Usually this happens automatically, without requiring manual interaction. Once the block is configured, using Views for example, it will update itself. Another example of dynamic blocks is one that will display the newest products in your store.
Technical note: Drupal does not make a distinction between static or dynamic blocks, but it is a good mental model to consider when building your website.
Enforcing visibility rules
It is possible to configure a block to be shown or hidden when certain conditions are met. Drupal core provides rules for controlling block visibility by content types, pages (URLs), user roles, and site languages. These rules are provided via modules, so you can look for contributed modules or write custom ones to provide new visibility rules. For example, using the day of the week or the phase of the moon.
Let’s consider a website that, among others, has a content type “Article” and another one “Event”. The block “more articles written by the same author” makes sense when displaying a news article. When viewing an event, it makes no sense at all because events do not write news articles. Similarly, a block displaying a map with the location of an event only makes sense when visiting the detail pages of events.
Pages can be used for controlling block visibility as well. In this case, “page” refers to the URL of the page you are visiting. For example, you might want to display an interactive map only on the contact page: /contact. Or display the office’s address on every page under the events section of the site: /events/*. In this case, the asterisks (*) serves as a wildcard that will match any path that starts with /events/ like /events/intro-to-drupal-training or /events/drupal-migrations-training. If you want to display a block on the front page of the site you use the special value <front>. For instance, to show a hero image.
Some of these conditions allow you to negate them. For example, if you want to show a block everywhere except on the front page. When you set multiple rules, they all need to be met for the block to appear to the user. For instance, in the user profile page, you might show a list of articles the person might be interested in reading based on previously read articles. This block would be configured to appear in the /user page and only for logged in users.
It is possible for a block to use information from the environment to change the information to present. Revisiting the example of “more articles written by the same author”, before the list is aggregated, Drupal read the user who created that page and fetch more of their articles. The same can be done with other pieces of data. For instance, if you have a multi city car dealer business, you can show a list of more vehicles on sale in the same city.
The ability to read data from the environment is often not tied to configurable block settings. Instead, it is determined by how the block was initially created. For instance, when a block is created using a View, it is the View itself that will allow you to read the node id or the node author to change the information to present.
Block can have fields
In a previous article we talked about the versatility of Drupal fields and explained many benefits of using them. Similarly to content types, it is possible to define custom block types and add fields to them. To create custom block types you go to the “Block layout” admin interface and then select the “Custom block library” tab. The path is yourdomain.com/admin/structure/block/block-content.
Everything that was described about Drupal fields apply for blocks. A use case is creating an “special offer” block type with fields title, description, image, and expiration date. The block could be configured so that special offers appear on the sidebar as long as the expiration date has not arrived.
Block placement
Throughout this blog post you might have noticed that when I talk about blocks I also indicate the place they will appear on the page: sidebar, footer, header, etc. Blocks need to be placed in what are called “theme regions.” We will discuss themes in more detail in a future entry. For now, we just need to understand that one of the many responsibilities of a Drupal theme is controlling the layout of the site. The theme will provide regions of content where blocks can be placed. The number, location, and behavior of regions vary from theme to theme. For the purpose of this writing I will only talk about Bartik, the blue/gray/black theme that ships by default with Drupal.
To check which theme regions are available you go the the “Block layout” admin interface. Then, in the “Block layout” you click on the name of the theme you are interested in. Finally, the last step is to click the “Demonstrate block regions (Bartik)” link. The admin path is located at /admin/structure/block/demo/bartik. You will notice 18 yellow boxes with names in them. Each is a theme region in which we can place blocks. Once you are done inspecting, you can go back by clicking on the “Exit block region demonstration” link at the top left of the page.
The most important region is “Content” which usually contain the primary content of a page. Other frequently used regions are “Sidebar first” and “Sidebar second”. Notice that they are not named left or right sidebars. This is intentional. Drupal supports multiple languages including ones that are written right to left like Hebrew. In those cases, Drupal can flip the position of the sidebars using CSS so that the sense of first and right sidebars persists in those languages.
A theme can also decide to hide a region when no block is configured to appear in it. “Featured top” is an example of this. This region has a gray background which is not seen in a default Drupal installation. If you were to add a block to this region you will see it. Otherwise the whole region is hidden. This is called “collapsing” a region. It is up to the theme to decide for each region whether it is collapsed when no block is placed in it, or if it will continue to occupy the space it would otherwise use. Similarly, it is possible for a theme to expand a region when an adjacent one is collapsed.
Note: There is a plan to introduce a new front-end theme that will replace Bartik as the default in future versions of Drupal. You can read more about this initiative at https://www.drupal.org/project/ideas/issues/3064880.
Building up the page
With one more concept under our belt, we can now understand how a full Drupal page can be assembled. Let’s consider the following: a news article is a node of the “Article” content type. This content type have several fields associated to it to store information like tags and an image. The node is displayed in the “Content” theme region filling up the center of the page. And around it, we can have several blocks that display related information across multiple theme regions.
How does it feel to understand the pieces that make up a Drupal page? What is the block feature that you find more interesting? Do you have other tips on the use of Drupal blocks?
