Intro to template files

Activity 1

You want to override the block template to customise the HTML and to also show the block's internal name (block id).

To do so you must figure out which template file is being used, copy that into your own theme directory, and modify the file.

Where do you start looking and which file are you looking for?

Activity 1B

If you looked carefully you found out that Stable9 does indeed provide a block.html.twig template at /core/themes/stable9/templates/block/block.html.twig.

Copy (don't move!) Stable9's into your theme's /templates/ directory. You can create a blocks subdirectory inside your templates directory and place the block template in there, or place it directly in the templates directory - how you organise your template files is up to you.

Inspect the copied file. The first 30 or so lines of the template file are useful comments about what the template file is intended for and which variables are available for output.

Look through the block of comments and go over the variables, in particular the plugin_id variable.

The next 10 lines are the actual Twig template: HTML mixed with a bit of Twig syntax such as:

Printing variables: {{ content }}

Conditional logic:

{% if label %} 
<H2>{{ label }}</H2>
{% endif %} 

→ conditionally prints an <H2> element if the label variable has a value.

You'll learn more Twig syntax later on. 

For now, modify your copied template file: on the line before the one that contains <div {{attributes}}>, add the following:

<div>
 Block ID: {{ plugin_id }}
</div>

• Save your template file.
• Clear your caches.
• Reload your homepage.

It should look similar to this:
 

Image

Congratulations. You've just created your first template override.

Activity 2

During this activity you'll make your overridden block template file a bit more useful by wrapping the output in a <div> with some built-in styling to clearly show where each block begins and ends.
Open up your theme's block.html.twig.

You previously added this code:

<div>
 Block ID: {{ plugin_id }}
</div>

Add some inline style:

<div style="color: red">
 Block ID: {{ plugin_id }}
</div>

Now wrap all the markup in a div with a border:

<div style="border: solid red 1px; padding: 1em; margin: 1em">
  ...
</div>

The full code listing for your block.html.twig (without the comments) becomes:

<div style="border: solid red 1px; padding: 1em; margin: 1em">
 <div style="color: red">
  Block ID: {{ plugin_id }}
 </div>
 <div{{ attributes }}>
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>
   {% endif %}
   {{ title_suffix }}
   {% block content %}
     {{ content }}
   {% endblock %}
 </div>
</div>

Note: have not changed any template logic here - we wrapped the output in a div with a red border, nothing more.
Clear your caches and reload the homepage. It should look similar to this:

Image

You've now overridden the block template file with some additional HTML/CSS to show you the boundaries of each block.

However, it looks like some of the blocks are still missing a red border. More specifically, the two menu blocks don't seem affected by your template changes.

In the next activities you'll find out why.

Activity 3

If you look at the page's source code you will find that these blocks are indeed blocks because they're wrapped in a <div> with class="block", so why are they ignoring your block template?

Can you guess why some of these blocks are ignoring your block template?

Activity 4

In your IDE, browse to core/themes/stable9/templates/block. This directory contains the block-related template files the Stable9 theme provides:

Image

You have determined that the 2 menu blocks are ignoring your overridden block template file. Looking at the block-related template files provided by Stable9, is there another block template file that might be related to menu blocks?

Activity 4B

To override Stable9's block--system-menu-block.html.twig, copy it into your theme directory and modify it.

Similar to Activity 2, find the <nav>...</nav> tags and wrap them into a div that has a blue border:

<div style="border: solid blue 1px; padding: 1em; margin: 1em">
 <nav>
   [...]
 </nav>
</div>

Save the file, clear your caches, and reload your page.

In addition to the blocks with a red border, your two menu blocks should now have a blue border:

Image

Activity 4C

The red blocks are showing the Block ID, but the blue ones are not.

• Why is this happening?
• How can you fix this?