0

Here goes my drupal 8 code, so basically block.html.twig is extended to block--mytheme-sitebranding.html.twig.

Now I want to add a class to this:

{% block content %}

  {% if site_logo %}

    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
    </a>

  {% endif %}
  {% if site_name %}

    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>

  {% endif %}
  {{ site_slogan }}

 {% endblock %} 

How can I add a class to {% block content %} in Twig for block--mytheme-sitebranding.html.twig?

  • 1
    {% block %} is a Twig tag, not an HTML tag, so you can't add a class to it. – 4k4 Aug 3 '18 at 11:33
  • block does not mean block in the sense that is a Drupal block. Different terminology. Check the Twig docs. – Kevin Aug 3 '18 at 12:21
0

In your block.html.twig file ensure you have a containing div, and that "attributes" are being printed. This will give your block an ID of the block name, and typically the class "contextual-region".

If you need a class specific to this block, you can add the block ID as a class like so:

block.html.twig:

{%
    set extraBlockClasses = attributes.id | clean_class
%}

<div {{ attributes.addClass(extraBlockClasses) }}>
    {% block content %}
        {{ content }}
    {% endblock %}
</div>

block--override.html.twig:

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

{% block content %}
    {{ content }}
{% endblock %}

Unfortunately, "{% block content %}" is not a "thing" to which you may add a class. Use descendent CSS selectors from your block class.

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.