Share this article:

Blog
Aug 07, 20244 min read

Single Directory Components in Drupal core: A comprehensive overview

Nikolay Tsekov

Chief Operating Officer

Single Directory Components in Drupal core: A comprehensive overview

Known for its robustness and flexibility, Drupal continues to evolve, providing developers with innovative tools to streamline their workflow. One of the most significant additions in recent releases has been the introduction of Single Directory Components (SDC) in Drupal Core. This feature promises to simplify the development process, improve component reusability and enhance the overall theme experience. This article looks at what SDCs are, their benefits, and how to implement them in your Drupal projects.

What are Single Directory Components?

Single Directory Components in Drupal are a way of encapsulating all the necessary files for a component in a single directory. This includes the component's templates, styles, JS and configuration files. By organising components in this way, developers can manage, reuse and maintain them more efficiently.

Advantages of individual directory components

Modularity and reusability

  • SDCs promote a modular architecture where components can be easily reused in different parts of the site, reducing redundancy and maintenance.

Improved maintainability

  • With all component-related files in one directory, they are easier to find and update, resulting in improved maintainability.

Streamlined development workflow

  • SDCs simplify the development workflow by reducing the scattering of files across different directories. This organisation fits well with modern front-end development practices.

Consistency

  • By encapsulating styles, scripts and templates together, developers can ensure a consistent implementation of components across the site.

Implementing Single Directory Components in Drupal

Each component needs a single directory for its assets. This directory must exist in a components/ subdirectory of your theme or module’s directory (so that Drupal can find it). A {NAME}.component.yml file containing metadata about the component. Creating a schema within your {NAME}.component.yml is mandatory for modules, but optional for themes. However, it's highly recommended.

Choose a name for your component. We will use button for our example. It should be unique within the theme. Components are namespaced, so several different themes could declare a button component.

button.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Call to Action
description: Call to action button
props:
  type: object
  required:
    - text
  properties:
    text:
      type: string
      title: Text button
    modifiers:
      type: array
      items:
        type: string
      title: Class names

Then we need to define the HTML structure of your component in the Twig template file.

button.twig

<button class="btn {{ modifiers|join(' ') }}">
  {{ text }}
</button>

Let us apply some CSS to this button to give it a more appealing appearance. All you have to do is make a CSS file in the component directory including the name of your component.

button.css

.btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &.primary {
    background-color: #0056b3;
  }
  &.secondary {
    background-color: #6c757d;
  }
}

We have the following file structure for the new button component in our theme: 

Image
button component

To use a component we will need to know the component ID. This is the machine name of the module or theme that provides the component, plus the name of the component itself, separated by a colon. Examples:

{module}:{component} 
some_custom_module:button: where some_custom_module is the module name, and button is the component name
olivero:teaser: where olivero is the theme name, and teaser is the component name

In our case, we will use the component directly in the Twig template and use the {% include %} keyword. Edit the file node.html.twig and simply add the following code at the bottom:

  {% include 'theme_name:button' with { text: 'Click Me', modifiers: ['primary'] } only %}

This will include our button component on the node page. Here is the outcome.

Image
example button component

 

Learn more about the other new features of Drupal 11 here.

Conclusion

The introduction of Single Directory Components in Drupal Core marks a significant step towards modernising the front-end development workflow in Drupal. By consolidating all component-related files into a single directory, developers can achieve greater modularity, maintainability and consistency. The use of SDCs not only streamlines the development process, but also aligns Drupal with modern web development practices, making it a more powerful and user-friendly CMS.

As Drupal continues to evolve, features like SDCs will undoubtedly play a crucial role in improving the developer experience and the overall quality of Drupal websites. Our Drupal agency is here to help you dive in, explore Single Directory Components, and start building more modular and maintainable Drupal sites today! 

SUBSCRIBE TO OUR NEWSLETTER

Share this article:

SUBSCRIBE TO OUR NEWSLETTER

Related Blog Articles

    Drupal 11: What to expect? Comprehensive guide to new features and enhancements

    Blog

    Drupal 11: What to expect? Comprehensive guide to new features and enhancements

    Drupal 11 is out! In this article, discover it's exciting features and improvements. Upgrade now to redefine your digital strategy with Bulcode's expert support.

    Written by Svetoslava Angelova
    Aug 05, 20247 min read
    Varna and Burgas airports' websites use React components in Drupal

    Blog

    Varna and Burgas airports' websites use React components in Drupal

    Drupal is a modular system whose functions can be adapted to many different requirements, which is particularly important for public administration projects.

    Written by Mihail Shahov
    Nov 04, 20224 min read
    Headless Drupal with Next.js - simple example walkthrough

    Blog

    Headless Drupal with Next.js - simple example walkthrough

    The trend recently, in web development in general, and consequently in Drupal development is to use the technology headless. The trend recently, in web development in general, and consequently in Drupal development is to use the technology headless.

    Written by Mihail Shahov
    Jan 13, 20237 min read
    Maximising your Drupal site: Unlocking the potential of Drupal 10

    Blog

    Maximising your Drupal site: Unlocking the potential of Drupal 10

    Unlock the full potential of your website! Discover Drupal 10's game-changing features, from stunning designs to seamless content creation. Elevate your web development and captivate your audience – it's time to migrate and thrive!

    Written by Svetoslava Angelova
    Sep 15, 20233 min read
    10 proven SEO tactics for boosting your Drupal website visibility

    Blog

    10 proven SEO tactics for boosting your Drupal website visibility

    Supercharge Your Drupal Site: Proven SEO Tactics for Online Success! From lightning-fast load times to captivating content, discover the secrets to dominating search rankings and winning with your Drupal website.

    Written by Svetoslava Angelova
    Sep 17, 20239 min read
     Exploring the Drupal community: Resources, support, and documentation

    Blog

    Exploring the Drupal community: Resources, support, and documentation

    Discover the vibrant Drupal community and unlock the potential of this powerful CMS! Explore invaluable resources, support forums, modules, and comprehensive documentation. Join a worldwide network of web enthusiasts and embark on a journey of web development and innovation.

    Written by Svetoslava Angelova
    Nov 08, 20234 min read
    Unveiling the power of Drupal: Your complete guide to digital success

    Blog

    Unveiling the power of Drupal: Your complete guide to digital success

    Discover the power of Drupal, an open-source content management system that transcends conventional website building. With unparalleled flexibility, scalability, and rich features, Drupal adapts to any digital need, from personal blogs to complex e-commerce sites.

    Written by Svetoslava Angelova
    Oct 09, 20233 min read
    Drupal 7 migration: Navigating the path to a future-ready website

    Blog

    Drupal 7 migration: Navigating the path to a future-ready website

    Are you still running your website on Drupal 7? If so, you might have heard the alarm bells ringing – the Drupal 7 End of Life (EOL) is here. But what exactly does this mean for your website and online presence? In this comprehensive guide, we'll dive into the nitty-gritty of Drupal 7 EOL, the urgency of migration, benefits you can reap from upgrading to Drupal 9 or 10, and everything in between. So, tighten your seatbelts as we embark on a journey to transform your digital landscape.

    Written by Mihail Shahov
    Oct 11, 20235 min read
    Unveiling the power duo: Next.js as the Headless frontend of Drupal 10

    Blog

    Unveiling the power duo: Next.js as the Headless frontend of Drupal 10

    Discover the dynamic synergy between Drupal 10 and Next.js, as this powerful combination reshapes the landscape of web development. Next.js, an open-source React-based framework, is seamlessly integrated as the headless frontend of Drupal 10, offering a plethora of benefits. From enhanced performance with features like automatic code splitting and server-side rendering to flexible design and SEO-friendly capabilities, this collaboration empowers developers to create high-performing, scalable, and visually appealing web applications. The efficient content management of Drupal 10 coupled with Next.js' adaptability to trends ensures a cutting-edge development approach, positioning this tandem at the forefront of modern web development practices. Embrace the future with the Drupal 10 and Next.js combination, redefining how we approach and craft dynamic online experiences.

    Written by Todor Kolev
    Feb 07, 20245 min read
    Config split module tutorial for Drupal

    Blog

    Config split module tutorial for Drupal

    Very often we as developers need to work with different environments. This could sometimes lead to (un)expected problems. In Drupal 8 we use the configuration system which works pretty nice, but there are cases where the settings for the local and any other environment should be different.

    Written by Ivaylo Tsandev
    May 20, 20217 min read
    Config ignore module tutorial for Drupal

    Blog

    Config ignore module tutorial for Drupal

    Sometimes we don't want our configurations to be shared in the codebase. So what can we do in such cases?

    Written by Ivaylo Tsandev
    Jul 27, 20217 min read
    Understand Drupal versions and plan a migration strategy

    Blog

    Understand Drupal versions and plan a migration strategy

    Recognise the various Drupal versions and keep your website up-to-date.

    Written by Svetoslava Angelova
    Mar 21, 20224 min read

    GET IN TOUCH

    Have a project you'd like to launch?