How to add a class attribute to a block?

Question

How can I add a class attribute to a Drupal 8 block?

There are many examples in Drupal core such as the help modules that sets the role attributes for the block. So following that I can succesfully add a class.

/**
 * Implements hook_preprocess_HOOK() for block templates.
 */
function mymodule_preprocess_block(&$variables) {
  if ($variables['plugin_id'] == 'mymodule_my_block') {
    $variables['attributes']['class'][] = 'my-nice-block';
  }
}

Is it possible to add a class without the preprocess hook? Ideally within the block plugin file located in src/Plugin/Block/ ?

This would help keeping all the code related to one block contained in one location.

Answer 1

Have you tried to just set #attributes on the render array returned by our block plugin?

$build['#attributes']['class'][] = 'my-nice-block';

Looking at BlockViewBuilder::preRender(), that should work.

Answer 2

You can check Block Class module.

Block Class allows users to add classes to any block through the block's configuration interface. By adding a very short snippet of PHP to a theme's block.tpl.php file, classes can be added to the parent element of a block. Hooray for more powerful block theming!

Answer 3

find a twig template name suggestion for your block ( using twig debug comments ) and override it

themes/templates/block--my-custom-block.html.twig

{% extends "block.html.twig" %}
{#
/**
 * @file
 * Theme override for tabs.
 */
#}

{% block title %}
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes.addClass(title_classes, 'accordion') }}{{ title_attributes.setAttribute('id', 'campus') }}>
      {{ label }}
      <i class="fa fa-plus" aria-hidden="true"></i>
    </h2>
  {% endif %}
  {{ title_suffix }}
{% endblock %}

Answer 4

1. Create hello.config file

    my_module_name/config/install/my_module_name.config content this code: 
    color :"blue"
    color_red: "red"

2. Attach your library file my_module_name.libraries.yml

  // This function below is located on my_module_name.module file

 function my_module_name_page_attachments(array &$page){
     $page['#attached']['library'][]= 'my_module_name/library_name';
}

3. Set the class in my_module_name.module file

function my_module_name_preprocess_block(array &$variables){

// Get the value of my color content in  
     my_module_name/config/install/my_module_name.config

    $class = \Drupal::config('my_module_name.config')->get('color');

// Get the ID of the block

    $id= $variables['elements']['#id']; 
    $block = Block::load($id);

// Get the region having the block

    $region = $block->getRegion();

    if($region == 'name_of_the_block_id'){

        // Set the class 
        $variables['attributes']['class'][] = $class ;
    }
}

4. my_module_name.libraries.yml

here, my_module_name is the name of my library

5. Create your css file css/my_module_name.css

.red{ background: red !important; }

.green{ background: green !important ; }

.yellow{ background: yellow !important; }