Problem/Motivation

It has been difficult for themers to determine which theme function or template produced the markup they wish to modify, and usually involves searching the Drupal codebase for instances of classes or other such identifiers found in the resulting markup.

Proposed resolution

Output the full path and name of the template file used for each block of markup in HTML comment tags before and after the markup when Debug mode is enabled (Need reference to Twig/theme debug mode, and how to enable it):

<!-- START /sites/all/themes/mytheme/templates/node/node--1.html.twig -->
<!-- END /sites/all/themes/mytheme/templates/node/node--1.html.twig -->

Remaining tasks

  1. Have Twig theme engine produce these comments without the need to change any .html.twig template files.

User interface changes

None visible in output, only HTML comments in markup.

API changes

None.

Original idea by Fabianx

See Fabian's comment (#25) in #1808254: Standardize and simplify the attribute syntax in Twig template files

Comments

Fabianx’s picture

Assigned: Unassigned » Fabianx
Status: Active » Needs work
Fabianx’s picture

Hopefully getting to this after the big core rebase :-).

Fabianx’s picture

Status: Needs work » Fixed

Fixed.

Commited to front-end:

http://drupalcode.org/sandbox/pixelmord/1750250.git/commit/19ad5b3d0d427...

I also added:

<!-- CALL: comment_wrapper__node_article | START: core/themes/stark/templates/comment/comment-wrapper.html.twig -->

So you can also see "direct" suggestions.

TODO in follow-up: Create GUI for activating / de-activating this.

Fabianx’s picture

Component: Twig engine » Twig engine (twig_engine branch)

Now also works with suggestions:

<!-- SUGGESTIONS: 
* node--1.html.twig
* node--article.html.twig
* node.html.twig
 -->
Fabianx’s picture

Status: Fixed » Needs work

Re-open to add format like:

<!-- BEGIN 'comment_wrapper__node_article' THEME MARKUP -->
<!-- FROM core/themes/stark/templates/node/node--1.html.twig -->
<!-- FILE NAME SUGGESTIONS:
  x node--1.html.twig
  * node--article.html.twig
  * node.html.twig
  -->
<article id="node-1">
  <h2>Title</h2>
  // ...
</article>
<!-- END 'comment_wrapper__node_article' THEME MARKUP -->
Fabianx’s picture

fixed

http://drupalcode.org/sandbox/pixelmord/1750250.git/commit/6e1c158d8304e...

@todo but should not do the processing for the suggestions if debug_verbose is off:

Fabianx’s picture

Status: Needs work » Closed (fixed)
ollu’s picture

For thoose like me that are looking for what to do to implement this feature ...

  1. Open up your settings.php
  2. Add $conf['theme_debug'] = TRUE;
  3. at the bottom of the file.

  4. Clear cache drush clear cache all
joos’s picture

From: https://www.drupal.org/project/drupal/issues/2839709

Add the twig.config related lines to development.services.yml, under parameters: key:

twig.config:
    debug: true
    auto_reload: true
    cache: false