Advanced Components
  • Welcome
  • Start here
    • Setup
    • Dependencies
  • Getting Started
    • Front-end tooling
    • Create a new D9 theme
    • Component Architecture
    • Drupal Best Practices
    • Drupal Attributes
    • Twig Blocks
  • Basic Components
    • Global styles
    • Adding webfonts
    • Heading Component
      • Improving the Heading
    • Button Component
  • A component's lifecycle
    • Hero Component
    • Include statements
    • Drupal prep
    • Drupal entities
    • Homepage content type
    • View modes
    • Add Hero to homepage
    • Drupal cache & twig debugging
    • Twig template suggestions
    • Getting field values
    • Integrating the Hero
    • Drupal Libraries
    • Hero Image styles
  • Card component
    • Card Component
    • Component Variants
    • Card Variant
    • Author component
  • Drupal site building
    • Blog articles
    • View modes
    • Drupal Views
    • Author
    • Generate content
    • Adding Blog Lists to the Homepage
  • Drupal Integrations
    • Integrating the Card
      • Taxonomy terms
    • Integrating the Card Wide
    • Author integration
    • From our blog
    • Integrating From our blog
    • Featured Content
    • Integrating Featured Content
    • Blog image styles
    • Blog detail page
  • Extras
    • Image Styles
    • Navigation
  • Resources
    • Resources
Powered by GitBook
On this page
  • What is component integration?
  • Disable Drupal Caching and enable Twig debugging (during development only)

Was this helpful?

  1. A component's lifecycle

Drupal cache & twig debugging

PreviousAdd Hero to homepageNextTwig template suggestions

Last updated 5 years ago

Was this helpful?

Before we begin integrating components with Drupal, there are some preparation to be done and some practices to understand.

What is component integration?

At a high level, component integration means wiring Drupal Twig templates to pre-built components from a design system such as Pattern Lab. By default Drupal has no knowledge of any components in Pattern Lab, but with the module and through the use of Presenter templates, we make Drupal aware of components so they get rendered using Drupal data while keeping Pattern Lab as the single source of truth for the component's markup, styles and javascript.

Disable Drupal Caching and enable Twig debugging (during development only)

Twig debugging is not required for integrating components but it is highly recommended as this will make your job easier. Disabling caching and enabling Twig debugging during development will allow us to identify the right Drupal templates we need to work with to integrate components. These templates are typically know as template suggestion. More on this shortly.

**DO THIS: ** to disable Drupal caching and enable debugging during development. Depending on your environment, these instructions may vary.

WARNING: Disabling Drupal caching and enabling Twig debugging should never be done on a production website. This is only recommended in a development environment.

Component Libraries
Follow these instructions