How to add class to multiple view-blocks using twig?

Question

I have four blocks to a view. I want to add class 'fancy-body' to all four blocks. How can I add that.

view_id : categories

display_id's of blocks : block_1, block_2, block_3, block_4

I know, I can add classes by creating individual twig template file for each block. like this,

block--views-block--categories-block-1.html.twig
block--views-block--categories-block-2.html.twig
block--views-block--categories-block-3.html.twig
block--views-block--categories-block-4.html.twig

Is it possible to achieve in single twig template file? How can I achieve that?

Need Help, Thank You!

Answer 1

If it's just classes you need, the modules mentioned in Joseph's answer should be enough.

If you need to make more alterations and definitely need a custom template file, you can implement hook_theme_suggestions_HOOK().

Something like:

function module_theme_suggestions_block(array $variables) {
  $suggestions = [];

  if ($variables['elements']['#base_plugin_id'] == 'views_block') {
    if (preg_match('/views_block:categories-block_[0-9]+/', $variables['elements']['#plugin_id'])) {
      $suggestions[] = 'block__views_block__categories_all_blocks';
    }
  }

  return $suggestions;
}

With the above example your single template file would be named block--views-block--categories-all-blocks.html.twig.

Answer 2

There are several modules that allow you to add classes to blocks via admin, depending on where you're adding the blocks:

• If using Layout Builder: https://www.drupal.org/project/layout_builder_component_attributes

The Layout Builder Component Attributes module allows editors to add HTML attributes to Layout Builder components (blocks). Attributes can be added to 1) the block (outer) element, 2) the block title, and 3) the block content (inner) element.

• If using Block Layout: https://www.drupal.org/project/block_classes

Block Classes allows users to add classes to block title, content, and wrapper of any block through the block's configuration interface. This module extends the Block Class module features.