How to create a custom block template for a specific region in Drupal 11?

General
1

I’m working with Drupal 11 and have a region on my homepage called “frontrow1” that contains several blocks. I have created a subtheme of Bootstrap 5.

In Drupal 7, I was able to create a template for blocks in that region using block--frontrow1.tpl.php, but I can’t seem to create a similar template in Drupal 11 using block--frontrow1.html.twig.

I’ve tried to check for the region in block.html.twig by adding the region parameter in hook_preprocess_block(), but I wasn’t successful in getting it to work.

/**
Implements hook_preprocess_block().
*/
function YOURTHEME_preprocess_block(array &$variables) {
//Check if the block is inside a region on the page.
if (isset($variables['elements']['#configuration']['region'])) {
     $variables['region'] = $variables['elements']['#configuration']['region'];
else {
     $variables['region'] = NULL;
   }
}

Despite this, I’m still unable to get the block region information properly within the template.

{{ region }} //outputs NULL

How can I create a custom layout for blocks specifically in the “frontrow1” region? Any guidance on the correct approach for templating this case in Drupal 11 would be greatly appreciated!

2

In Drupal 11 (and earlier versions like Drupal 8 and 9), theming has changed compared to Drupal 7. You can no longer use block--regionname.html.twig directly like you did with block--frontrow1.tpl.php in Drupal 7. The Twig templates work a bit differently, and regions are not automatically passed to the block templates. However, you can still achieve this with the right approach by using hook_preprocess_block() and customizing your Twig template.

Steps to Create Custom Block Template for a Region in Drupal 11

  1. **Preprocess Function to Capture Region Information:**To get the region information for blocks, you can add the region to the block variables in hook_preprocess_block(). Your code is close, but it’s missing a small detail, which is ensuring that the block configuration is passed correctly.Update your hook_preprocess_block() like this:

php

Copy code

/**
 * Implements hook_preprocess_block().
 */
function YOURTHEME_preprocess_block(array &$variables) {
  // Ensure the block region is set correctly.
  if (!empty($variables['elements']['#configuration']['region'])) {
    $variables['region'] = $variables['elements']['#configuration']['region'];
  } else {
    $variables['region'] = NULL;
  }
}

This function ensures that the region variable is passed to the block template.
2. Create a Twig Template Based on the Region:Now that we have access to the region variable in the block’s preprocess function, you can create a conditional Twig template.In your theme’s templates folder, create a new block template. This template will be used only for blocks in the “frontrow1” region:block--frontrow1.html.twig

twig

Copy code

{# Custom block template for blocks in the "frontrow1" region #}
<div class="block--frontrow1 {{ attributes.addClass(classes) }}">
  <h2>{{ label }}</h2>
  <div class="content">
    {{ content }}
  </div>
</div>

3.Note:* The block--frontrow1.html.twig will be automatically applied to any blocks placed within the “frontrow1” region if your preprocessing step correctly assigns the region to the template.
4. **Modify the Block Template for Specific Blocks (Optional):If you want to apply a custom layout to specific blocks within the “frontrow1” region, you can create a more specific template. For example:block--[BLOCK_ID]--frontrow1.html.twig**Replace [BLOCK_ID] with the actual block machine name or ID. This will allow you to create a template that applies only to specific blocks inside the “frontrow1” region.
5. **Clear Cache:**After making these changes, clear the Drupal cache to ensure your new template and preprocessing function are picked up.Run this command in the terminal or flush caches through the Drupal admin interface:

bash

Copy code

drush cache-rebuild
  1. **Verify in Twig Template:**You can now verify that the region variable is available in your Twig templates. Use the following debug statement in your block.html.twig:

twig

Copy code

{# Check what region is being passed to the template #}
<div class="block-region-{{ region }}">
  {{ content }}
</div>

This should output block-region-frontrow1 when the block is placed inside the “frontrow1” region.