Talking Drupal #487 - Single Directory Components Workflow
Feb 3, 2025
auto_awesome
Brian Perry, a senior front-end developer at Chapter 3 and Nintendo aficionado, joins Jacob Rockowitz, a Drupal consultant and module maintainer. They dive into Single Directory Components (SDCs), discussing their advantages and potential pitfalls. Topics include how SDCs streamline workflows and their future impact on decoupled front ends. The conversation also highlights the Embedded Content module's role in facilitating rich content creation within Drupal, likening SDCs to Minecraft blocks, and sharing best practices for integrating these innovative components.
Single Directory Components (SDCs) offer a self-contained approach to Drupal component development, improving project clarity and accessibility.
The integration of the Embedded Content module with SDCs streamlines content management by enabling seamless embedding of various content types into CKEditor.
Establishing an effective SDC workflow emphasizes prototyping, YAML schema definitions, and iterative development to enhance component management and coding standards.
Deep dives
Understanding Single Directory Components
Single directory components (SDCs) are defined as a self-contained approach within Drupal for building components, where all essential files reside in a single directory. This organization aids in clarity and accessibility of the component files, including Twig templates, CSS styles, and JavaScript code. Components encapsulated in SDCs serve as primitive representations in Drupal's theming layer, facilitating the rendering of UI elements while keeping project structures simpler. When developing projects using SDCs, it is important to define component schemas in YAML files to establish clear standards for data and structure.
Embedded Content and Module Integration
The integration of embedded content modules with SDCs highlights the capability of embedding various content types directly into CKEditor, which enhances site builders’ efficiency. The embedded content module allows users to insert elements such as quotes into the editing interface seamlessly. Future advancements aim to support SDCs directly in the embedded content module, which could simplify how components are rendered and used in content management. This also emphasizes leveraging tools that can convert complex component structures into manageable and easily editable formats for users.
Workflow Strategies for Implementing SDCs
Establishing an effective workflow for utilizing SDCs involves creating a straightforward process that includes prototyping components outside of Drupal to visualize structure before implementation. Initial steps often include creating a YAML file for the component, defining basic markup in Twig files, and determining the corresponding CSS. Iterative development is encouraged, allowing developers to progressively layer in functionalities such as slots and props, enabling them to enhance components without being overwhelmed by complexity. Overall, this structured approach promotes efficient development practices while encouraging consistent coding standards.
Challenges and Best Practices in SDC Development
While the utilization of SDCs streamlines component management, challenges may arise, particularly concerning the complexities of CKEditor and the merging of existing structures with new workflows. Adapting existing elements to fit within SDC parameters often requires thoughtful consideration to avoid confusion, especially when dealing with data mappings for various components. It is essential to recognize when to leverage slots versus props and understand the implications of Drupal's rendering process on component output. Anticipating potential conflicts or overlaps in existing code and approaches will be crucial to successfully integrating SDCs.
Future Directions for SDCs in the Drupal Ecosystem
The evolution of single directory components is poised to impact the broader Drupal ecosystem significantly, with the potential for a unified design system to emerge. As the community stabilizes around best practices, SDCs could foster reusable components and ease the process of migrating elements between various Drupal sites. Continuous development of supportive modules and improved workflows will enhance the accessibility and integration of SDCs across projects, thereby promoting more cohesive and maintainable codebases. Additionally, as new initiatives such as Experience Builder evolve, the interplay between SDCs and decoupled frontend principles may also bring about a new era of component development in Drupal.
Today we are talking about Single Directory Components, How best to work with them, and their future with Drupal with guest Brian Perry. We’ll also cover Embedded Content as our module of the week.
There is support embedding of single directory component in progress. Conceptually, this is already possible, the same way one would render a single directory component in Block plugin.
Brief history
The concept and code started as the CKEditor5 Embedded Content module, created in August 2022.
In October 2023, CKEditor5 Embedded Content was renamed to Embedded Content.
Versions available:
2.0.3 - January 22nd, 2025
Works with Drupal: ^9 ^10 ^11
Maintainership
Actively maintained? yes
Security coverage? Yes
Test coverage? Yes
Documentation? Video and an example module
Number of open issues:
All issues: 6 open, 17 total
Bug report: 6 open, 15 total
Usage stats:
509 sites report using this module
1,263 sites report using this module (using old version)
