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

Was this helpful?

  1. Getting Started

Drupal Attributes

In Drupal's twig templates you'll often see an attributes variable being output within the template. This variable is how core and contrib modules inject their CSS classes, an ID, or data attributes onto template markup. You'll also find title_prefix and title_suffix variables. These are used by core and contrib modules to inject markup into twig templates. A good example of this is the core Contextual Links module. If you were to remove the attributes, title_prefix, and title_suffix variables from a node template, for example, then the Contextual Links module would no longer have a way to add its drop-down to the display of nodes and this would make it impossible to inline edit the node or perform other tasks that are typically part of the Contextual Links module.

In some cases this may not be an issue for you, but in general it's best to plan to accommodate those Drupal-specific variables in your component markup so that when you integrate Drupal content into your components, other features can be available too. Since the attributes variable can include class, id, and data attributes in one variable, we need to make sure we only combine Drupal’s classes with ours, and let the other attributes render without Drupal classes. This can be accomplished on the main wrapper of the component template like this:

<article class="card
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  {{ title_prefix }}
  {{ title_suffix }}
  <div data-gb-custom-block data-tag="if">

    <div class="card__media">
      {{ image }}
    </div>
  

</div>

</article>

Note that the without twig filter in this example is a Drupal-specific filter, so for the style guide we'll want to make sure we’re using one that supports Drupal’s custom filters. Pattern Lab has configuration options that support Drupal twig filters.

PreviousDrupal Best PracticesNextTwig Blocks

Last updated 3 years ago

Was this helpful?