Commit fa576784 authored by benjamin melançon's avatar benjamin melançon 🛠️
Browse files

Add extending block to add class example

parent 026b9c4d
Loading
Loading
Loading
Loading
+34 −0
Original line number Diff line number Diff line
@@ -75,4 +75,38 @@ And finally, finally, we can delete those divs, and if we're sure we don't want

Octavia takes a conservative approach to replacing Bulma's and Stable's templates, preferring to add a class rather than override all the HTML, so there's lots of examples of this.

First, make certain the `<div>` or other HTML element you want to add classes to is in fact using an `attributes` variable and not hard-coding them.  In this example, we want to add a `navbar-menu` class to the, well, navigation bar menu to match the [static design header template](https://gitlab.com/agaric/patternlibrary/blob/master/static-layouts/design-source/templates/header.hbs).  Rather than change the `<nav>` to the `<div>` that the design template uses, we'll keep the more semantic `<nav>` that Drupal's Stable theme is providing to us (by way of Bulma and Octavia).  The navigation menu appears in a block that starts like this in the source:

```
<!-- BEGIN OUTPUT from 'themes/contrib/bulma/templates/block/block--system-menu-block.html.twig' -->
<nav role="navigation" aria-labelledby="block-agarica-main-menu-menu" id="block-agarica-main-menu" class="menu">
```

So we do our thing of looking at [Bulma's block--system-menu-block.html.twig](https://cgit.drupalcode.org/bulma/tree/templates/block/block--system-menu-block.html.twig) and we see that it, in its own words, `extends "@stable/block/block--system-menu-block.html.twig"`.  It's our lucky day because it also gives an example of adding classes to the attributes which *will be used by the template it is extending*.

> NOTE: Well actually that's what we were walking our way through the templates to confirm; if you open [Drupal core's Stable theme's block--system-menu-block.html.twig template](https://cgit.drupalcode.org/drupal/tree/core/themes/stable/templates/block/block--system-menu-block.html.twig) you'll see that rather than a hard-coded `class="menu"` or something like that it has an `{{ attributes }}` variable inserted into the `<nav>` element.
>
> > NOTE: Well actually it's a bit more complicated than that in this case; the opening tag of the navigation element looks like this:
> > `<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>`
> > All that is doing, though, is excluding two attributes (`role` and `aria-labbelledby`) from being output with the variable because they are already included in the HTML.  Classes will still be output in the place where the `attributes` variable is inserted.

We can add a class without having to duplicate any HTML portion of a template by following Bulma's example:

```
{% set classes = classes ?? ['menu'] %}
{# Footer blocks display in columns. #}
{% if region == 'footer' %}
  {%
    set classes = classes|merge([
      'column',
      'is-narrow',
    ])
  %}
{% endif %}
{% set attributes = attributes.addClass(classes) %}
```

We make our own template targeted to just the main menu.  The file name to use for our template in order to do that is provided helpfully in a "FILE NAME SUGGESTIONS" comment in our page's HTML source (courtesy of enabling the Twig debugging).  That name, and so the name of our template file, is `block--system-menu-block--main.html.twig`.  In this file we don't need the `if` statement that Bulma is using because the block template itself is already conditionally loaded only for the main menu.  Therefore we can go straight to setting the `navbar-menu` class:

```
{% set classes = classes ?? ['menu'] %}