Skip to content
W3S101

Drupal - Blocks & Regions

Drupal - Understanding Blocks & Regions

Section titled “Drupal - Understanding Blocks & Regions”

Blocks and Regions are fundamental concepts in Drupal for structuring and displaying content on your website. Blocks are discrete pieces of content (like a search bar, a list of recent articles, or custom HTML) that can be placed into specific areas of your theme called Regions (like a sidebar, header, or footer).

What are Blocks?

Section titled “What are Blocks?”

Blocks are boxes of content that can be rendered in various parts of your site’s layout. Drupal provides many types of blocks, including:

  • Core Blocks: Provided by Drupal core modules (e.g., ‘Search form’, ‘User login’, ‘Site branding’, ‘Powered by Drupal’).
  • Custom Blocks: Created by site administrators via the UI to display custom text, HTML, or rich media. These are managed in the ‘Custom block library’.
  • Module-Provided Blocks: Many contributed modules provide their own blocks (e.g., a Views block displaying a list of content, a menu block).
  • Programmatically Defined Blocks: Developers can create blocks via custom modules using Drupal’s Plugin API.

What are Regions?

Section titled “What are Regions?”

Regions are predefined areas within your site’s theme where blocks can be placed. Each theme defines its own set of available regions. Common regions include:

  • Header
  • Primary Menu
  • Sidebar First / Sidebar Second
  • Content (main content area, usually not for placing general blocks directly but where the main page content goes)
  • Footer

You can visualize regions by going to ‘Structure’ > ‘Block layout’ and clicking the ‘Demonstrate block regions (Olivero)’ link (replace ‘Olivero’ with your active theme’s name).

Managing Blocks: The Block Layout Page

Section titled “Managing Blocks: The Block Layout Page”

The primary interface for managing blocks and placing them into regions is the ‘Block layout’ page.

Step 1: Navigate to Block Layout

In the Drupal administration menu, go to ‘Structure’ > ‘Block layout’ (/admin/structure/block).

Description: This page shows a list of all theme regions and the blocks currently placed in them.

Creating a Custom Block

Section titled “Creating a Custom Block”

Let’s create a simple custom block with some text.

Step 2: Access Custom Block Library

On the ‘Block layout’ page, click on the ‘Custom block library’ tab (or navigate to /admin/structure/block/block-content).

Click the ’+ Add custom block’ button.

Description: This is where you manage reusable custom blocks.

Step 3: Define the Custom Block

A form will appear. Fill in the details:

  • Block description: An administrative name for this block (e.g., ‘Welcome Message Block’). This is shown in the block list.
  • Body: Enter the content for your block using the rich text editor. You can add text, images, links, etc. Select the appropriate ‘Text format’ (e.g., Basic HTML, Full HTML).

Click ‘Save’.

Description: After saving, this custom block is now available in your library to be placed.

Placing a Block into a Region

Section titled “Placing a Block into a Region”

Now, let’s place the custom block (or any other block) into a theme region.

Step 4: Return to Block Layout and Place Block

Go back to the ‘Block layout’ tab (/admin/structure/block).

Find the region where you want to place the block (e.g., ‘Sidebar first’). Click the ‘Place block’ button next to that region’s name.

A modal will appear listing all available blocks. Find your custom block (e.g., ‘Welcome Message Block’) or any other block you wish to place, and click ‘Place block’ next to it.

Description: This initiates the process of configuring and adding the block instance to the region.

Step 5: Configure the Block Instance

A configuration form for this specific instance of the block will appear. Key settings include:

  • Title (Display title): Optionally, display a title for this block on the site. You can uncheck ‘Display title’ to hide it.
  • Visibility Settings: This is a powerful feature. You can control where and for whom the block appears based on various conditions:
  • Region: You can change the region for this block instance here if needed.

After configuring, click ‘Save block’.

Description: The block is now placed in the chosen region and will appear according to its visibility settings. You can reorder blocks within a region by dragging them on the Block layout page.

Layout Builder (Advanced Layout Management)

Section titled “Layout Builder (Advanced Layout Management)”

For more complex page layouts, especially for individual content items or specific types of content, Drupal offers the ‘Layout Builder’ module (core). Layout Builder allows content editors to visually arrange blocks and fields within sections and regions on a per-entity basis or for entity view modes, offering much more granular control than the traditional block/region system.

Real-world scenario: A university website uses blocks to display ‘Upcoming Events’ in the sidebar, a ‘Search’ block in the header, and custom blocks for ‘Contact Information’ in the footer. They use Layout Builder to define unique layouts for ‘Course’ pages and ‘Faculty Profile’ pages.

Additional Resources: