Skip to main content
Home
Anthony Media

Main navigation

  • Home
  • Build a Block

Breadcrumb

  1. Home
  2. Build a Basic Custom Block Component to Use in Layout Builder
  3. Set Up Your Toolkit

Twig in Your Toolkit

In order to arrange fields within a component, you'll need to know what Twig template can be used. You have a choice of templates, but knowing what they are requires setting up Twig debugging. 

Configure Twig Debugging

  • On your local development site, go to web/sites/default.
  • Copy default.services.yml to services.yml
  • In services.yml, locate the section called twig.config
twig debug
  • Change the values as indicated
    • debug: true
    • autoreload: true
    • cache: false

Save and clear cache. You should now inspect a page on your site and see other twig templates you can use.

The way it works is that the most generic template is on the bottom of the list. Go further up the list for a more specific version. Note that in this example, the field template being used is noted by an x to the left of the name; field--node--title.html.twig

Twig Tweak

The Twig Tweak module provides extra capabilities. The Cheat Sheet gives you an idea of what's available.

Book traversal links for Twig in Your Toolkit

  • Set Up Your Toolkit
  • Up
  • Paragraphs in Your Toolkit

Book navigation

  • A Common Component Pattern
  • Create a Landing page Content Type
  • Set Up Your Toolkit
    • Twig in Your Toolkit
    • Paragraphs in Your Toolkit
    • Layout Builder in Your Toolkit
  • Build a "Text with Media" Component
  • Theming
Powered by Drupal