3

I want to override the block.html.twig 'classes' variable in my block--system-branding-block.html.twig which extends block.html.twig. I tried to set the 'classes' inside block--system-branding-block.html but this didn't work.

block.html.twig

{%
 set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
 {{ title_prefix }}
 {% if label %}
   <h2{{ title_attributes }}>{{ label }}</h2>
 {% endif %}
 {{ title_suffix }}
 {% block content %}
   {{ content }}
 {% endblock %}
</div>

block--system-branding-block.html.twig

{% extends "block.html.twig" %}

{% block content %}
  {% if site_name %}
    <div class="site-name">
     <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
   </div>
  {% endif %}
  {% if site_slogan %}
   <div class="site-slogan">{{ site_slogan }}</div>
  {% endif %}
{% endblock %}

I want to put another entry in the classes variable just for the block--system-branding-block.html.twig witch extends the block.html.twig

9
  • That doesn't look like your full block--system-branding.block.html.twig, I don't see an extends in there. Please paste the complete code. Or that's why it's not working :)
    – star-szr
    Commented Nov 25, 2015 at 21:32
  • @Cottser You are right there is an extends, I removed the comment block for simplicity and I accidentally removed the exteds too. But it's there in my code. Doesn't seem to work :(
    – Achilles
    Commented Nov 26, 2015 at 7:19
  • Is classes inside or out of a twig block? Commented Nov 26, 2015 at 7:45
  • ...I just want to override them for the parrent template.. Well, it sounds a bit confused. I'm almost sure you want override from child template, instead parent template. Commented Nov 26, 2015 at 7:47
  • @felipsmartins I want to put another entry in the classes variable just for the block--system-branding-block.html.twig witch extends the block.html.twig
    – Achilles
    Commented Nov 26, 2015 at 8:08

3 Answers 3

4

It's not quite the approach you had in mind (modifying the classes variable) but I would recommend you do as Bartik does and work with the Attribute object instead:

{% extends "block.html.twig" %}

{% set attributes = attributes.addClass('new-class-goes-here') %}

{% block content %}
  {% if site_name %}
    <div class="site-name">
     <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
   </div>
  {% endif %}
  {% if site_slogan %}
   <div class="site-slogan">{{ site_slogan }}</div>
  {% endif %}
{% endblock %}

I think the key thing here is that the variable you are modifying is initialized (and used) outside of the twig block. If the variable were initialized inside the twig block then I can see needing to override it inside the child templates's twig block as well.

More on working with Attributes in templates here: https://www.drupal.org/node/2513632

1
  • This approach works. It extends the parent's classes with the new class instead of overriding them completely.
    – daniels
    Commented Jul 31, 2018 at 15:31
1

You can't "override" any variables from non-block.
In fact, what you must re-assign the classes array from inside a block in the child template (or in the same), like this:

<!-- block.html.twig -->

{% set classes = ['foo', 'bar'] %}


<!-- block--system-branding-block.html.twig  -->

{% extends 'base.html.twig' %}

{% block someblock %}
   {% set classes = classes | merge(['another-classe']) %}
{% endblock %}

On-line code working: http://twigfiddle.com/rav5tx

3
  • I try this but it doesn't seem to work :( Thanks anyway.
    – Achilles
    Commented Nov 26, 2015 at 8:18
  • @Achilles Read again. I'm sure you're doing it wrong... Commented Nov 26, 2015 at 8:25
  • @felipsmartins there is no extends statement in your Twigfiddle. It does not seem to work when a template is extended
    – daniels
    Commented Jul 31, 2018 at 15:29
0

You can go like this in your .theme file:

function yourtheme_preprocess_block__system_branding_block(&$variables)
{
$variables['attributes']['class'][] = "yourotherclass";
}

That's if you use the standard block.html.twig - Code you are showing above seems to be not standard block.html.twig

4
  • In general classes should not be added via preprocess in D8.
    – star-szr
    Commented Nov 26, 2015 at 12:31
  • 1
    Maybe you can give an explanation why it should not be done via preprocess and an example how to do it in TWIG. I did not find an easy way to add it to {{ attributes }} directly in block.html.twig. Example from felipsmartins is surely working in TWIG, but is not especially for the block.html.twig more generally I think. Commented Nov 26, 2015 at 14:46
  • @StefanKorn Yes, I know there is a preprocess function for this, I was wondering if it is possible with Twig!! Thanks anyway.
    – Achilles
    Commented Nov 26, 2015 at 16:04
  • 1
    @StefanKorn see drupal.org/node/2325067 for more background on classes being moved to templates rather than preprocess. From that change record: "This change gives themers greater control over class usage, without having to use preprocess functions and complex logic to remove or add classes."
    – star-szr
    Commented Dec 2, 2015 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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