Como adicionar um atributo de classe a um bloco?

Como posso adicionar um atributo de classe a um bloco Drupal 8?

Existem muitos exemplos no núcleo do Drupal, como os módulos de ajuda que define os atributos role para o bloco. Depois disso, posso adicionar uma classe com sucesso.

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

É possível adicionar uma classe sem o gancho de pré-processamento? Idealmente, dentro do arquivo de plugin de bloco localizado em src / Plugin / Block /?

Isso ajudaria a manter todo o código relacionado a um bloco contido em um local.

Você tentou apenas definir #attributes no array de renderização retornado por nosso plugin de bloco?

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

Olhando para BlockViewBuilder::preRender(), isso deve funcionar.

Resposta

Você pode verificar o módulo Block Class .

A classe de bloco permite aos usuários adicionar classes a qualquer bloco por meio da interface de configuração do bloco. Adicionando um pequeno trecho de PHP a um tema “s block.tpl.php arquivo, as classes podem ser adicionadas ao elemento pai de um bloco. Viva os temas de blocos mais poderosos!

Resposta

encontre um modelo de galho sugestão de nome para o seu bloco (usando comentários de depuração do twig) e substitua-a

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

Resposta

1. Crie o arquivo hello.config

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

2. Anexe seu arquivo 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. Defina a classe no arquivo my_module_name.module

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"); 

// Obtenha o ID do bloco

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

// Obtenha a região que tem o bloquear

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

4. my_module_name.libraries.yml

aqui, my_module_name é o nome da minha biblioteca

insira a descrição da imagem aqui

5. Crie seu arquivo css css / my_module_name.css

.red {background: red! Important; }

.green {background: green! important; }

.yellow {background: yellow! important; }

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *