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
5. Crie seu arquivo css css / my_module_name.css
.red {background: red! Important; }
.green {background: green! important; }
.yellow {background: yellow! important; }