Drupal 8 Development: 5 Things to Add to Your Theming Toolbox
My uncle used to say, "You have to use the right tool for the job." This is no different when it comes to Drupal 8 theming and development. I have been having an absolute ball learning and theming with Drupal 8 the past several months. You can read more about how I got inspired here. In this article, I will outline some of the tools and methods I have been using while I've been building a new Drupal 8 theme.
1. Twig Debugging
One of my primary tools for Drupal 8 theming is Twig debugging so you'll definitely want to enable this while building out a theme and site. Chapter Three wrote a great post on enabling Twig debugging so I won't rehash that here how to get it up and running.
Twig's debug output will really come in handy for printing out:
- Theme hook names
- All possible suggested template names
- Existing templates being used
- The full path of the current template in use
After you write your own theme hook, those new template names will also show up in the debug output.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
<!-- BEGIN OUTPUT from 'themes/custom/hibiscus/templates/layout/region.html.twig' -->
Sample output from Twig debugging
2. Devel Kint
Kint, part of the Devel module for Drupal 8 is awesome for inspecting arrays that contain your entity info, field names, view modes, and more. Kint is similar to Devel Krumo but for Drupal 8. If you really want to dig in with theming, Kint will be invaluable, especially for writing custom preprocess functions, creating variables, and theme hooks.
3. Search Kint
Search Kint for Drupal 8 is similar to Search Krumo for Drupal 7. It extends Kint by giving you two additional functions that are huge time savers. The first is a search box and select list to search any arrays on the page. The second function is a "get path" box where you can easily copy an array path. This takes the guess work out of things, especially since Kint provides much more info than what we were used to in Krumo.
4. Drupal Console
Drupal Console is fast becoming one of my new favorites. This is an amazing tool which can perform dozens of Drupal 8 tasks efficiently in Terminal. I'm just getting started with Console but I really like it already. Console can import / export config, clear cache, generate module / theme scaffolding, generate entities, create nodes, and much more. There's even has a "learning" mode as well as some auto-complete functionality. So it does a lot of what Drush does but it goes beyond with much needed and added functionality. At this point, I am pretty sure I will be switching over to using Drupal Console instead of Drush.
module:debug Display current modules available for application
module:download Download module or modules in application
module:install Install module or modules in the application
module:uninstall Uninstall module or modules in the application
Just a few sample commands available out of dozens in Drupal Console
5. Drupal Template Helper
There is also now a Google Chrome plugin called Drupal Template Helper which moves all the your Twig debug output to a Chrome web inspector tab. This makes your main HTML inspection area a lot cleaner and easier to scroll through. I even got this extension running in Opera which has been my browser of choice lately for web development. Note, I've been using Opera for theming for a few reasons. It's built upon Webkit so it's the same familiar Web Inspector UI as Chrome that you're used to. Opera also seems faster, less buggy, and less bloated than Chrome.
This is just a basic rundown of my Drupal 8 Toolbox. I am sure I will pick up more tools as time goes by. Do you have any favorite tools I have not mentioned here?```