4

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.

7

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.

2

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

enter image description here

5. Create your css file css/my_module_name.css

.red{ background: red !important; }

.green{ background: green !important ; }

.yellow{ background: yellow !important; }

1

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!

1

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 %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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