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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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