¿Cómo agregar un atributo de clase a un bloque?

¿Cómo puedo agregar un atributo de clase a un bloque de Drupal 8?

Hay muchos ejemplos en el núcleo de Drupal, como los módulos de ayuda que establece los atributos de rol para el bloque. Entonces, después de eso, puedo agregar una clase con éxito.

/** * 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"; } } 

¿Es posible agregar una clase sin el gancho de preproceso? Idealmente, dentro del archivo de complemento de bloque ubicado en src / Plugin / Block /?

Esto ayudaría a mantener todo el código relacionado con un bloque contenido en una ubicación.

Respuesta

¿Ha intentado simplemente establecer #attributes en la matriz de renderizado devuelta por nuestro complemento de bloque?

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

Mirando BlockViewBuilder::preRender(), debería funcionar.

Respuesta

Puede consultar el módulo Block Class .

Block Class permite a los usuarios agregar clases a cualquier bloque a través de la interfaz de configuración del bloque. Al agregar un fragmento muy corto de PHP a un tema «s block.tpl.php archivo, las clases se pueden agregar al elemento padre de un bloque. ¡Hurra por una temática de bloques más poderosa!

Respuesta

encuentra una plantilla de ramitas sugerencia de nombre para su bloque (usando comentarios de depuración de twig) y anótelo

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

Respuesta

1. Cree el archivo hello.config

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

2. Adjunte su archivo de biblioteca 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. Establezca la clase en 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"); 

// Obtenga el ID del bloque

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

// Obtenga la región que tiene el bloquear

 $region = $block->getRegion(); if($region == "name_of_the_block_id"){ // Set the class $variables["attributes"]["class"][] = $class ; } } 

4. my_module_name.libraries.yml

aquí, my_module_name es el nombre de mi biblioteca

ingrese la descripción de la imagen aquí

5. Cree su archivo css css / my_module_name.css

.red {background: red! Important; }

.verde {fondo: verde! importante; }

.yellow {background: yellow! important; }

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *