Talking Drupal #487 - Single Directory Components Workflow

Feb 3, 2025

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.

Ask episode

AI Snips

Chapters

Transcript

Episode notes

INSIGHT

Understanding SDCs

SDCs are Drupal's way of formalizing components, collecting markup, styles, and JavaScript in one directory.
Unlike general web components, SDCs are Drupal-specific and enhance code organization.

ANECDOTE

SDCs in Client Projects

Brian Perry's recent client projects, including a D7 to D10 migration, led him to use SDCs more.
The projects suited SDCs as the frontend work was simple, and a decoupled approach wasn't necessary.

INSIGHT

SDCs and JavaScript Components

SDCs share core concepts with JavaScript components, such as props and slots.
Props are data passed to components (like attributes), while slots are placeholders for markup.

Get the Snipd Podcast app to discover more snips from this episode

Get the app

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.

For show notes visit: https://www.talkingDrupal.com/487

Topics

What are Single Directory Components (SDC)
Why the switch to SDCs
What is there in common between decoupled and SDCs
Can you give us an overview of your workflow
Common pitfalls
How should someone get started working with SDCs
Does it work with Paragraphs and Blocks?
Does it need to be all at once
How do you think SDCs will evolve
Do you see this leading to more Decoupled front ends
What contrib modules make working with SDCs easier

Resources

Guests

Brian Perry - brianperry.dev brianperry

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Scott Weston - scott-weston

MOTW Correspondent

Jacob Rockowitz - jrockowitz.com jrockowitz

Embedded Content
Brief description:
- The Embedded Content module allows site builders to select, create, and update content embedded within HTML inside CKEditor.
- For developers, the EmbeddedContent plugin is like a Block plugin without context.
- There is a demo on YouTube https://www.youtube.com/watch?v=GxOn-P3Q5Gg
- 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)
Maintainer(s):
- Teun van Veggel (nuez)
- https://www.drupal.org/u/nuez
Module features and usage
- Insert themed content in Ckeditor5 using Drupal plugins without having to write rich HTML and CSS
- Render these results directly in the CKEditor
- Create 'inline' embedded content that sits inline with the text, like footnotes.
- Provides
- Embedded Content plugin
- CKeditor 5 plugin.
- Ecosystem
- Embedded Content: Examples for examples of how to build your own plugins.
- Embedded Content: Entity for embedding content entities
- Embedded Content: SDC for single directory components (under development)
- Potential Challenges
- Example of the embedded content tag.
- Translations via TMS (data is serialized via an attribute)