Showing Twig Template Suggestions

Overview

When you enable Twig's debug mode at Administration > Configuration > Development > Development settings, Twig template suggestions are added to your site's HTML source code.

→ ensure this setting is enabled.

Example

The following example shows the partial output of the Drupal frontpage, with mytheme set as the default theme, and Twig debug mode enabled. Specifically, this example shows the markup for the "Powered by Drupal" block.

The green comments show which template files Drupal tried to locate, in the order it tried to locate them (from more specific to more generic, as prescribed by the theme inheritance system):

• block--mytheme-powered.html.twig
• block--system-powered-by-block.html.twig
• block--system.html.twig
• block.html.twig

Since none of the more specific template files are used anywhere in the theme inheritance chain, the most generic template file for blocks (block.html.twig) provided by your theme (mytheme) is used.

If you were to duplicate the themes/mytheme/templates/block.html.twig file (that you previously added to override the generic template for all blocks), rename it to block--mytheme-powered.html.twig, clear caches (you added a new template file!), and reload the page, the template hints in the source code will now show that the new template file is being used for that block:

If you change the CSS border colour to "purple" in block--mytheme-powered.html.twig, the change to a purple border will be visible in the frontend as well:

Now that you have successfully overridden the "Powered by Drupal" template file, you can keep customising it to fit your needs. Due to its name, the template is so specific that it will only affect the "Powered by Drupal" block; no other blocks will be affected.