On the block layout page, I added the "Site Branding" block twice, once for normal use (all nodes except content type landing page) and once for landing page use (all nodes of content type landing page).

I themed the block using the twig template block--system-branding-block.html.twig, but this modifies both blocks.

Is there a way to get more specific and create a twig template for each block, or should I re-create the landing page block some other way so that I can use a different template?

EDIT: My goal is to actually change the HTML of the block, so I can't use a pure CSS approach.

up vote 3 down vote accepted

There's a few things you can do. Here's three.

  1. Consider using a pure CSS approach. If you look at the body element for your page there may well be different classes you can use to make different selectors for styling the block. Modern CSS, particularly with the availability of :before and :after pseudo selectors, is incredibly powerful and you very often don't need custom HTML to adjust styling for different cases.

  2. You can also implement hook_theme_suggestions_alter in your theme (in the file mytheme.theme) to supply alternative template suggestions based on the current path, for example.

Following this example, your code might look like:

function THEME_NAME_theme_suggestions_block_alter(array &$suggestions, array $variables) {
  $current_path = \Drupal::service('path.current')->getPath();
  $result = \Drupal::service('path.alias_manager')->getAliasByPath($current_path);

  $path_alias = trim($result, '/');
  $path_alias = str_replace('/', '-', $path_alias);
  $path_alias = str_replace('-', '_', $path_alias);
  $id = $variables['id'];

  $suggestions[] = 'block__path_alias__'.$path_alias;
  $suggestions[] = 'block__' . $id . '__path_alias__'.$path_alias;
}
  1. Another option would be to create a second variant of the site branding block then use the option in Drupal's block system which lets you turn blocks on or off by content type.
  • I'm actually changing the HTML in the block (hard-coding a couple links) so I can't go with a pure CSS approach. – Patrick Kenny Aug 10 at 13:04
  • @PatrickKenny I have added some (untested) sample code for you. – Alfred Armstrong Aug 10 at 14:27
  • As you want this to vary by content type, as long as there's a common path alias structure you should be able to grab the common part from the alias and use that in the suggestion. – Alfred Armstrong Aug 10 at 15:36
  • @PatrickKenny another possible solution occurred to me, so have added that to my answer as well. – Alfred Armstrong Aug 11 at 17:58

Try this module Block Content Machine Name

Will provide additional template suggestion like block--block-content--[MACHINE_NAME].html.twig.

  • This works for block content (custom blocks made at /admin/structure/block/block-content), but does it work for system blocks (site branding)? – Patrick Kenny Aug 10 at 15:23
  • Yes, this module works also with system blocks for example machine name of site branding block is sitebranding . you can see it from admin/structure/block/manage/sitebranding . – berramou Aug 10 at 15:27

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.